如果您刚刚学习 React，那么您使用 script 标签的方式就可以在 html 中进行。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
如果您想开发一个可以部署到生产环境的应用程序，您需要遵循以下步骤。毫无疑问，互联网上有更好的教程，但它会给您一些想法。
1.需要Browserfiy或Webpack：
在浏览器中你不能require or import模块就像您在编写 Node.js 代码时通常所做的那样。在...的帮助下浏览器化/Webpack你可以编写使用的代码require/import与在节点环境中使用它的方式相同。我假设你会使用webpack考虑到它的受欢迎程度。
2.安装依赖(es6)
这些是您的项目中需要的最小依赖项（package.json）让它工作
"devDependencies": {
"babel-cli": "^6.3.17",
"babel-core": "^6.3.21",
"babel-eslint": "^5.0.0-beta6",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-3": "^6.3.13",
"css-loader": "^0.23.0",
"eslint": "^1.10.3",
"eslint-loader": "^1.1.1",
"eslint-plugin-react": "^3.12.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"react": "^15.0.0-rc.1",
"react-dom": "^15.0.0-rc.1"
3.编写你的 webpack-config.js 文件
一个样品webpack配置文件应该是这样的。不要问我每一点，而要看看webpack教程，因为我无法在这里解释所有内容。只要记住这样一个事实：Webpack是一个模块捆绑器，用于捆绑javascript以及浏览器的其他资产。
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: {
main: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
]
},
output: {
path: path.join(__dirname, 'public'),
publicPath: 'http://localhost:8080/public/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test : /\.jsx?$/,
include : path.join(__dirname, 'src'),
loader : 'react-hot!babel'
},
{
test : /\.scss$/,
include : path.join(__dirname, 'sass'),
loaders : ["style", "css?sourceMap", "sass?sourceMap"]
},
{
test : /\.(png|jpg|svg)$/,
include : path.join(__dirname, 'img'),
loader : 'url-loader?limit=30000&name=images/[name].[ext]'
} // inline base64 URLs for <=30k images, direct URLs for the rest
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
4.为您的应用程序设置入口点和路线
src->index.js
src->routes.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,browserHistory} from 'react-router';
import routes from './routes';
ReactDOM.render(
<Router routes={routes} history={browserHistory}/>
, document.querySelector('.init')
);
路线.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';
import Home from './components/home';
module.exports = (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
</Route>
)
5.在项目根目录中设置index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Welcome to ReactJs</title>
</head>
<body>
<div class="init"></div>
</body>
<script src="./public/bundle.js"></script>
</html>
6.跑步
形成您的项目根类型
webpack-dev-server --progress --colors
导入并要求
import and require在功能上非常相似。唯一的区别是importes6 中有新的语法糖吗？require与 es5 一起使用。
