React 基础：

1.React 概述：

React是一个用于构建用户界面的JavaScript库。React是基于声明式、组件化开发方式。

什么是声明式？通过使用JavaScript代码来描述UI（HTML页面）展示是什么样的，就和写HTML本质上是一样的。由React来负责UI的渲染，并在数据变化时更新UI。

React基于组件化方式进行开发。把构建页面的一部内容进行封装，在相似甚至相同的场景下进行复用，通过这样的方式进行代码的复用以及页面的构建。

React支持多端开发的场景。使用React可以开发Web端，基于React-Native可以实现移动端场景开发。使用React（React 360）开发VR应用。

2.安装React：

npm i react react-dom

• react包是核心：提供创建元素、组件等功能
• react-dom包：提供DOM相关功能

3.React 脚手架：

使用如下命令基于React脚手架创建一个React项目：

npxcreate-react-app项目名称

npx 命令介绍：npm v5.2.0引入的一条命令。目的是提升包内的命令行工具的使用体验。无需安装脚手架包，就可以直接使用这个包提供的命令。

使用IDEA工具打开创建的React工程，找到工程目录下的package.json文件，执行start脚本指令：

执行完成之后，会自动打开默认的浏览器并访问本地启动的React服务。

React 工程目录解析：

使用React脚手架方式创建的工程项目具有如下几个文件以及文件目录，这里做一个详细的分析：

首先我们来看一下目录层级，第一个app目录是在执行脚手架指令创建React工程时自动生成的目录npx create-react-app app。在这目录下脚手架创建了如下几个文件目录和文件：node_modules、public、src目录，以及.gitignore、package.json、package-lock.json、readme.md文件。

其中node_modules目录我们无需关注，这个目录中存放的是当前工程以来的npm包，我们使用npm i xxx所下的包文件都会存放在这个目录下。

public目录中存放的是工程项目中使用的一些静态资源，例如logo图片和favicon.ico图标等等，这些文件不会被Webpack进行编译。也不是我们重点关注的目录。

src这个目录是我们需要重点关注的，在这个目录下存放我们编写的源代码以及各种需要被打包编译的静态资源文件。

.gitignore文件在进行git版本控制时忽略文件配置。  

package.json、这个文件比较重要，在这个文件中记录了项目所以来的npm包依赖。在使用npm i时，就会读取这个文件中的dependencies模块并进行包下载。同时这个文件中的scripts模块配置了项目的启动编译打包的脚本指令：

package-lock.json锁定本npm包依赖版本，自动生成，无需关注。

readme.md就是一个文档文件，可以记录一下开发进度和工程描述信息，提供给别人快速了解这个工程。