create-react-app

FaceBook官方出的一个构建React单页面应用的脚手架工具，可以轻松实现零配置就可以快速开发React的应用。

　　1、create-react-app构建react项目

// 全局安装

npm install -g create-react-app

// 构建一个my-app的项目

npx create-react-app my-app

cd my-app

// 启动编译当前的React项目，并自动打开 http://localhost:3000/

npm start

　　

　　2、构建React项目其他方式：

// npm方式:

// npm init <initializer> is available in npm 6+

npm init react-app my-app

// Yarn方式:

// yarn create is available in Yarn 0.25+

yarn create react-app my-app

　　

　　3、项目默认目录：

├── package.json　      　　 # npm 依赖
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板，页面模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式 全局样式
│   ├── index.js            # 启动的文件（开始执行的入口）入口文件！
│   ├── logo.svg
│   └── serviceWorker.js    # pwa支持
|
---webpack.config.js        # webpack 配置文件

　　4、起步：

// 启动项目
npm start
// or
yarn start
// 启动测试
npm test
//or
yarn test
// 构建生产版本
npm run build
// or
yarn build
// 解压默认的webpack配置到配置文件中,暴露配置项
npm run eject

　　

　　5、安装依赖：

npm install node-sass --save
 // or
yarn add node-sass

 // webpack.config.js
entry: [
// WebpackDevServer客户端，它实现开发时热更新功能
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// 应⽤程序⼊⼝：src/index
paths.appIndexJs,
].filter(Boolean),

//   webpack.config.js 是webpack配置⽂件，开头的常量声明可以看出cra能够⽀持ts、sass及css模块化。
// Check if TypeScript is setup(检查TypeScript是否已设置)

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

　

　　6、React和ReactDom

// 删除src下⾯所有代码，新建index.js。

import React from 'react';
import ReactDOM from 'react-dom';

// 这⾥怎么没有出现React字眼？
// JSX => React.createElement(...)
ReactDOM.render(<h1>Hello React</h1>, document.querySelector('#root'));


React负责逻辑控制，数据 -> VDOM 
ReactDom渲染实际DOM，VDOM -> DOM 
React使⽤JSX来描述UI 
babel-loader把JSX 编译成相应的 JS 对象，
React.createElement再把这个JS对象构造成React需要的虚拟dom。

　　

　　React负责逻辑控制，数据 -> VDOM

　　ReactDom渲染实际DOM，VDOM -> DOM

　　React使⽤JSX来描述UI

　　babel-loader把JSX 编译成相应的 JS 对象，React.createElement再把这个JS对象构造成React需 要的虚拟dom。

 

 

create-react-app入门教程：

https://www.html.cn/create-react-app/docs/getting-started/

https://www.jianshu.com/p/77bf3944b0f4