react入门

react官网

• 安装node.js 环境 官网下载傻瓜式安装
• 安装create-react-app脚手架

cnpm install create-react-app -g
或
yarn  add  create-react-app -g

• 查看版本

create-react-app --version

• 创建项目

create-react-app 项目名

• 项目目录结构

• 暴露配置项

npm run eject

• 启动项目

npm run start
或
yarn start

• 打包项目

npm run build
或
yarn build

• ⼊⼝⽂件定义，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
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';
// 这⾥怎么没有出现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。