环境要求

确保安装了较新版本的node.js，我安装的是 v14.17.0

新建项目

使用指令新建React项目 npx create-react-app my-app

页面调试

在项目文件夹下执行 npm start 指令启动调试，然后在浏览器访问 http://localhost:3000

断点调试路径：top/localhost:3000/static/js/D:/xxx/xxx/

调试端口修改：node_modules/react-scripts/scripts/start.js：

修改 3000 为想要的端口号即可。

通过以上代码可以发现react支持通过配置环境变量设置调试端口，在项目根目录添加 .env 文件，添加行：

PORT=8080

保存，再启动调试端口就变成了8080。

HelloWorld

修改 index.js 文件，首先定义HelloWorld组件：

  class HelloWorld extends React.Component{
    render() {
      return (
        <div>
          <span>Hello World !</span>
        </div>
      );
    }
  }

然后调用组件显示：

  import { createRoot } from 'react-dom/client';
  

  const container = document.getElementById('root');
  const root = createRoot(container);
  root.render(<HelloWorld />);

官网示例的井字棋游戏的代码中使用的调用方式在新版本中已经不能用了：

   ReactDOM.render(
     <HelloWorld />,
     document.getElementById('root')
   );
   // 这种调用方式在新版本中已经废弃了

启动调试，可以发现页面显示了 Hello World ！：

数据绑定

在React中通过大括号进行数据绑定：

  class HelloWorld extends React.Component{

    constructor(props) {
      super(props);
      this.state = {
        day:'Monday'
      }
    } 

    render() {
      const day = this.state.day;
      return (
        <div>
          <span onClick={()=>this.alertDay()}>Hello World ! Today is {day} .</span>
        </div>
      );
    }

    alertDay(){
      alert(this.state.day);
    }
  }

页面效果：

点击字符串，弹出日期提示：

视图更新

修改绑定数据的值，需调用 setState 方法触发视图更新：

    render() {
      const day = this.state.day;
      return (
        <div>
          <span onClick={()=>this.alertDay()}>Hello World ! Today is {day} .</span>
          <p><span onClick={()=>this.toggleDay()}>toggle day</span></p>
        </div>
      );
    }

    toggleDay(){
      this.setState(
        {
          day: this.state.day == 'Monday' ? 'Sunday' : 'Monday'
        }
      )
    }

在 toggleDay() 方法中如果直接设置 this.state.day = 'Sunday'; 将不会触发视图更新。

以上，对React有了个大概认识。

参考官方介绍：入门教程: 认识 React – React

React入门-认识React