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工具 Cookie 封装
Aug 21 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
理解JS绑定事件
Jan 19 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
dedecms模版制作使用方法
2007/04/03 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
python模块之StringIO使用示例
2015/04/08 Python
Python 专题四 文件基础知识
2017/03/20 Python
python 处理string到hex脚本的方法
2018/10/26 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
西式婚礼主持词
2014/03/13 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
运动会广播稿100字
2015/08/19 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python