来学习react创建项目01

起步

1. 创建项目： npx create-react-app my-app
2. 打开项目： cd my-app
3. 启动项目： npm start
4. 暴露配置项：npm run eject

cra文件结构

├── README.md 文档
├── public 静态资源

├── src 源码
├── App.css
├── App.js 根组件
├── App.test.js
├── index.css 全局央视
├── index.js 入口文件
├── logo.svg
└── serviceWorker.js pwa支持
├── package.json npm依赖

入⼝文件定义，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。