快速搭建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技术栈做专门的讲解，不仅限于硬性技能。当然更多的是实践做法上的总结，因为如果要掌握它们的理论，细看官方文档和源码是最好不过的做法。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
React Native搭建iOS开发环境
一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&
-
React入门教程之Hello World以及环境搭建详解
前言 React 是一个用于构建用户界面的 JavaScript 库.react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践. 不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React. 入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我
-
React Native 环境搭建的教程
一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-
-
详解基于webpack搭建react运行环境
最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack
-
React Native 搭建开发环境的方法步骤
本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y
-
快速搭建React的环境步骤详解
前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道. 本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考. 有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么. 1.Nodejs & NPM 为什么要提nodejs呢? 与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态.nodejs平台上衍生出了强大的npm.grunt.express等,几乎重新定义了前端的工作
-
Mac下快速搭建PHP开发环境步骤详解
最近做了一个后端的项目,是用PHP+MySQL+Nginx做的,所以把搭建环境的方法简单总结一下. 备注: 物料:Apache/Nginx+PHP+MySQL+MAMPMac OS 10.12.1 自带Apache,Nginx和PHP 1.运行Apache 查看Apache版本,在终端根目录输入如下命令: sudo apachectl -v 终端会输出Apache的版本及built时间 Server version: Apache/2.4.23 (Unix) Server built: Au
-
PyTorch快速搭建神经网络及其保存提取方法详解
有时候我们训练了一个模型, 希望保存它下次直接使用,不需要下次再花时间去训练 ,本节我们来讲解一下PyTorch快速搭建神经网络及其保存提取方法详解 一.PyTorch快速搭建神经网络方法 先看实验代码: import torch import torch.nn.functional as F # 方法1,通过定义一个Net类来建立神经网络 class Net(torch.nn.Module): def __init__(self, n_feature, n_hidden, n_output):
-
使用Webpack 搭建 Vue3 开发环境过程详解
从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '
-
Windows server 2008搭建php运行环境图文详解(php5.3)
下载php组件包 首先到http://windows.php.net/download/下载你需要的php版本,这里我下载的是php5.3. 下面解压php组件 包到磁盘上. 安装Microsoft Visual C++ 2008 SP1 可再发行组件包 x86 版 在地址http://www.microsoft.com/zh-cn/download/details.aspx?id=5582下载安装Microsoft Visual C++ 2008 SP1 可再发行组件包 x86版.注意,这里下
-
CentOS下搭建SVN服务器的步骤详解
本文实例讲述了CentOS下搭建SVN服务器的步骤.分享给大家供大家参考,具体如下: 1.安装svn yum install -y subversion 2.验证安装是否成功 svnserve --version 3.创建svn版本库 mkdir svn svnadmin create svn/repo 注:这里的repo是版本库名称 4.配置svn 创建版本库后,在这个版本库的conf目录下会生成3个配置文件: [root@singledb conf]# pwd /root/svn/repo/
-
vscode搭建go开发环境案例详解
目录 前言 一.安装goLang 二.配置环境变量 三.vscode安装插件 四.安装golang依赖 五.新建go文件 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 能用golang就用golang..这配置很麻烦 提示:以下是本篇文章正文内容,下面案例可供参考 一.安装goLang 安装地址 自行根据系统选择 二.配置环境变量 #在cmd中输入 go servion 环境变量配置完毕 三.vscode安装插件 四.安装golang依赖 cmd管理员权限下执行 go
-
利用go-zero在Go中快速实现JWT认证的步骤详解
关于JWT是什么,大家可以看看官网,一句话介绍下:是可以实现服务器无状态的鉴权认证方案,也是目前最流行的跨域认证解决方案. 要实现JWT认证,我们需要分成如下两个步骤 客户端获取JWT token. 服务器对客户端带来的JWT token认证. 1. 客户端获取JWT Token 我们定义一个协议供客户端调用获取JWT token,我们新建一个目录jwt然后在目录中执行 goctl api -o jwt.api,将生成的jwt.api改成如下: type JwtTokenRequest stru
-
goland 搭建 gin 框架的步骤详解
1. 安装go软件包 下载地址:https://studygolang.com/dl 下载后,双击安装即可. 2. 配置系统变量 这里需要配置2个系统变量,一个是GOROOT,一个是GOPATH 注意:GOROOT和GOPATH不能在同一路径下,且变量名必须是GOROOT和GOPATH. 3. 安装git 下载地址:https://git-scm.com/ 下载后,直接双击安装即可.. cmd窗口中,执行go get命令时,必须要有git环境的支持. 4. 设置go代理 在下载gin框架之前,我
-
Centos6.5搭建java开发环境配置详解
一.安装jdk 1.查看Linux自带的JDK是否已安装 java –version 如果出现openjdk,最好还是先卸载掉openjdk,在安装sun公司的jdk. 2.查看jdk信息 rpm -qa|grep java 3.卸载OpenJDK,执行以下操作: rpm -e --nodeps tzdata-java-2012c-1.el6.noarch rpm -e --nodeps java-1.7.0-openjdk-1.7.0.45-1.45.1.11.1.el6.x86_64 4.新