当前位置: 移动技术网 > IT编程>开发语言>JavaScript > React入门教程之Hello World以及环境搭建详解

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

前言

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转码规则包。在安装完这几个依赖库之后,目录结构如下图所示: 

 

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

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

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

 

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

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

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

 

到目前为止,我们已经实现了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的项目,结构如下: 

 

这个项目包含一个app目录,里面又包含jsx目录和,然后在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就可以看到我们的内容了。

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

源码下载

github地址:

本地下载地址:

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

总结

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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网