Jos*_*eph 4 javascript reactjs babeljs
我已经完成了一些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,但我不确定有什么不同,哪个更好用,何时,如果其中一个/两个都需要任何额外的建设或如果他们在浏览器中使用.
谢谢!
Wit*_*ult 10
如果您只是学习反应,那么您使用脚本标记的方式是在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.Need 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
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')
);
routes.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.Running
形成项目根类型
webpack-dev-server --progress --colors
进口和要求
import并且require在功能上非常相似.唯一不同的是,import与es5一起require使用时,es6 可用新的语法糖.
| 归档时间： |
|
| 查看次数： |
9478 次 |
| 最近记录： |