ReactJS开发环境设置
在本章中，我们将演示如何为React开发建立一个环境。 请注意，涉及的步骤很多，但这此步骤将有助于以后加快开发流程。 我们将需要NodeJS，所以如果您没有安装，请查看下面教程文章的链接 - http://www.zyiz.net/nodejs/node_install.html
安装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 )，编辑它，并从浏览器的本地文件系统中打开它。但它的运行时代码转换很慢，所以不要在生产中使用它。
上一篇：ReactJS简介
下一篇：ReactJS JSX
扫描二维码
程序员编程王
