你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
icepy

React&React Native初次体验 0个回复 专栏 @ 无线

icepy 发布于 3 年前

可关注每周更新的issues,以iOS与前端开发为主,地址https://github.com/icepy/posts/issues

时间2015年11月24日

  • react 版本信息 0.14.3
  • react-dom 版本信息 0.14.3
  • react-router 版本信息 1.0.0
  • react native 版本信息 0.1.7

Demo下载地址:

如果你下载的Demo无法运行,很可能是因为版本不对,也有可能是sh路径的问题,请核对。


React

在开发之前,做一些必要的准备

调试工具:React Developer Tools

编程工具(Sublime Text插件):

语法检查:

编译工具:

npm install --global gulp

安装过python的用户可以在React Web Demo目录下运行,访问http://127.0.0.1:4000

python -m SimpleHTTPServer 4000

默认使用ES2015来编程,所以需要安装语言转换工具:babel

npm install -g babel-cli

目前为止,想要将项目运行起来,还远远不够。

配置环境

官方出品的入门指南,其实你可以先往下阅读。

第一步

我使用mkdirtouch来快速创建目录与文件

mkdir react-web

cd react-web

mkdir js
mkdir css
mkdir src
touch index.html
touch gulpfile.js
touch .babelrc
touch js/main.js

npm init

第二步

先安装reactreact-domreact-router

npm install react react-dom history react-router@latest --save-dev

第三步

安装编译环境:

npm install gulp vinyl-source-stream browserify browserify-shim babelify babel-preset-es2015 babel-preset-react babel-eslint eslint eslint-plugin-react gulp-eslint webpack babel-loader babel-core --save-dev

注意事项:

gulpfile.js编写如下:

var gulp = require('gulp');

/**
 * gulp build browserify and babel 
 */


var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task('js:browserify',function(){
    browserify('./src/main.js')
    .transform(babelify,{
        presets: ['es2015', 'react']
    })
    .bundle()
    .on("error",function(err){ 
        console.log("Error: " + err.message); 
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./js'));
});

// gulp.task('default',['js:browserify']);

/**
 * gulp build webpack and babel
 */

var gutil = require('gulp-util'); 
var webpack = require('webpack');

gulp.task('js:webpack',function(callback){
    webpack({
        // configuration
        entry:[
            './src/main.js'
        ],
        output:{
            path:'./js/',
            publicPath:'./',
            filename:'bundle.js'
        },
        module:{
            loaders:[
                {
                    test:/\.js$/,
                    exclude:'./node_modules/',
                    loader:'babel',
                    query:{
                        presets:['react','es2015']
                    }
                }
            ]
        }
    }, function(err, stats) {
        if(err) throw new gutil.PluginError("webpack", err);
        gutil.log("[webpack]", stats.toString({
            // output options
        }));
        callback();
    });
});

gulp.task('default',['js:webpack']);


/**
 *  JSX语法检查
 */

var eslint = require('gulp-eslint');

gulp.task('jsx',function(){
    return gulp.src('./src/*.js')
        .pipe(eslint({
            plugins: [
                'react'
            ],
            parser: 'babel-eslint',
            ecmaFeatures: {
                'jsx': true
            },
            rules:{
                'semi':2
            },
            env:{
                'es6':true
            }
        }))
        .pipe(eslint.format())
});

现在可以运行gulp来编译使用es2015编写的react源代码了。

编程阶段

关于react的理论知识就不过多的附述,大家可以访问Front-End-Develop-Guide阅读已经收集的资源,也可以去google上搜索一些资源。

这里主要还是想说一说自己上手的体验

  • 将项目运行起来对新人的使用不是很友好(但是,这也是没有办法解决的问题。react.js只是一个很单纯的View,要构建起一个项目,还需要其他配套的东西,比如模块化构建,路由系统,语法编译转换,UI集成,请求,缓存等等。)
  • 2015年11月24日在网络上搜索react.js配套的一些项目很多都不能使用了,不知道是发展的太快还是变化太快
  • 使用es2015来编写,源代码更清晰易用
  • 组件让界面分割的更有逻辑性

比如在构建一个About页面,我们可以将整个页面分割成几个小组件

const About = React.createClass({
render:function(){
return (
<div className="am-container">
<AboutMe/>
</div>
)
}
});

const AboutMe = React.createClass({
render:function(){
return (
<h1>
icepy
</h1>
)
}
})
  • 可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;
  • 可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;
  • 可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

通过将AboutMe引入到About中来组装,这样每一个组件,我们都能达到复用的目的。

  • 首次加载有点慢,不过我想到时可以首屏构建时少构建些组件。
  • JSX语法首次接触感觉有些不习惯
  • 每一个组件都有生命周期,这个特性相当不错,以前用backbone写混合开发,还需要自己去实现一套生命周期,如果换成react,生命周期就是最外层View组件的生命周期。
  • 为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"
  • 变量名用{}包裹,且不能加双引号

React Native

在开发之前,做一些必要的准备

  • 安装Xcode 7.1.1,如果你不提交到App Store现在真机测试可以不用开发证书了
  • homebrew安装一下
  • Node.js最低要求4.0+
  • 用homebrew安装watchman:brew install watchman
  • flow(可选)

安装环境

npm install -g react-native-cli

安装完成之后可以使用react-native init命令来创建一个项目

我第一次创建时出现了权限的问题(其实真不必纠结这个,删除rm -rf,重新创建)

You don’t have permission to save the file “project.xcworkspace” in the folder “reactApp.xcodeproj”.

To view or change permissions, select the item in the Finder and choose File > Get Info.

然后用Xcode打开这个项目,第一次运行的时候会出现一个终端(可忽略),如果出现如下:

react-native bundle --entry-file index.ios.js --platform ios --dev true --bundle-output /Users/xiangwenwen/Library/Developer/Xcode/DerivedData/reactApp-fgenzhrwjwhkacfurzkpcjuxwbsp/Build/Products/Debug-iphonesimulator/reactApp.app/main.jsbundle --assets-dest /Users/xiangwenwen/Library/Developer/Xcode/DerivedData/reactApp-fgenzhrwjwhkacfurzkpcjuxwbsp/Build/Products/Debug-iphonesimulator/reactApp.app ../node_modules/react-native/packager/react-native-xcode.sh: line 45: react-native: command not found
Command /bin/sh failed with exit code 127

如果你的Node.js是用nvm安装的,100%能出现路径的问题,可以先在~/.bash_profile中添加如下:

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
nvm use 4.1

然后在修改一下react-native-xcode.sh文件,它在(假设这是你目录)./node_modules/react-native/packager/react-native-xcode.sh

source ~/.bash_profile添加到47行之前的任意位置就可以了。

编程方式

编程方式上来说,如果做过web版的react.js开发,相对来说就不是那么陌生了,导入react-native:

var React = require('react-native');

唯一多了些区别

  • css需要使用JS来编程
  • 内置了很多组件,需要学习使用的方式
  • 编程风格和思路上与web版的react.js大同小异
  • 多了一些做App开发时的一些概念

不过,如果有一套代码运行多端的需求,目前来看,不是那么容易实现(不知道有人在做这方面的尝试么),第一眼看上次,我就在想,是不是在web端,实现一下比如View,Text组件,放弃使用div来布局,然后用StyleSheet来写css呢?

如果你能把项目跑起来,你就完成了一大半了。

等待第一条回复
登录后回复,如无账号,请使用邀请码注册