Introduction-to-React-JS -- 2 Helloworld

最新推荐文章于 2025-07-29 21:35:30 发布

whereismatrix

最新推荐文章于 2025-07-29 21:35:30 发布

阅读量919

点赞数

node-js 同时被 3 个专栏收录

5 篇文章

订阅专栏

webpack

5 篇文章

订阅专栏

react-js

4 篇文章

订阅专栏

本文指导您如何将ReactJS集成到项目中并通过简单的代码示例实现Helloworld功能，包括安装ReactJS、编写组件和使用Webpack进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置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;