配置React开发环境教程

这是一篇新手向文章,主要是记录一下使用过程,希望能给予别人一些帮助和提示

用 Yarn 做包管理 用 Babel 做jsx和es6语法编译器 Webpack 做模块管理和打包

教程是基于macOS的,Nodejs得提前安装好。我的Nodejs和npm的版本如下

node -v
v6.9.2

npm -v
3.10.9

Yarn安装和配置

我们在 macOS 下可以通过brew去安装,如下

brew update
brew install yarn

Yarn 下载的包或者模块都是跟npm一个源的,因为某些原因,下载速度非常慢,难受,所以我们得换源,如下

yarn config set registry 'https://registry.npm.taobao.org'

通过查看是否换源成功 yarn config get registry

项目初始化

打开你的终端,新建文件夹然后进入该文件夹,用yarn init去做初始化,过程类似npm init,会有几个选项需要你填写,你可以根据你的需要去填写,这里我就直接一路回车就可以了。

mkdir react-demo
cd react-demo
yarn init

init完之后,就会提示success Saved package.json,说明初始化成功,我们可以查看一下package.json有什么东西

vim package.json

{
    "name": "react-demo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

webpack安装和配置

yarn add webpack webpack-dev-server path

安装完毕,你会发现当前目录多了个yarn.lock,这个文件是Yarn用来锁定当前的依赖,不用担心

现在,我们已经安装好webpack了,我们需要一个配置文件用来执行,如下

touch webpack.config.js

然后更新该文件内容为如下

const path = require('path');
module.exports = {
  entry: './client/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
}

从配置文件内容可以看出,为了让webpack运行,我们需要一个入口entry和一个输出output

为了能让JSX代码或者是ES6的代码也能正常在浏览器运行,我们需要loaders去装载babel-loader

更多的loaders我们可以查看webpack文档

Babel安装和配置

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

在webpack配置过程中,我们用到了babel-loader,除了这个外,我们同样需要babel的其他依赖

babel-preset-es2015 babel-preset-react这两个是 Babel 的插件,告诉Babel将es2015react的代码编译为Vanilla JS

安装完毕,我们还需要去配置Babel,新建一个文件为.babelrc

touch .babelrc

然后更新该文件内容为如下

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

webpack中的loader的 babel-loader 就是根据这个去执行

配置入口文件

现在我们的目录结构如下

|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

我们需要创建新的文件夹,同时在新文件夹内新建index.jsindex.html文件

mkdir client
cd client
touch index.js
touch index.html

然后我们更新一下index.js的内容为

console.log('Hello world!')

同样地,我们也要更新一下index.html内容为

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body>
</html>

index.html是我们react组件运行在浏览器上的载体,react组件编写是jsx,同时也用到了es6,由于大多数浏览器是不支持es6和jsx,所以我们必须通过Babel编译这些代码,然后绑定输出显示在index.html上。

index.html是我们react组件运行在浏览器上的载体,react组件编写是jsx,同时也用到了es6,由于大多数浏览器是不支持es6和jsx,所以我们必须通过Babel编译这些代码,然后绑定输出显示在index.html上。

同时我们还需要html-webpack-plugin包为我们生成html

`cd .. yarn add html-webpack-plugin ` 安装完成后,打开webpack.config.js然后添加下面配置信息

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {

    ...

    module: {
        loaders: [
            ...
        ]
    },

    plugins: [HtmlWebpackPluginConfig]
}

我们引入html-webpack-plugin,然后创建它的实例,然后配置template、filename和inject,其中inject: 'body'`是告诉插件添加JavaScript到页尾,在闭合body标签前

为了可以运行它,我们需要配置package.json,在"dependencies": {}代码块前插入如下代码

"scripts": {
    "start": "webpack-dev-server"
},

然后我们就可以运行了

yarn start

终端出现如下内容

Project is running at http://localhost:8080/

我们打开浏览器,输入http://localhost:8080/,在开发者工具的Console,发现有一段信息为Hello world!

react安装与配置

yarn add react react-dom

然后进入client目录,创建组件

cd client
mkdir components
cd components
touch App.jsx
cd ../..

现在我们项目目录结构如下

|-- node_modules
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

然后我们更新一下App.jsx文件的内容如下

import React from 'react';

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

我们还需要修改一下我们的入口文件index.js,替换内容为如下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

然后在终端输入yarn start

刷新http://localhost:8080/,就能看到Hello World Again

至此,通过 Yarn 包管理,配置webpack和Babel,去搭建编写react组件的开发环境的新手向教程就此完毕

Last modification:May 11th, 2018 at 03:45 pm

© The copyright belongs to the author

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

webpack入门

前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结...

21720
来自专栏草根专栏

使用VS Code开发asp.net core

下载地址: https://code.visualstudio.com/

2.4K120
来自专栏向治洪

在Mac上搭建React Native开发环境

概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。 配置mac开发环境 基本环境安装 1....

23280
来自专栏分布式系统和大数据处理

Webpack入门

Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

17220
来自专栏西枫里博客

宝塔面板下升级到PHP7.2,无法查看phpinfo的解决办法。

自从建站后没多久,就把PHP的版本升级到7了,后续有升级到7.2了,一直也没关注过phpinfo的信息,今天小伙伴在群里说我草,phpinfo都看不到,我大概想...

21420
来自专栏网络

那些年,我们用过的fiddler

在测试中,不管是做手工测试,还是接口测试,我们都需要查看后端返回的数据。有的时候,我们也需要调试,或者mock一下后端的返回,来验证前端是否达到预期。 为了捕获...

195100
来自专栏前端小叙

微信公众号复制的图片可以正常显示的办法

通过浏览多方文章,找到了一个 非常好用但是也有很大的坑的办法: 在页面中加meta: <meta name="referrer" content="never"...

2.4K90
来自专栏jojo的技术小屋

转 入门Webpack,看这篇就够了

2017年8月13日更新,本文依旧最新的webpack3.5.3将代码部分完全重写,所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。 ...

394100
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

Windows平台搭建React Native开发环境

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

30440
来自专栏马涛涛的专栏

webpack@3简单使用

这篇博客用的是webpack3的版本,作为入门理解学习 非原创,只为学习记录。博客大部分内容引用来源如下:

27260

扫码关注云+社区

领取腾讯云代金券