React技术栈——快速搭建篇

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

本文尝试对前端开发利器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程序,让其能够运行起来:

项目目录:


第一步:新建一个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项目便运行起来了。

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的四个理念:

  • entry——webpack会根据应用的依赖关系,创建一个关系表。该表的起始点便是所谓的entry point(入口点)。entry point会告诉webpack从哪入手,webpack会以该表的依赖关系作为打包依据。

  • output——用于配置打包后的文件放置路径。

  • loader——webpack把每个文件都看作组建(如.css, .html, .scss, .jpg, .png等),但是webpack只能识别JavaScript。这时候loaders便可以把这些文件转换成组建,进而被添加到依赖关系表。

  • 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技术栈做专门的讲解,不仅限于硬性技能。当然更多的是实践做法上的总结,因为如果要掌握它们的理论,细看官方文档和源码是最好不过的做法。

记住一句话:要了解任何事,我们必须知道它的效用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容