ReactJS教程：功能、优劣势、安装配置方法
ReactJS是用于构建可重用UI组件的JavaScript库。 根据React官方文档，以下是定义 -
React是一个用于构建可组合的用户界面的库。 它鼓励创建可重用的UI组件，这些组件呈现随时间而变化的数据。 许多人在MVC中使用React作为V的部分。 将DOM中的DOM抽象化，提供更简单的编程模型和更好的性能。 React也可以使用Node在服务器上呈现，并且可以使用React Native为本机应用程序供有力支持。 React实现单向无效数据流，相比传统的数据绑定，减少了反复套用，更容易推理。
React功能
- JSX - JSX是JavaScript语法扩展。在React开发中没有必要使用JSX，但推荐使用。
- 组件 - React是关于组件的。需要把所有东西都看作一个组件。这将帮助您在更大规模的项目上工作时维护代码。
- 单向数据流和Flux - React实现单向数据流，这使得您可以轻松推理您的应用程序。 Flux是一种有助于保持数据单向性的模式。
- 许可 - React根据Facebook Inc.许可。文档根据CC BY 4.0许可。
React优势
- 使用作为JavaScript对象的虚拟DOM。这将改善应用程序的性能，因为JavaScript虚拟DOM比常规DOM更快。
- 可以在客户端和服务器端以及其他框架中使用。
- 组件和数据模式提高了可读性，这有助于维护更大的应用程序。
React劣势
- 仅涵盖应用程序的视图层，因此仍然需要选择其他技术来获取完整的开发工具集。
- 使用内联模板和JSX，这对某些开发人员来说可能看起来很尴尬。
React安装配置
安装ReactJS有好几种方法，这里重点介绍第1种方法，其它方法要选介绍演示。
注意：在编写本教程时，使用nodejs版本为：
v9.3.0，npm的版本为：5.6.0
安装方式一(推荐)
第1步 - 创建根文件夹
根文件夹将被命名为reactApp，我们将把它放在目录：F:\worksp\reactjs。 创建文件夹后，打开它，并通过命令提示符运行npm init来创建空的package.json文件，并按照命令说明进行操作。
F:\worksp\reactjs> mkdir reactApp
F:\worksp\reactjs\reactApp> npm init
第2步 - 安装全局包
我们将需要为这个设置安装几个软件包。这里将需要一些babel插件，所以首先通过在命令提示符窗口中运行以下代码来安装babel。
F:\worksp\reactjs\reactApp> npm install -g babel
F:\worksp\reactjs\reactApp> npm install -g babel-cli
第3步 - 添加依赖和插件
我们将在接下来的教程中使用webpack捆绑器。所以需要安装webpack和webpack-dev-server。
F:\worksp\reactjs\reactApp> npm install webpack --save
F:\worksp\reactjs\reactApp> npm install webpack-dev-server --save
既然要使用React，那么需要先安装它。 --save命令将把这些包添加到package.json文件中。
F:\worksp\reactjs\reactApp> npm install react --save
F:\worksp\reactjs\reactApp> npm install react-dom --save
如前所述，我们需要一些babel插件，所以也安装它。
F:\worksp\reactjs\reactApp> npm install babel-core
F:\worksp\reactjs\reactApp> npm install babel-loader
F:\worksp\reactjs\reactApp> npm install babel-preset-react
F:\worksp\reactjs\reactApp> npm install babel-preset-es2015
第4步 - 创建文件
下面来创建一些需要的文件。 它可以手动添加或使用命令提示符创建以下文件 -
- index.html
- App.jsx
- main.js
- webpack.config.js
先保持上面几个文件的内容为空。
第5步 - 设置编译器，服务器和加载器
打开webpack.config.js文件并添加下面的代码。将webpack入口点设置为main.js。 输出路径是提供捆绑应用程序的地方。还将为开发服务器设置为8080端口。可以选择你想要的任何端口。
最后，设置babel加载器来搜索js文件，并使用es2015并对之前安装的预设做出反应。
文件：webpack.config.js -
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
打开package.json 并删除在“scripts”对象内的语句："test" "echo \"Error: no test specified\" && exit 1"。因为在本教程中不会进行任何测试。接下来添加启动命令。
"start": "webpack-dev-server --hot"
在上述步骤之前，将需要webpack-dev-server。 要安装webpack-dev-server，请使用以下命令。
F:\worksp\reactjs\reactApp> npm install webpack-dev-server -g
现在，可以使用npm start命令启动服务器。 --hot命令将在文件内部更改内容后添加实时重载，所以不需要每次更改的代码就可以刷新浏览器。
第6步 - index.html
这只是普通的HTML代码文件。可将div id = "app"设置为应用程序的根元素，并添加index.js脚本，这是捆绑应用程序文件。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
第7步 - App.jsx和main.js
这是第一个React组件。我们将在后面的章节中深入讲解React组件。 这个组件将显示输出："Hello World !!!"
文件：App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
我们需要导入这个组件，并将其呈现给的根App元素，所以可在浏览器中看到它。
文件：main.js -
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
注 - 无论何时您想使用某些东西，都需要先导入它。如果您希望使组件在应用程序的其他部分可用，则需要在创建后导出它，并将其导入到要使用它的文件中。
完整的目录结构如下所示 -
第8步 - 运行服务器
设置完成，我们可以通过运行以下命令启动服务器。
F:\worksp\reactjs\reactApp> npm start
执行输出如下 -
在我们的例子中，它打开访问的URL是：http://localhost:8080/ ，打开之后，应该会看到下面的输出。
方法二(最小的HTML模板)
如果您喜欢使用自己的文本编辑器，也可以下载这个HTML文件(http://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html )，编辑它，并从浏览器的本地文件系统中打开它。但它的运行时代码转换很慢，所以不要在生产中使用它。
