1.搭建项目

使用 create-react-app 快速构建 React 开发环境 执行以下命令创建项目：  cnpm install -g create-react-app  //创建文件 create-react-app my-app   //创建项目 cd my-app/ npm start   //启动项目

2.安装淘宝镜面 在使用 create-react-app my-app 来创建一个React应用，在拉取各种资源时,往往会非常慢,一直卡

解决方法是换成淘宝的资源： npm config set registry https://registry.npm.taobao.org -- 配置后可通过下面方式来验证是否成功 npm config get registry -- 或 npm info express

3.了解项目

React 中所有的元素都是组件，具体而言分为两种。

内置组件：内置组件其实就是映射到 HTML 节点的组件，例如 div、input、table 等等，作为一种约定，它们都是小写字母。

自定义组件：自定义组件其实就是自己创建的组件，使用时必须以大写字母开头，例如 TopicList、TopicDetail。

和 DOM 的节点定义类似，React 组件是以树状结构组织到一起的，一个 React 的应用通常只有一个根组件。

 state 和 props 管理状态

state是一个保存机制，保存数据在发生变化的时候自动重新渲染 UI

props 就是类似于 Html 标记上属性的概念，是为了在父子组件之间传递状态。（传递数据变化得状态）

 JSX 语法的本质

JSX 其实是一种语法糖。

JSX 的表达能力等价于 JavaScript 的表达能力，那么所有我们可能需要的机制，比如循环、条件语句等等，JSX 其实都能灵活表达。 相当于原生 JavaScript 的另一种写法

 React中的核心概念 1 虚拟DOM

虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。

2 Diff算法过程 1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中 2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

项目启动初始化   有css js  test.js 

  css写组件css样式

js 写组件  html展示组件和js容器 组件 什么是容器组件 和  展示组件

容器组件负责数据获取与处理；

展示组件负责根据全局props展示信息

import React, { Component } from"react";// 容器组件 （相当于js）export default class CommentVs extends Component {     constructor(props) {         super(props);         this.state = {             comments: []         };     }     // 生命周期函数     componentDidMount() {         setTimeout(() => {             this.setState({                 comments: [                     { body: "react is very good", author: "facebook" },                     { body: "vue is very good", author: "youyuxi" }                 ]             });         }, 1000);     }     render() {         return (                         {this.state.comments.map((c, i) => (                             ))}                     );     } }  // 展示组件（相当于html）可变得function Comment({ data }) {     return (                

{data.body}

--- {data.author}

这样就可以自己去写组件了

展示组件 index.js 是页面得出口 将页面组件引入index.js进行展示

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

      //抽得是App组件

);

这样就可以先去抽组件写静态页面啦~