快速搭建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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 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 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php实例分享之二维数组排序
2014/05/15 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python常用运维脚本实例小结
2020/02/14 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
留学自荐信
2013/10/10 职场文书
初中校园之声广播稿
2014/01/15 职场文书
好家长事迹材料
2014/01/23 职场文书
《尊严》教学反思
2014/02/11 职场文书
班组长岗位职责
2014/03/03 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
小学运动会通讯稿
2015/07/18 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android