React 基础一

React

React学习版本： 16.x

React老版本项目： 15.x

React应用级脚手架

• CRA
• dva
• umi

React中使用的是 es6 模块化规范

React是不能直接在浏览器中运行的，我们必须借助工具才能运行React程序

• 因为React是jsx，它必须经过webpack编译为js才能运行

辅助工具

• vs code 插件
  • Simple React Snippets
  • ES7 React/Redux/GraphQL/React-Native snippets
  • React-Native/React/Redux snippets for es6/es7
• chrome浏览器
  • React developer tools(翻墙)

create-react-app 【 CRA 】

React官网提供的脚手架

• 脚手架： 作用： 快速构建一个项目

全局安装create-react-app

$ npm install -g create-react-app
$ yarn add create-react-app global

如果不想全局安装，可以直接使用npx (临时使用 [ npx ])

$ npx create-react-app 项目名	也可以实现相同的效果

启动项目

$ yarn start

打包项目

$ yarn build

配置文件抽离

$ yarn eject   这个动作不可逆【 不能返回 】

创建一个项目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安装过程较慢，可以推荐使用yarn
Installing react, react-dom, and react-scripts... 

这需要等待一段时间，这个过程实际上会安装三个东西

• react: react的顶级库
• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

Success! Created your-app at /dir/your-app
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  // 配置文件抽离
  	// webpack配置放在了node_modules/react-scripts里面 
    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 your-app
  npm start

Happy hacking!

根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。

生成项目的目录结构如下：

├── README.md							使用方法的文档
├── node_modules					所有的依赖安装的目录
├── yarn-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json					 项目依赖配置记录文件 、 记录项目脚本命令
├── public								   静态公共目录（ 生产环境 ） 不会被webpack编译
|-- config                   项目webpack配置文件
|-- scripts                  项目wepback脚本命令执行文件
└── src									开发用的源代码目录
	- index.js 项目入口文件
	- index.css 项目全局样式
	- App.js 构建了一个App组件，是项目最大的组件 【 类似根组件 】
	- App.css 是App组件的样式文件
	- App.test.js 是App组件测试文件 
	- logo.svg 初始项目的界面logo
	- serverWorker 内部文件，我们不操作