React入门教程之Hello World以及环境搭建详解


Posted in Javascript onJuly 11, 2017

前言

React 是一个用于构建用户界面的 JavaScript 库。react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践。

不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React。

入门教程及环境搭建

在官方文档中,有一种方式是基于npm的,我比较喜欢这种方式,这也是官方比较推荐的,下面我们就一步一步创建一个React的简单应用。

首先我们创建一个react-test目录,进入该目录后运行“npm install ?yes”生成一个默认的package.json文件,然后创建一个main.js文件,用于放置React的源代码,如下:

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
 <h1>Hello, world!</h1>,
 document.getElementById('example')
);

上面我们使用到了require语法加载react和react-dom库的代码中,另外代码中还有React的JSX语法,所以我们需要对这个文件做一些操作,把源代码转换成目前浏览器识别的目标代码。

转换操作涉及到了一个工具:Browserify,官方首页是这么介绍的:

Browserify lets you require(‘modules') in the browser by bundling up all of your dependencies.

言简意赅,Browserify就是负责把依赖到的库和当前文件打包到一起,比如上面我们依赖到了react和react-dom库,那么在经过Browserify处理之后,main.js和react以及react-dom会被打包到一个文件里面。要想打包,首先我们应该安装Browserify包,只需一个简单的命令即可:

npm install -g browserify

为了将main.js转换成可用的目标文件,我们需要使用下面的命令安装相关的依赖库:

npm install --save-dev react react-dom babelify babel-preset-react

其中babelify包是Browserify的babel转换器,而babel-preset-react是针对React的babel转码规则包。在安装完这几个依赖库之后,目录结构如下图所示: 

React入门教程之Hello World以及环境搭建详解 

我们就可以使用Browserify对main.js处理及打包了,在当前目录中执行下面的命令即可:

browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

执行完这条命令后,当前目录下会生成一个bundle.js,如图所示: 

React入门教程之Hello World以及环境搭建详解 

有了bundle.js文件,我们只需在应用中引入即可,现在我们在当前目录创建一个index.html,内容如下:

<html>
 <body>
  <div id="example"></div>
  <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>

在浏览器中直接打开这个文件即可看到我们的hello world程序了,可以从开发工具中看的到,React的确起作用了: 

React入门教程之Hello World以及环境搭建详解 

到目前为止,我们已经实现了React的hello world程序,不过使用browserify命令时后面跟那么多参数,十分的不便,我们考虑将其移至package.json中的scripts中:

"scripts": {
 "bundle": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js"
}

配置完成之后,我们就可以安装并使用本地的browserify来打包应用了,并且使用npm的命令来执行:

npm uninstall -g browserify
npm install browserify --save-dev
npm run bundle

以后再改动main.js时,只需执行npm run bundle即可完成转译和打包。

以上介绍了如何编译打包JSX代码,如果在项目实际应用时,上面的操作可能满足不了我们的需求,比如实时监测文件变化自动构建等功能。下面我会使用gulp来搭建一个简易的自动化构建系统,用于将React源代码转译打包和压缩。
首先,我们创建一个react-dev的项目,结构如下: 

React入门教程之Hello World以及环境搭建详解 

这个项目包含一个app目录,里面又包含jsx目录和index.html,然后在jsx目录里我们放置了React的源代码main.jsx文件。
大家也可以看到gulpfile.js和package.json,我们逐一介绍。

首先是package.json,里面列举了我们项目所需的依赖包:

"devDependencies": {
 "babel-preset-react": "^6.5.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-uglify": "^1.5.3",
 "react": "^0.14.8",
 "react-dom": "^0.14.8"
 }

这些依赖包负责转译、打包、压缩以及启动Web服务。首先我们需要使用npm install将这些依赖包安装在本地。

然后介绍gulpfile.js,我们在这个构建文件中定义了几个简单的任务:

var gulp = require('gulp');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

//this task is responsible for compiling, bundling, renaming, compressing, and generating the released JS file.
gulp.task('build', function() {
 return gulp.src('app/jsx/*')
   .pipe(babel({
    presets: ['react']
   }))
   .pipe(browserify())
   .pipe(rename('main.min.js'))
   .pipe(uglify())
   .pipe(gulp.dest('app/js'))
});

//this task will watch any change in app/jsx folder and then re-build it.
gulp.task('watch', function() {
 gulp.watch([
 'app/jsx/*'
 ], function() {
 //any changed detected, call build task
 gulp.run('build');
 });
});

//this task will run a server listening at port 8080
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8080,
 livereload: true
 });
});

build任务负责执行一次构建任务,watch任务负责监听jsx目录变化,如有改动则立即再次执行构建任务,server任务负责启动一个服务,在8080端口监听。

最后如果要运行里面的任务,我们需要先在全局安装命令行工具:

npm install --global gulp-cli

然后,在项目当前目录下,执行一个任务:

gulp watch

开启一个新的命令行,启动Web服务:

gulp server

之后在浏览器中输入localhost:8080就可以看到我们的index.html内容了。

上面的项目已放到Github上,感兴趣的同学可以去看一下,也可以克隆到本地亲自试一试。

源码下载

github地址:https://github.com/scottliu2011/react-dev

本地下载地址:http://xiazai.3water.com/201707/yuanma/react-dev(3water.com).rar

使用gulp构建前端工程大大简化了开发流程,大家也可以在这个简易项目基础上针对实际项目做一些扩展,当然如果学习React过程中有了新的构建需求,我也会及时更新到Github上的。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用js 设置url参数
Jul 08 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
javascript随机变色实例代码
Oct 15 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
underscore之function_动力节点Java学院整理
Jul 11 #Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 #Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 #Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 #Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 #Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 #Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
自己的js工具 Event封装
2009/08/21 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
解决vue 引入子组件报错的问题
2018/09/06 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
财务主管的岗位职责
2013/12/30 职场文书
打架检讨书100字
2014/01/19 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
初中家长寄语
2014/04/02 职场文书
医德医风个人总结
2015/02/28 职场文书
交通处罚决定书
2015/06/24 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书