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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82QSe1WB-1664686974509)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221002123643333.png)]$

启动运行

npm start

或者
yarn start

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2gq4jLj9-1664686974511)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221002123938066.png)]$

项目目录结构说明

package.json

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNjcZ17n-1664686974513)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221002124449931.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DWANpBal-1664686974514)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221002124527179.png)]$

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 />
);

01 react初识

react初识