我已经完成了一些 React 教程的介绍，并且正在尝试将我目前的一些知识付诸实践。我已经在 <script type='text/babel'> 中成功创建了一些组件并使用 babel 的 browser.js在浏览器中将其转换为 JS 客户端。
但是，我现在正在尝试将我的组件分解成单独的文件，转译它们，然后将转译后的 JS 提供给客户端，而不是在客户端完成转译。
我对如何将 ReactJS 正确导入我的组件 JSX 文件感到困惑。我之前没有构建过大型的JS应用，所以我不熟悉将库导入其他模块的方法。
这是我的组件 JSX 文件之一:
var SidebarFilter = React.createClass({
render: function() {
return (
<div className="btn-group">
Some markup removed for brevity.
</div>
);
}
});
在我的主 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>
在我的任何 <script> 之前我的组件的标签，一切正常。但是如果组件放在react/reactdom脚本标签上面，就不行了。
我见过 javascript 有一个 import还有require ，但我不确定有什么区别，什么时候使用哪个更好，以及两者是否需要任何额外的构建，或者它们是否在浏览器中正确使用。
谢谢!
最佳答案
如果您只是学习 React，那么您可以在 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 代码时那样require 或import 模块。在 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 和其他资源。
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 使用的。
关于javascript - 如何正确地将 React 组件存储在单独的文件中并导入 React？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36073576/