React Native (一) --React 入门

时间：2022-01-22 08:22:41

开个贴，学习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-cli
npm 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入门(二) 评论模块续

标签：

相关文章