React入门之Hello World
关注React也已经很久了,经常看到一些线上的例子,不过由于工作中一直都在使用AngularJS,所以没能系统的学习,最近准备好好研究一下,并且亲自动手做一些实践。 // 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,官方首页是这么介绍的: 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 -t [ babelify --presets [ react ] ] main.js -o bundle.js 执行完这条命令后,当前目录下会生成一个bundle.js,如图所示: <html>
<body>
<div id="example"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
在浏览器中直接打开这个文件即可看到我们的hello world程序了,可以从开发工具中看的到,React的确起作用了: "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时,只需执行 以上介绍了如何编译打包JSX代码,如果在项目实际应用时,上面的操作可能满足不了我们的需求,比如实时监测文件变化自动构建等功能。下面我会使用 "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服务。首先我们需要使用 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
});
});
npm install --global gulp-cli 然后,在项目当前目录下,执行一个任务: gulp watch 开启一个新的命令行,启动Web服务: gulp server 之后在浏览器中输入 https://github.com/scottliu2011/react-dev使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |