快速搭建React的环境步骤详解


Posted in Javascript onNovember 06, 2017

前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道。

本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考。

有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么。

1、Nodejs & NPM

为什么要提nodejs呢?

与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态。nodejs平台上衍生出了强大的npm、grunt、express等,几乎重新定义了前端的工作流程和开发方式。

这里有必要来讲一讲NPM(node package manager)这个包管理器。

npm是javascript包管理器,我们可以在npm上找到、分享和使用来自无数开发者贡献的代码包,而无需自己造轮子。

使用npm,需要安装node。新的版本的nodejs已经集成了npm,安装好nodejs,通过以下命令查看所安装的版本:

$ npm -v

在项目目录内,当在命令行执行

$ npm install

它会识别一个叫package.json的文件,并尝试安装该文件内配置的依赖包。

2、React

React的组建化思想使得代码重用性高,易于测试、更容易分离关注点(separation of concerns)。

React还宣称Learn Once, Write Anywhere。既可运行在客户端浏览器,又能在服务端渲染,同时React Native还使得React开发原生app成为可能。

下面我们来写一个简单的React程序,让其能够运行起来:

项目目录:

快速搭建React的环境步骤详解

第一步:新建一个package.json文件,指定项目所需的依赖包。

{
 "name": "react-tutorials",
 "version": "1.0.0",
 "description": "",
 "author": "yunmo",
 "scripts": {
   "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
   "build": "webpack --progress --colors --minimize"
  },
 "dependencies": {
   "react": "^15.4.0",
   "react-dom": "^15.4.0"
 },
 "devDependencies": {
   "webpack": "^2.2.1",
   "webpack-dev-server": "^2.4.2"
 },
 "license": ""
}

这是npm包管理器的必要文件,定义了该项目的名称、版本、启动命令、生产环境依赖包(dependencies)和开发环境依赖包(devDependencies)。

第二步:新建一个index.html文件。

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>yunmo</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
 </head>
 <body>
 <div id="yunmo"></div>
 <script src="bundle.js"></script>
 </body>
</html>

第三步:写一段简单的React代码。

var React = require('react');
var ReactDOM = require('react-dom');

var element = React.createElement(
 'h1',
 {className: 'yunmo'},
 '云陌,欢迎来到react的世界!'
 );

ReactDOM.render (
 element,
 document.getElementById('yunmo')
);

第四步:运行。

那么如何在浏览器里运行呢?这里我们需要借助强大的webpack-dev-server来开启本地服务器。

我们可以看到上面的package.json里面有webpack和webpack-dev-server依赖包。下面会介绍webpack。

当然我们还可以通过nodejs来建立一个本地服务器,但这里其实webpack-dev-server是一个小型的nodejs Express服务器,它使用webpack-dev-middleware中间件来服务于webpack包。

webpack.config.js文件配置如下:

var webpack = require('webpack');

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: __dirname + '/build',
  filename: 'bundle.js'
 },
 module: {
  loaders: []
 }
}

这样我们在命令行通过npm install安装好依赖包以后,敲打命令

$ npm start

运行服务后,在浏览器中输入http://localhost:8080/

快速搭建React的环境步骤详解

React在浏览器运行结果

一个简单的React项目便运行起来了。

3、Webpack

webpack是一款现代JavaScript应用的模块加载兼打包工具,它不仅仅可以打包JavaScript,还可以打包styles,images等资源。

来看一个典型的webpack配置:

var webpack = require('webpack');
var path = require('path')

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: path.resolve(__dirname, '/build'),
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
   },
   {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
   },
   {
    test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
    loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin()
 ]
}

