（一）React入门以及create-react-app

React是用于构建用户界面的JavaScript库

本文章主要介绍create-react-app的使用

相关资源

• React
• create-react-app

快速开始

1. 创建项目 npx create-react-app my-app

2. 打开项目 cd my-app

3. 启动项目 npm start

目录结构

没有配置或复杂的文件夹结构，只是构建应用程序所需的文件

├── README.md           文档
├── node_modules        
├── package.json        npm 依赖
├── .gitignore
├── public              静态资源
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js          根组件
    ├── App.test.js
    ├── index.css       全局样式
    ├── index.js        入口文件
    ├── logo.svg
    └── serviceWorker.js    pwa支持

可用的 Scripts

npm start

在开发模式下运行应用程序

npm test

以交互式监视模式启动测试运行器

npm run build

将生产应用程序构建到 build 文件夹。它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。

npm run eject

默认所有配置项都是隐藏起来的，如果你对当前的配置不满意，可以使用该命令，暴露配置项，这个操作是不可逆的。

执行改命令后，可以看到多出一个 config 文件夹

入口文件定义

// webpack.config.js

entry:[
    // webpackDveServer客户端，它实现开发时的热更新
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    // 应用程序入口：src/index
    paths.appIndexJs
].filter(Boolean)

webpack.config.js 是webpack的配置文件，开头的常量生命可以看出脚手架能够支持ts，sass以及css模块化

// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

React 和 ReactDom

查看src/index.js下的代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.querySelector('#root'));

很奇怪？为什么文件里面没有 React 的字眼，只调用了ReactDom的render方法

如果我们把 import React from 'react'; 这一行注释掉

//import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.querySelector('#root'));

会看到错误提示

./src/index.js
  Line 8:5:  'React' must be in scope when using JSX  react/react-in-jsx-scope

其实当我们使用 jsx 的时候 babel-loader 把 JSX 编译成相应的 JS 对象，React.createElement 再把这个JS对象构造成 React 需要的虚拟 dom

React负责逻辑控制，数据 -> VDOM
ReactDom渲染实际DOM，VDOM -> DOM
React使⽤JSX来描述UI