快速搭建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的目的分析
Jan 05 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 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 批量删除数据的方法分析
2009/10/30 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
window下eclipse安装python插件教程
2017/04/24 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
机关出纳岗位职责
2014/04/03 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL