React介绍：

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。

React组件化：

React的组件化很神奇，可以把自己写的某一个功能封装成一个组件，需要它的时候在调用这个组件。

React组件化的特点：

组合：简单组件可组合为复杂组件

重用：组件独立，可被多个组件使用

测试：组件独立，便于测试

维护：UI和组件相关逻辑都封装在组件内部，便于维护

接下来我们进入正题，React的基础

在使用React之前，我们来了解一下React的结构

ReactDOM.render(element,document.getElementById('root'))

这是一个最简单的React语句，element就是页面上要显示的内容，记住在element里面一定要给父标签包围所有的语句。document.getElementById('root')就是我们要element放入到一个id为root的标签里面。

react语句一般是写在js里面的。所以需要ReactDOM.render来渲染到HTML页面上。

我们来列举几个例子：

HTML代码：<div id="root"></div>

js代码：

const element = (

<div>

<h1>这是一个React组件</h1>

</div>

)

ReactDOM.render(element,document.getElementById('root'));

结果：

注意：在react里面写样式，class改为className,style=""变为style={{样式名：‘样式值’，...}}

在写React之前记住要引入React

有两种引入的方式：

第一种在html 里面导入React

<body>

html代码

</body>

第二种创建React项目

在此之前要先安装Node.js

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

Node.js 让它默认安装在C盘，这样不会出现安装不成功的错误，一定要记住它安装在C盘的哪个位置

安装好Node我们开始创建React项目：

点击Next，Project name是我们项目的名字，可以自定义一个；Project location是我们创建这个项目的位置，Node interpreter就是我们之前安装好的Node.js的位置，找到我们安装的位置。

create-react-app就是我们我们电脑C盘的用户里面AppData\Roaming\npm\node_modules\create-react-app

点击Finish，等待一段时间，React项目就创建好了

查看一下项目创建成功后上图的文件有不有，没有可能没有创建成功。

项目创建好了，我们进行下一步，

项目的右上角，点击Debug Application,选择第一个Edit Configurations...,

点击上面的+号，找到npm

Name 为start；package.json就是我们刚创好的项目下面的package.json文件；找到我们文件下面的package.json 文件；Command选run；Scripts选start,Node interpreter就是我们安装好的node的位置；package manager 就是npm的位置，npm位置就是我们安装的node.js下面node_modules下面的npm;