React|web前端高级React - React从入门到进阶之初识React react|create-react-ap|react安装|rea

第一部分：React入门系列文章目录
第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

文章目录

第一部分：React入门
- - 系列文章目录
  - 一、React是什么？
  - 二、React的特点
  - 三、React的安装及使用
  - 四、项目目录介绍
  - 五、总结

一、React是什么？

React官方给出的解释是：React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成赋值的UI界面，这些代码片段被称为“组件”
简单来说：React就是一个JavaScript库，它可以用来构建UI界面，特点是：声明式、高效、灵活

二、React的特点

【React|web前端高级React - React从入门到进阶之初识React】上面在概念中其实已经提到React的特点：声明式、高效且灵活，那么它的高效灵活具体体现在哪里呢，下面进行详细说明：

声明式设计：React采用声明范式，可以轻松描述应用

高效：React通过对DOM的模拟（虚拟DOM），最大限度的减小与DOM的交互，也就是说React中有一个虚拟DOM的机制，在操作DOM时一般都是直接操作虚拟DOM来改变真实DOM，从而减少对真实DOM的直接操作，从而提高DOM渲染方面的一些性能

灵活：React可以与已知的库或框架很好的配合使用

JXS语法：jsx是JavaScript语法的扩展，React一般都是配合jsx一起使用

组件化：react可以将不同的代码片段组合使用，这些代码片段被称为组件，通过构建组件可以使得代码更容易复用和维护，并能应用在大型项目开发中。

单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、React的安装及使用

react的使用有以下三种方式：

从官网下载react库到本地，然后直接引入使用

直接使用CDN地址引入使用

搭建本地开发环境，通过npm安装到本地使用（该方法依赖node环境，需要先安装node）

建议使用第三种方式，在日常项目开发中基本上也都是使用的第三种方式。下面我们来简单介绍一下第一和第二种使用方法，然后重点讲解第三种使用方式

官网下载react库到本地

官方下载地址：https://reactjs.org/
该方式需要引用三个库：

react.min.js ：React的核心库

react-dom.min.js：提供DOM相关功能的库

babel.min.js：将ES6语法转换为ES5的库

Hello React! - 锐客网 src="https://www.it610.com/article/react.min.js"> src="https://www.it610.com/article/react-dom.min.js"> src="https://www.it610.com/article/babel.min.js"> type="text/babel"> ReactDOM.render( Hello, world!, document.getElementById('root') );

直接使用CDN地址引入

与第一种方式相同：同样需要引入3个库

Hello React! - 锐客网 src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"> src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"> src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"> type="text/babel"> ReactDOM.render( Hello, world!, document.getElementById('root') );

通过npm安装使用

首先要确保已经安装了node环境

在国内使用npm速度很慢，建议可以使用淘宝定制的cnpm代替默认的cnpm，这样速度回快很多

cnpm配置：

npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm install xxx来安装了。

要想在本地搭建react的开发环境，首先我们需要通过cnpm来安装react的脚手架（create-react-app），其实就是用来构建react项目的工具包，通过该脚手架我们无需更多配置就可以快速构建React的开发环境

create-react-app自动创建的项目是基于Webpack和ES6的，命令使用如下：

cnpm install -g create-react-app/*全局安装create-react-app命令*/ create-react-app [project-name] /*项目名称不能是中文*/ cd project-name /*切换的项目目录下*/ npm start /*启动项目，默认端口是3000*/

在浏览器中打开http://localhost:3000就可以浏览项目了

四、项目目录介绍

通过create-react-app创建的react应用会自动帮我们生成一些默认的目录结构，下面我们来一一介绍：

project-name/ ：项目的根目录

node_modules：创建项目时自动引入的一些依赖库，这里的文件都是自动生成无需我们手动修改

public：存放一些不需要被打包压缩的公共资源及用于展示页面内容的HTML页面

index.html 用于展示整个项目内容的html页面，该页面也是自动生成，一般不需要改动，项目中的入口组件（一般是src/index.js）在打包时会被自动引入到该页面中

favicon.ico 项目的图标文件

manifest.json 这个文件具体是干什么的也不太清楚，尝试改了里面的一些内容发现也没什么变化。官方给出的解释是：当你的web应用被安装到移动设备或桌面时，提供一些元数据。

src：这个目录自动生成且不能修改，一般我们在手动写的代码都是放在这个目录下的

index.js 这个文件也是必须存在的，这个是项目打包时的入口文件，后续所有的组件的引入都会直接或间接依赖这个文件

其它文件或目录结构在这里可以随便使用或更改

package.json：这个是整个项目的配置文件，我们安装的所有依赖库都会在这里体现，包括我们上面通过 npm start启动项目的配置也是在这里配置的

README.md 项目的说明文件

scripts 脚本文件目录，比如存放启动项目或打包项目的脚本文件

start.js 启动项目的脚本文件，比如我们运行 npm start时就会通过配置文件找到该目录下的该文件

build.js 打包项目的脚本文件，比如我们运行 npm run build打包时就会通过配置文件找到该目录下的该文件