[React][CH1]React的介绍

CH1 介绍React

什么是React

React是一个快速构建可交互式用户界面的JavaScript库

React的核心是组件(Component)，他们独立，可复用

每个React程序至少有一个组件，叫做根组件，每个react程序实际上是一个组件树

React的虚拟DOM技术:

1. 用JavaScript模拟DOM树，并渲染这个DOM树
2. 比较新老DOM树，得到比较的差异对象
3. 把差异对象应用到渲染的DOM树。
   React只是一个View Library,我们需要借助其他的库来实现诸如路由等功能。

安装

react的环境配置

初始项目结构

创建项目并运行

create-react-app my-app
cd my-app
npm start

项目结构

• node_modules：项目依赖的第三方的包，是脚手架实现自己功能依赖的一些外部的文件。
• public文件夹
  • favicon.ico：项目图标
  • index.html：项目的首页
  • manifest.json：定义网页快捷方式
• src文件夹
  • index.js：整个程序的入口文件
  • registerServiceWorker.js ：(pwa)用户第一次访问网页需要联网，下次即使断网，也依然可以显示
  • App.test.js：项目测试文件。
• README.md：关于项目的说明文件
• package.json：node的包文件，关于项目的一些介绍及一些项目的指令等
• gitignore：如果项目是用git管理的，有些文件不想上传到git仓库里，可以把文件定义到该文件中

HelloWorld

//导包
import React from "react";
import ReactDOM from "react-dom";

//jsx语法
const element = <h1>HelloWorld</h1>;
console.log(element);
//将虚拟DOM里的内容渲染到真的dom里去
ReactDOM.render(element, document.getElementById("root"));

自定义配置

初始配置

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

查看和修改更多的配置细节

npm run eject

注意：eject是个单行道，新手不建议使用