如果您只是在学习 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：
在浏览器中，您不能像编写 node.js 代码时通常那样使用modulerequire或importmodule。在Browserify/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浏览器捆绑和其他资产的module捆绑器。
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
索引.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并且require在功能上非常相似。唯一的区别是import新的语法糖可用于 es6 而require用于 es5。