React快速入门教程

最新推荐文章于 2022-05-17 21:54:38 发布

mqy1023

最新推荐文章于 2022-05-17 21:54:38 发布

阅读量958

点赞数

分类专栏： react&react native 文章标签： react

本文链接：https://blog.csdn.net/mqy1023/article/details/51582367

版权

react&react native 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

《一》、快速入门

一、必备资源下载：http://facebook.github.io/react/docs/getting-started.html
- react.js是 React 的核心库
- react-dom.js提供了与 DOM 相关的功能
- browser.min.js将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
- <script type="text/babel"> 将React 独有的JSX 语法转换成标准的 JavaScript

【推广】上面必需核心库找不到的话，可以上本人github下：https://github.com/mqy1023/react-basejs

二、ReactDOM.render()渲染，将模板转为 HTML 语言，并插入指定的 DOM 节点。
- 下面代码是将一个 h1 标题，插入 example 节点

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

《二》、第一个组件

React 中全是模块化、可组装的组件。本例实现“评论框”组件结构如下：

- CommentBox
  - CommentList
    - Comment
  - CommentForm

制作组件

1、先创建最外一层组件CommentBox

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

【注意】原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头。

JSX语法

首先你注意到 JavaScript 代码中 XML 式的语法语句。我们有一个简单的预编译器，用于将这种语法糖转换成纯 JavaScript 代码：

组件创建过程
- React.createClass() 来创建一个新的 React 组件。其中最重要的方法是 render ，该方法返回一棵 React 组件树，这棵树最终将会渲染成 HTML 。
- <div> 标签不是真正的 DOM 节点；他们是 React div 组件的实例。

// tutorial1-raw.js
var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

2、让我们为 CommentList 和 CommentForm 搭建骨架，它们也是由一些简单的<div>组成。将这两个组件的代码添加到你的源码文件中，保留已有的CommentBox 声明和ReactDOM.render 调用：

// tutorial2.js
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

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

3、接下来，更新 CommentBox 组件代码，使用新创建的 CommentList 和 CommentForm组件：

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

JSX 编译器会自动重写 HTML 标签为 React.createElement(tagName) 表达式

使用属性（props）

4、让我们创建 Comment 组件，该组件依赖于从父级传入的数据。从父组件传入的数据会做为子组件的属性(property) ，这些属性(properties)可以通过 this.props 访问到。使用属性(props)，我们就可以读到从 CommentList 传到 Comment 的数据，然后渲染一些标记：

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

在 JSX 中，通过使用大括号包住一个 JavaScript 表达式（例如作为属性或者儿子节点），你可以在树结构中生成文本或者 React 组件。我们通过 this.props 来访问传入组件的数据，键名就是对应的命名属性，也可以通过 this.props.children 访问组件内嵌的任何元素。

组件属性

5、在我们定义了 Comment 组件，我们想传递给它作者名字和评论文本，以便于我们能够对每一个独立的评论重用相同的代码。首先让我们添加一些评论到 CommentList ：

// tutorial5.js
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

接入数据模型

6、实际开发数据不是硬写入，本步先抽出JSON格式评论数据，最后实现从服务器获取数据

// tutorial8.js
var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];

我们需要用一种模块化的方式将数据传入到 CommentList 。修改 CommentBox 和 React.render() 方法，通过 props 传递数据到 CommentList ：

// 
// tutorial9.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} /> //获取data并传给子组件CommentList
        <CommentForm />
      </div>
    );
  }
});

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

现在数据在 CommentList 中可用了，让我们动态地渲染评论：

// tutorial10.js
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) { //分解data属性值
      return (
        <Comment author={comment.author} key={comment.id}> //
          {comment.text}  //
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}  //
      </div>
    );
  }
});

未完待续…

参考链接
1、《react官网》：http://facebook.github.io/react/docs/getting-started.html
2、http://reactjs.cn/react/docs/tutorial.html
3、《React 基础》http://hahack.com/codes/learn-react-native-for-android-02/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
4、《React菜鸟教程》http://www.runoob.com/react/react-tutorial.html

mqy1023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React快速入门教程

《一》、快速入门一、必备资源下载：http://facebook.github.io/react/docs/getting-started.html react.js是 React 的核心库react-dom.js提供了与 DOM 相关的功能browser.min.js将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。<script
复制链接

扫一扫

专栏目录