React笔记01——React开发环境准备

1 React简介

2013年由Facebook推出，代码开源，函数式编程、目前使用人数最多的前端框架、健全的文档与完善的社区。

官网：reactjs.org

阅读文档：官网中的Docs

React 16 以上的版本称为React Fiber

2 React开发环境准备与工程目录简介

1）开发环境搭建

1⃣️引用js文件来使用react ——大项目中，性能较低，可维护性较差

2⃣️通过脚手架工具来编码 ——脚手架可以自动构建一个大型项目的开发流程和目录，允许以一定的方式来实现js相互引用；可以使用grunt/gulp/webpack来辅助编写脚手架；

推荐使用官方脚手架工具Create-react-app

脚手架安装：

node.js——脚手架运行环境（nodejs.org）；LTS稳定版/Current尝鲜版；

在命令行中运行node -v 或 npm -v，如果都出现了版本号，证明node和node包管理工具都已经安装成功。

macdeAir:~ mac$ node -v

v10.16.3

macdeAir:~ mac$ npm -v

6.9.0

安装脚手架

点击react官网页面上的Get Started按钮 ——> Create a New React App ——>　Create React App

页面中有3条命令，依次执行它们

npx create-react-app my-app

cd my-app

npm start

注：执行命令前先进入桌面目录

　　　　mac： cd Desktop

　　　　windows 在桌面上按住shift点击鼠标右键，会出现一个菜单——在当前目录运行命令行工具

　　第一条命令：使用create-react-app工具创建一个名为my-app的项目

　　第三条命令：运行项目环境，会自动打开一个网页　　　　　

2）工程目录介绍

1⃣️解压my-app压缩包，解压后的代码不能直接运行，因为缺少node modules文件夹

2⃣️在命令行工具中打开项目，进入项目目录下，运行yarn install命令，node modules就安装好了

yarn是什么意思？　　　　　　　　

项目中有一个yarn.lock文件，项目的依赖需要通过yarn命令来安装；

如果项目中没有yarn.lock文件，就要运行npm install命令来安装

3⃣️通过npm start命令或yarn start命令来运行项目

4⃣️项目中的一些文件介绍

yarn.lock文件

放置的是项目所依赖的第三方模块的相关信息，包含确切的版本号，不要随意更改

README.md文件

项目中全部的说明，可以把默认的说明去掉，换成自己项目的说明

Package.json文件

整个工程的一些配置信息或说明，包括第三方模块相关信息、可以执行的命令（scripts）、代码校验配置（eslintConfig）、项目支持的浏览器信息（browserslist）等

npm start = npm run start

npm build ≠ npm run build ，用来进行对项目的打包

.gitignore文件

不想传到git上的文件配置到这个文件里

node modules目录

项目依赖的所有第三方模块都放在这里，运行yarn install或npm install后自动生成的，不要自己随意更改

public目录

　-favoicon.ico文件

　　标题栏上的小图标，可以换成自己的（网上搜索如何制作ico图片）　　

　-index.html文件

　　项目html入口

　-manifest.json文件

　　PWA技术，项目中暂时不使用，忽略或删除即可　　　

src目录（*****项目的核心，放置项目的源代码*****）

　-index.js文件

　　项目入口js文件；

　　项目初始化时就已经安装了react和react-dom第三方模块，在index.js中可以直接使用import导入进来；

　　使用webpack实现在该文件中通过import引入index.css文件，可选

　　import引入App（App.js）

　　import引入serviceWorker（serviceWorker.js），可选

　　App.js帮助生成页面内容，还需要通过index.js中的ReactDOM.render()这行代码，将内容挂载到页面上

-index.css文件

　　index.js中引入的css文件

-App.js文件

　　import引入了react、component

　　import引入了logo.svg，可选

　　import引入了App.css，可选

　　负责渲染页面内容！

-App.test.js文件，可选

　　项目的自动化测试文件

-App.css文件，可选

　　页面的css效果

　-serviceWorker.js文件，可选

　　帮助实现PWA的一些功能，不用时可以忽略或删除

　-logo.svg文件，可选

　　项目中用到的svg图片