React - 1 项目结构（以及创建项目）

1 create-react-app --- cra

react的脚手架用于一键创建项目

有两种方式

方式1 全局安装cra再创建

安装cra

npm install -g create-react-app

创建项目

create-react-app your-app

'your-app'是你要创建的项目文件夹的名字

方式2 直接构建

npx create-react-app your-app

安装的主要就是以下三项

• react: react的顶级库

• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom,以前react-dom模块是包含在react模块中的

• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

uccess! Created react-basic at /Users/wudaxun/Desktop/workspace/code/bk2119/code/week5/day03/react-basic
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-basic
  npm start

Happy hacking!

出现这些代表构建成功

项目目录

├── README.md                            使用方法的文档
├── node_modules                    所有的依赖安装的目录
├── package-lock.json            锁定安装时的包的版本号,保证团队的依赖能保证一致。与yarn.lock二者出现其一
├── package.json                    
├── public                                静态公共目录
└── src                                        开发用的源代码目录
└── yarn.lock                            锁住项目的依赖的版本号

2 'react' 和 'react-dom'

'react'和'react-dom'是每个react文件必须要有的包

'react' 是react的顶级API，包含众多方法，其中Component尤为重要作用为编译jsx,还包括Fragment(空标签),createRef(定义类组件的ref),useRef(定义函数组件的ref),PureComponent(判断组件是否需要更新，来节省性能),forwardRef(包裹函数式组件绑定ref),StrictMode(开启严格模式),createElement(编译html代码)等方法

'react-dom'的唯一作用是渲染并构建dom树

3react入口文件

先将项目中src文件夹中的文件全部删除，然后创建一个index.js的文件作为入口文件

// vue项目中 src/main.js 作为项目的入口文件
// react项目中 src/index.js 作为项目的入口文件

// 从 react 的包当中引入了 React。
// 只要你要写 React.js 组件就必须引入React, 因为react 里有一种语法叫JSX，
// 稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。
// 它是从 react-dom 中引入的，而不是从 react 引入
// 老以前react-dom是包含到react模块中的
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
  // 这里就比较奇怪了，它并不是一个字符串，
  // 看起来像是纯 HTML 代码写在 JavaScript 代码里面。
  // 语法错误吗？这并不是合法的 JavaScript 代码,
  //  “在 JavaScript 写的标签的”语法叫 JSX - JavaScript XML。
  <h1>hello world</h1>,
  // 渲染到哪里
  document.getElementById('root')
)