从上面webpack配置里面可以看出来有一些基本的配置点,也反映了webpack的四个理念:

  1. entry——webpack会根据应用的依赖关系,创建一个关系表。该表的起始点便是所谓的entry point(入口点)。entry point会告诉webpack从哪入手,webpack会以该表的依赖关系作为打包依据。
  2. output——用于配置打包后的文件放置路径。
  3. loader——webpack把每个文件都看作组建(如.css, .html, .scss, .jpg, .png等),但是webpack只能识别JavaScript。这时候loaders便可以把这些文件转换成组建,进而被添加到依赖关系表。
  4. plugins——因为loaders作用方式是以单一文件为基础的,所以plugins更广泛的用来对打包组建形成的集合(compilations)进行自定义操作。

这样,一个完整的模块打包体系就建立起来了。

4、ES6

ES6,即ECMAScript 6.0,是 JavaScript的下一代标准。ES6里面新增了很多语法特性,使得编写复杂的应用更加优雅自然。

ES6中引入了诸如let和const、箭头函数、解构赋值、字符串模版、Module、Class、Promise等特性,使得前后端编程语言在语法形式上的差异越来越小。

我们来看一下:

import React from 'react'  //模块引入

import '../styles/reactStack.scss'

class ReactStack extends React.Component { //class特性

 render() {
  const learner = {name: '云陌', age: 18} //const定义变量
  const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
  const extraSkills = ['Git', 'Postman']
  const skillSet = [...mainSkills, ...extraSkills]
  const { name } = learner  //解构赋值
  let greetings = null  //let定义变量
  if (name) {
   greetings = `${name},欢迎来到${mainSkills[0]}的世界!` //字符模版
  }
  //以下用了箭头函数
  return (
   <div className="skills">
    <div>{greetings}</div>
    <ol>
     {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
    </ol>
   </div>
  )
 }
}

export default ReactStack  //模块导出

当然,并非所有浏览器都能兼容ES6全部特性,但看到这么优雅的书写方式,只能看怎么行呢?因此,这里又引出了一个神器,Babel!

5、Babel

Babel是一款JavaScript编译器。

Babel可以将ES6语法的代码转码成ES5代码,从而在浏览器环境中实现兼容。

Babel内置了对JSX的支持,所以我们才能向上面那样直接return一个JSX形式的代码片段。

具体用法不在本文过多讲述。

6、Styles引入

在上面的代码中,有以下样式引入方式:

import '../styles/reactStack.scss'

样式文件如下:

body {
 background: #f1f1f1;
}

.skills {
 h3 {
  color: darkblue;
 }
 ol {
  margin-left: -20px;
  li {
   font-size: 20px;
   color: rgba(0, 0, 0, .7);
   &:first-child {
    color: #4b8bf5;
   }
  }
 }
}

样式文件要在项目中起作用,还需要在package.json里面添加相应的loader依赖,如css-loader, sass-loader, style-loader等,别忘了package.json里还需要node-sass依赖,然后安装即可。

webpack.config.js中相应配置如下:

module: {
 loaders: [
  {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader'
  },
  {
   test: /\.scss$/,
   loaders: ["style-loader", "css-loader", "sass-loader"]
  }
 ]
}

再将main.js中的内容作如下更改:

import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'

ReactDOM.render (
 <ReactStack />,
 document.getElementById('yunmo')
);

最后在浏览器中可以看到:

快速搭建React的环境步骤详解

结语

至此,一个简单的React项目便搭建起来了。

在后续的文章中,我将对本文涉及到的React技术栈做专门的讲解,不仅限于硬性技能。当然更多的是实践做法上的总结,因为如果要掌握它们的理论,细看官方文档和源码是最好不过的做法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 #Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
JS实现图片放大镜插件详解
Nov 06 #Javascript
js定时器实现倒计时效果
Nov 05 #Javascript
Vuejs实现购物车功能
Nov 05 #Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 #Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
You might like
PHP出错界面
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
matplotlib作图添加表格实例代码
2018/01/23 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
简历的自我评价范文
2014/02/04 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
办护照工作证明
2014/10/01 职场文书
先进教师个人总结
2015/02/11 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
Golang日志包的使用
2022/04/20 Golang