示例(编写一段提示信息)：

function AboutPage() {
  return (
    <> //为了返回多个JSX标签。
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

1、JSX语法

 （结合示例）像上面一样的JavaScript与HTML混合的语法，在React中成之为JSX语法。

 JSX比HTML更加严格。\`必须进行标签的闭合\`。

一个组件不能反返回多个JSX标签，如果需要返回必须将它们包裹在一个共享的父级当中。比如<>……</>或者<div></div>。

2、样式

 （结合示例）React 中需要为标签添加样式使用className来指定样式类，截取代码段中就加入了text的样式。

#截取示例中代码段
<p className = "text">Hello there.<br />How do you do?</p>

 并在单独的文件中编写CSS样式即可。

3、数据显示

 （结合示例）React中JSX语法就是HTML与JavaScript语法的结合，所以很简单的只需要通过**{ var }即可将变量插入到HTML标签之中。

 示例代码：

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

4、条件渲染

 React 因为使用JSX语法，在定义组件时，可直接利用JS语法编写完成，完成内容的输出。

 示例（不完整。）：

export default function MyComponent(){
  let content;
  if (isLoggedIn) {
    content = <AdminPanel />;
  } else {
    content = <LoginForm />;
  }
  return (
    <div>
      {content}
    </div>
  );
}

又或者是

export default function MyComponent(){
  return (
  <div>
    {isLoggedIn ? (
      <AdminPanel />
    ) : (
      <LoginForm />
    )}
  </div>
  )
}

5、渲染列表

React 渲染列表，直接依赖于JavaScript特性，例如for循环和map函数渲染列表。

示例：

export default function Hh() {

  const products = [
    { title: "Cabbage", id: 1 },
    { title: "Garlic", id: 2 },
    { title: "Apple", id: 3 },
  ];

  const listItems = products.map((v) => <li key={v.id}>{v.title}</li>);

  return <ul>{listItems}</ul>;
}

6、事件响应

 (渲染列表示例)在示例基础之上，加上相关事件。一般情况下只需要进行两步操作。

 事件编写

//事件操作。
  function handkeClick(){
    console.log("clicked");
  }

 在对应标签绑定事件 onClick={handkeClick}

const listItems = products.map((v) => <li key={v.id} onClick={handkeClick}>{v.title}</li>);

 最终得到

export default function Hh() {
  //事件操作。
  function handkeClick(){
    console.log("clicked");
  }

  const products = [
    { title: "Cabbage", id: 1 },
    { title: "Garlic", id: 2 },
    { title: "Apple", id: 3 },
  ];

  const listItems = products.map((v) => <li key={v.id} onClick={handkeClick}>{v.title}</li>);

  return <ul>{listItems}</ul>;
}

 点击对应列表item即可在控制台输出内容。

7、更新页面、及Hook。

 通常组件展示需要进行一些值的展示，需要做到值得设置和记录，在React需要添加state。

export default function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

 以上面组件为例：首先需要声明一个state变量，声明后从useState中得到两样东西，当前state以及已经更新他的函数，他们可以是任何名字[something , setSomething]。

 按钮第一次将显示时，count值为0，因为将0传递给了useState()。

 此时我们已经将button按钮绑定上了函数handleClick，通过点击按钮触发事件，将调用更新count的函数，从而对count的值进行变更。

 Hook：以use开头的函数即被称为Hook。

8、数据共享

快速入门 – React 中文文档

 以React官网示例来说。

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

主要知识点：

 Props：
 在示例当中定了组件MyButton，也随着传入了两个值count和onClick。父组件为MyApp 向 子组件MyButton使用这种传递的信息就被称之为prop。

 每个按钮的 onClick prop 会被设置为 MyApp 内的 handleClick 函数，所以函数内的代码会被执行。该代码会调用 setCount(count + 1)，使得 state 变量 count 递增。

React 对应实战内容，能够充分理解React中各种基础知识及常用技术