您的位置：首页 > Web前端 > React

Introduction-to-React-JS -- 2 Helloworld

2015-11-07 21:38 423 查看

配置ReactJS到Helloworld

React 它本身并不能完成所有的事情，它只能解决一些视图上的问题，你仍然需要一些东西去帮助它完成事情。

安装 React JS

执行命令

npm install react --save

没啥好讲的，接下来就可以在你的代码中使用 React JS 了。

在代码中使用 ReactJS

component.jsx

import React from 'react';

export default class Hello extends React.Component {
render() {
return <h1>Hello world</h1>;
}
}

main.js

import React from 'react';
import Hello from './component';

main();

function main() {
React.render(<Hello />, document.getElementById('app'));
}

在页面index.html中，使用了webpack。

build/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="app"></div>

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>

转换 JSX

为了能够使用 JSX 语法，你需要用 Webpack 来转码你的 JavaScript，这是加载器的工作，我们可以使用一个很好用也有很多功能的 Babel。

npm install babel-loader --save-dev

现在我们需要去配置 Webpack 来使用加载器。

webpack.config.js

var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
}]
}
};

module.exports = config;

Webpack 会在你的项目中测试所有路径，如果我们项目中使用 ES6 模块加载器语法，比如

import MyComponent from './Component.jsx';

这是会去匹配 ‘./Component.jsx’。

在命令行中运行

npm run dev

，然后刷新页面就可以看到修改。

优化bundle处理

你可能注意到在引入 React JS 到你的项目之后，给你的应用重新合并会花费太多的时间。在开发环境中，最理想的是编译最多 200 到 800 毫秒的速度，取决于你在开发的应用。

在开发环境中使用压缩文件

为了不让 Webpack 去遍历 React JS 及其依赖，你可以在开发中重写它的行为。

webpack.config.js

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

config = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
resolve: {
alias: {
'react': pathToReact
}
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel'
}],
noParse: [pathToReact]
}
};

module.exports = config;

我们在配置中做了两件事：

不管 “React” 是什么时候在代码中引入的，它会去匹配压缩后的 React JS 文件取代去 node_modules 中遍历，这是第3行配置的路径以及config内的配置。

不管 Webpack 什么时候试图是解析minified文件，我们阻止它，告诉它那不是必须的。

可以到优化开发看到更多这方面的信息。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航