资讯专栏INFORMATION COLUMN

配置React开发环境教程

explorer_ddf / 1402人阅读

摘要:这是一篇新手向文章,主要是记录一下使用过程,希望能给予别人一些帮助和提示用做包管理用做和语法编译器做模块管理和打包教程是基于的,得提前安装好。

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

用 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 换源和npm的源是一致的,都是共享.npmrc的配置信息,所以修改给 npm 换源就是等于给 Yarn 换源,如下

npm set registry https://registry.npm.taobao.org
npm set disturl https://npm.taobao.org/dist
npm cache clean

通过查看.npmrc文件检查是否更换源成功

vim ~/.npmrc
项目初始化

打开你的终端,新建文件夹然后进入该文件夹,用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-es2015babel-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内容为



  
    
    React App Setup
  
  
    

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,然后创建它的实例,然后配置templatefilenameinject,其中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 (
     

Hello World Again

); } }

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

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

ReactDOM.render(, document.getElementById("root"));

然后在终端输入yarn start

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

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

欢迎访问我的博客~ https://www.linpx.com/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81747.html

相关文章

  • react开发教程(二)安装

    摘要:使用快速构建开发环境第一步安装全局包是来自于,通过该命令我们无需配置就能快速构建开发环境。执行以下命令创建项目项目目录在浏览器中打开,即可显示上一篇开发教程初识下一篇开发教程三组件的构建 react安装 React可以直接下载使用,下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 15.4.2,你可以在官网 http://facebook.github.io/reac...

    Jonathan Shieber 评论0 收藏0
  • windows系统安装配置react-native运行环境

    摘要:把目录添加到环境变量中打开控制面板系统和安全系统高级系统设置高级环境变量,选中变量,然后点击编辑。 最近公司要开发react-native项目,自己在windows系统上练习了一下,过程中发现好多问题,在这里整理出来供大家参考; 一、首先来看一下reactNative官网 官网上的教程很详细,介绍了IOS和Android的环境搭建、示例教程等等,建议大家先按照官网的环境搭建教程尝试搭...

    SunZhaopeng 评论0 收藏0
  • windows系统安装配置react-native运行环境

    摘要:把目录添加到环境变量中打开控制面板系统和安全系统高级系统设置高级环境变量,选中变量,然后点击编辑。 最近公司要开发react-native项目,自己在windows系统上练习了一下,过程中发现好多问题,在这里整理出来供大家参考; 一、首先来看一下reactNative官网 官网上的教程很详细,介绍了IOS和Android的环境搭建、示例教程等等,建议大家先按照官网的环境搭建教程尝试搭...

    sixgo 评论0 收藏0
  • 前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教

    摘要:的另一个核心特性,苹果表示也正在开发中,按开发进度可能几个月后就能与我们见面。是基于的本地化数据库,支持以及浏览器环境。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。 本期是 2017 年的最后一...

    赵春朋 评论0 收藏0

发表评论

0条评论

explorer_ddf

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<