01 react初识

react介绍

专注于构建用户界面的js库，和vue和angular并称为前端三大框架，react引领了很多新思想，是Facebook公司发布，世界范围内最流行的js前端框架，最近发布了18版本，加入了很多新特性

react英文文档（https://reactjs.org/）
react中文文档（https://zh-hans.reactjs.org/）
react新文档（https://beta.reactjs.org/learn）

react特点

• react是声明式UI
  声明式UI（左），命令式UI（右），目前的几乎都是声明式UI，更简单
  
• 组件化
• 支持跨平台开发，一种语法

环境搭建且初始化项目

安装环境

下载nodejs
node -v
(下载nodejs后，会自动安装npm)

设置cnpm源

初始化项目

npx create-react-app react-basic
npx表示临时安装一个包，名为create-react-app，然后初始化项目后会自动删掉，所以不需要全局安装

create-react-app为react脚手架的名称
项目名为react-basic

启动运行

npm start

或者
yarn start

项目目录结构说明

package.json

src目录下，核心的为App.js和index.js，index.css，可以删除其他文件

index.js

应用入口文件

// react：框架核心包
// reactDom：专门做渲染相关的包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 应用的全局样式文件
import './index.css';
// 引入根组件
import App from './App';

// 渲染根组件APP到一个id为root的dom节点上（可以在public的index.html上查看到id=root的dom节点）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

表示根组件

function App() {
  return (
    <div className="App">
     app 
    </div>
  );
}

export default App;

index.css

表示应用的全局样式文件

react18的问题

去掉18的严格模式：

root.render(
  // 严格模式节点需要去掉
  // useEffect的执行时机
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

root.render(
  // 严格模式节点需要去掉
  // useEffect的执行时机
    <App />
);