React.js学习笔记

最新推荐文章于 2023-03-02 16:13:55 发布

echone_wenqian

最新推荐文章于 2023-03-02 16:13:55 发布

阅读量583

点赞数 1

分类专栏： HTML+CSS JS框架 JS 文章标签： javascript html css 库 dom

本文链接：https://blog.csdn.net/qq_24729895/article/details/54629848

版权

JS 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

JS框架

13 篇文章 0 订阅

订阅专栏

HTML+CSS

11 篇文章 0 订阅

订阅专栏

这里写图片描述
学习React之前我们最好有一些HTML，JS，CSS的基础。

1.引入react

**下面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成，注意script的类型必须是type="text/babel"**

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

2.ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
下面的我们默认是插入在第一步中script中的代码，类似下面不再赘述

输出h1的Hello, world!

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

3.JSX语法

在React中，HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

    <script type="text/babel">
      var names = ['zhangsan','wangwu','liermazi'];
      ReactDOM.render(
        <div>
          {
            names.map(function(name) {
              return <div>Hello, {name}</div>
            })
          }
        </div>,
        document.getElementById('example')
      );
    </script>

4.组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

    <!--创建一个组件类-->
    <script type="text/babel">
        var HelloMessage = React.createClass({
          render : function() {
            return <h1>Hellow {this.props.name}</h1>;
          }
        });

        ReactDOM.render(
          <HelloMessage name="john" />,
          document.getElementById('example')
        );
    </script>

上面代码中，变量 HelloMessage 就是一个组件类。模板插入时，会自动生成 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

5.this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

    <!--this.props.children 属性用法-->
    <script type="text/babel">
        var NoteList = React.createClass({
          render : function() {
            return (
              <ul>
                {
                  React.Children.map(this.props.children, function(child) {
                    return <li>{child}</li>;
                  })
                }
              </ul>
            );
          }
        });
        ReactDOM.render(
          <NoteList>
            <span>Hello</span>
            <span>word</span>
          </NoteList>,
          document.body
        );
    </script>