剧场模式
首页前端webpack 3 零基础入门视频教程

webpack 3 零基础入门视频教程 #8 - 用 webpack 和 babel 配置 react 开发环境

下载源码hfpp2012发布于Webpack1559 次点击播放时长:05:09
3

相信这个话题很多人都感兴趣,这里就用几个简单的命令就可以搭建出 react 的开发环境。

1. 安装 react

要使用 react,就必须装下面两个包的。

$ npm install --save react react-dom

2. 建立 babel

可能你不懂 babel 是什么,你可以把它理解为编译器,它能把 react 代码转成一般浏览器可读可执行的代码,通常可以用它来转化 reactvue 这样的前端代码,或者把 es6 代码转成普通的 javascript 代码等等。

如果还不理解的话,可以看我这篇文章 babel 入门指南

要让 babel 很好的转化 react 代码,首先要安装好 babel,再装 babel 转化 react 的包。

运行下面的命令。

$ npm install --save-dev babel-core babel-preset-react babel-preset-env

创建 .babelrc 文件。

{
  "presets": ["env", "react"]
}

为什么我知道要这么做呢?

因为我是分别结合 babelreact 的官网给的最新官方指南。

可以参考下面两个链接:

3. 在 webpack 使用 babel-loader

最后我们需要在 webpack 中使用一个 loader 来转化 react 的代码。

首先,安装。

$ npm install --save-dev babel-loader

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      },
      // 这两行是处理 react 相关的内容
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};

4. 写 react 组件

接着我们来准备一些 react 的代码,要来测试一下。

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/app.js

import css from './app.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';

ReactDOM.render(
  <Root></Root>,
  document.getElementById('root')
);

src/Root.js

import React from 'react';

export default class Root extends React.Component {
  render() {
    return (
      <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

效果如下:

参考链接:

先说这么多吧。

0 条回复
暂无回复~~
想拥有自己的网站,并成为一名自由的讲师?
支付宝付款
扫码打赏 16.8 元起加我微信拉入微信群

加我微信:15014006126

加 QQ 群:697272886

打赏的朋友或 Pro 学员获得特权

  • 加我微信拉你进微信群,享有更多互动和人脉资源;

  • 和程序员老兵我成为微信好友;

  • 不定期技术分享和视频问题解答

相似的视频
webpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境

webpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境

免费播放时长:06:33

1294 次点击

webpack 3 零基础入门视频教程 #3 - 实现 hello world

webpack 3 零基础入门视频教程 #3 - 实现 hello world

免费播放时长:07:37

2521 次点击

webpack 3 零基础入门视频教程 #2 - 安装

webpack 3 零基础入门视频教程 #2 - 安装

免费播放时长:03:38

2551 次点击

webpack 3 零基础入门视频教程 #1 - 介绍

webpack 3 零基础入门视频教程 #1 - 介绍

免费播放时长:03:52

4078 次点击

© Rails365 | 隐私条款 | 服务条款 | 加盟本站 | 粤ICP备15004902号 | 在线学员:24

Top