Introduction-to-React-JS -- 2 Helloworld

来源：互联网发布：stm32设备id数据手册编辑：程序博客网时间：2024/05/13 06:38

配置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文件，我们阻止它，告诉它那不是必须的。

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

0 0