一、React简介

①React 是一个用于构建用户界面的 JAVASCRIPT 库。
②React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
③React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
④React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
⑤GitHub地址：https://github.com/facebook/react
⑥React native：简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。
React中文开发手册：https://www.php.cn/manual/view/36330.html
官网：https://zh-hans.reactjs.org/

二、特点

①声明式设计：React采用声明范式，可以轻松描述应用。
②高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
③灵活：React可以与已知的库或框架很好地配合。
④JSX：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
⑤组件：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
⑥单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、React 安装

npm install -g create-react-app

React 安装
安装完成

环境验证：
输入：

create-react-app

环境验证

四、项目创建

1. 创建项目

create-react-app huoniu8-scratch
# 创建成功
Success! Created huoniu8-scratch at D:\huoniu8-blog\huoniu8-ui\huoniu8-scratch
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 huoniu8-scratch
  npm start

创建项目

2. 运行项目

npm start

项目运行

3. 浏览验证

   
   浏览验证

五、目录结构

├── README.md
├── node_modules
├── package-lock.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── logo192.png
│   └── logo512.png
│   └── manifest.json
│   └──  robots.txt
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── serviceWorker.js
    └── setupTests.js

package-lock.json:主要是项目依赖的安装包的一些版本号会在这里做一些限制，该文件一般不用动。
README.md:主要是项目的说明文件，在里面写一些关于本项目的说明。
package.json:脚手架自动生成的一个文件，是一个node的文件，里面有一些项目的脚手架的版本，以及一些npm的命令。
gitignore:当我们将本地文件上传到线上仓库的时候，里面的文件会被忽略，不会上传到线上。
node_modules:里面放的是项目依赖的第三方的包，这些包不是我们自己写的，是脚手架工具要实现自己的功能，需要依赖外部的一些第三方的包文件来实现。
public目录：
favicon.ico：对应的是我们启动服务以后，标签页title左边的小图标，我们可以用别的ico文件来更改它。
index.html： 是我们项目首页的html模板。
src目录：里面放的是我们项目所有的源代码。
index.js：是我们项目的入口文件。
App.test.js：是自动化测试的文件。
serviceWorker.js: