React Native (一) --React 入门

来源：互联网发布：js设置ireadonly input 编辑：程序博客网时间：2024/06/10 05:40

开个贴，学习React Native

现在有各种各样的web-native解决方案，是时候找到一个合适的,facebook发布的React Native ，现在好像被挺多团队推崇的，包括天猫，百度等(小道传闻~),so，学习吧，既然眼观没有其他人独到，不如站在巨人肩膀上~

React 入门

首先我们要熟悉使用React，我理解为像是jQuery那样的JavaScript框架，说道JavaScript，许多人都把他跟jave相联系。。也是醉了~

在教程上我选择阮一峰的 React 入门实例教程，React 起始于facebook团队，据说他们不满足于现在流传的JavaScript框架，所以自己研发了React 这套框架，想想真是6啊~React在13年5月开源，代码逻辑简单，运行也流畅，性能出众，所以备受推崇。

未解决：将JSX 代码转换为 JavaScript，该放到后台，可是命令行没有操作成功，没有安装成功 babel

安装

React可以去官网下载安装，也可以git clone下来，

$ git clone git@github.com:ruanyf/react-demos.git

这里面有很多react的demo，里面已经自带了react 的源码。我的git key 好像出错了，所以一直不成，所以我用的https协议的 https://github.com/ruanyf/react-demos，使用sourcetree clone 的。

使用react 的html 源码：

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      // ** Our code goes here! **    </script>  </body></html>

首先必须加载react.js react-dom.js browser.min.js 这三个js文件，其中，react.js 为react 的核心库，react-dom.js提供了与dom相关的东西，browser.min.js 将react使用的JSX语法转换为javascript语法，说到这，请注意上面<script type="text/bablel"> 这句话，通常我们html里引用JavaScript语句，都是用<script type="text/javascript">,这个区别是因为react是使用JSX语法的~跟JavaScript并不兼容，所以需要注意。当将JSX语法转换为JavaScript语法时，特别消耗资源，所以一般放在服务器使用，因为还没有开始服务器学习，暂时把他放在本地。。

如何引用外部的js文件：<script type = "text/babel" src="js file path">

至此，我们就可以使用React来写一个hello world 了~

ReactDOM.render()

React.DOM.render() 是React中最基本的用法，用来将模板转换为HTML语言，并插入相应的DOM节点

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

上面的代码将<h1>Hello, world!</h1> 这个节点，插入到了example节点中。需要强调，React识别大小写，本人写成ReactDom，结果出错

JSX语法

JSX 语法与 JavaScript 语法不同，比如HTML的代码可以直接写入，而不用加单引号，他支持HTML与JavaScript的混写。

    var names = ['Alice', 'Emily', 'Kate'];    ReactDOM.render(      <div>      {        names.map(function (name) {          return <div>Hello, {name}!</div>        })      }      </div>,      document.getElementById('example')    );

JSX 当遇到 < 号时，认定接下来为HTML语言，遇到 { 号时，认定为JavaScript语言。JSX 允许直接在模板中插入JavaScript变量，假如变量是一个数组，则会将其在HTML中展开：

    var arr = [      <h1>Hello world!</h1>,      <h2>React is awesome</h2>,    ];    ReactDOM.render(      <div>{arr}</div>,      document.getElementById('example')    );

离线翻译

将JSX文件翻译成JavaScript：

首先需要安装Babel

npm install --global babel-clinpm install babel-preset-react

然后使用Babel转换文件

babel --presets react src --watch --out-dir build

组件

React可以将代码封装成组件，以后的时候可以直接使用，使用React.createClass() 生成一个组件

var CommentBox = React.createClass({    displayName:'CommentBox',    render: function () {        return (            React.createElement('div',{className:"commentBox"},"hello,I am a Comment Box")        )    }});

需要注意，每个class里面都需要有一个render方法，可以理解为填充这个class，即组件，上面的代码填充了一个div

React.createElement() 这个函数有三个参数，分别为节点类型，即html类型，config，即参数，子节点，即节点里面的东东

下面我们就可以使用这个组件了:

ReactDOM.render(<CommentBox/>,document.getElementById('example'));

这样就将CommentBox放进了example节点中,同样，我们可以在创建组件时向里面传值，可以理解为对象的属性

var HelloMessage = React.createClass({    render: function() {        if(this.props.isConsole == "true"){            console.log(this.props.isConsole);            return <h1>Hello {this.props.name + "sd"}</h1>;        }        else        {            return (<h1>teet</h1>)        }    }});ReactDOM.render(    <HelloMessage name="John" isConsole = "true" />,    document.getElementById('example1'));

js 在比较的时候有三个规则

假如有bool的话，会将bool转换为number，即0和1

假如有string 和 number ，会将string 转换为number

将string 直接转换为 bool时，空字符串为false，其他都为true

可以看到上面根据isConsole这个属性，分别return了标签,还有，定义组件的时候，要保证第一个字母是大写，否则会报错。

一个简单的评论功能

我们做一个简单的React评论功能，能列表展示评论，有个表单填写评论并发表，当然，数据应该在后台，不过我们先在前端写死。

首先我们创建一个comment class：

var Comment = React.createClass({    author:"author",    render: function () {        return (            <div className="comment">                <h2 className = "commentAuthor">                {this.props.author}                </h2>               {this.props.children}            </div>        );    }});

可以看到，这个组件相当于list列表中的每一条item，含有标题，评论内容

然后我们创建一个comment list，即评论列表：

var CommentList = React.createClass({    render: function () {        return(            <div className="commentList">                <Comment author = "Tom">this is one comment</Comment>                <Comment author = "John">this is *anther* comment</Comment>            </div>        )        ;    }});

可以看到，我们暂时写死了两条评论，author分别为Tom和John，并且给他们的children也赋了值

创建一个表单：

var CommentForm = React.createClass({    render: function () {        return (            <div className="commentForm">                Hello,world,I am a Comment Form.            </div>        );    }});

创建一个整体的面板装载评论列表和表单：

var CommentBox = React.createClass({    render: function () {        return (            <div className="commentBox">            <h1>Comments</h1>                <CommentList/>                <CommentForm/>            </div>        );    }});

在浏览器里，我们可以看到已经出现了两条数据。

接入Markdown格式，Markdown是一款轻量级编辑插件，可以让写作更加注重内容而不是格式，我们引入它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

然后我们将评论组件里的评论内容，用Markdown转换一下:

var Comment = React.createClass({    author:"author",    render: function () {        return (            <div className="comment">                <h2 className = "commentAuthor">                {this.props.author}                </h2>            {marked(this.props.children.toString())}            </div>        );    }});

但是，我们的评论内容在浏览器里变成了这种：

<p>this is one comment</p>

<p>this is <em>anther</em> comment</p>

。。。显然我们的评论被渲染成了字符串，但是我们想把他们变成html啊亲，这是因为React为了保护不受XSS攻击，有一个办法可以解决，但是框架会警告你别使用这种方法：

var Comment = React.createClass({    rawMarkup: function () {        var rawMarkup = marked(this.props.children.toString(),{sanitize:true});        return {__html:rawMarkup};    },    render: function () {        return (            <div className="comment">                <h2 className = "commentAuthor">                {this.props.author}                </h2>                <span dangerouslySetInnerHTML={this.rawMarkup()}/>            </div>        );    }});

我们使用了一个API，marked(str,config)，传入sanitize:true，告诉了marked转义掉评论中的HTML标签，而不是原封不动的返回这些标签。

下面我们在列表中动态的展示评论，创建一个评论数组：

var data = [    {author:"Tom",text:"This is Tom's comment"},    {author:"John",text:"This is John's comment"}];

我们修改ReactDOM.render，将数组传给CommentBox

ReactDOM.render(    <CommentBox data = {data}/>,    document.getElementById('example'));

再修改CommentBox，将数组传给CommentList

var CommentBox = React.createClass({    render: function () {        return (            <div className="commentBox">            <h1>Comments</h1>                <CommentList data = {this.props.data}/>                <CommentForm/>            </div>        );    }});

最后修改CommentList，直接放进一个数组

<span style="font-size:12px;">var CommentList = React.createClass({    render: function () {        var commentNodes = this.props.data.map(function (comment) {            return (                <Comment author = {comment.author}>{comment.text}</Comment>            );        });        return(            <div className = "commentList">                {commentNodes}            </div>        )        ;    }});</span>
可以看到，在CommentList这个组件中的render方法中，我们使用了Array.prototype.map = function(callback,thisArg){};这个方法，创建了一个装载
Comment组件的数组，这个方法好像是ES5中新增的，在遍历数组的同时可以使用callback方法对数组中的元素进行处理，还可以将处理后的数据再次装载到一个数组中：
var data1 = [    {author:"1"},    {author:"2"},    {author:"3"},    {author:"4"}];var s = data1.map(function (comment) {    comment.author = comment.author + "后缀";    //console.log(comment);    return comment.author;});console.log("s:" + s);

可以看到，我们调用data1.map,当callback方法中有return的时候，就将这些return的放入到了s数组中，打印出来的结果是
s:1后缀,2后缀,3后缀,4后缀

看了下，这章的篇幅已经挺长了，所以从服务器获取数据我们放在下一章 React入门(二) 评论模块续

0 0