React 入门笔记

1. 自定义组件—在html中使用react

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Hello React</title>
 5    <meta charset="utf-8"> 
 6  </head>
 7  <body>
 8    <div id="app">
 9      <!--应用渲染位置 -->
10    </div>
11    <script src="react/build/react.js"></script>
12    <script src="react/build/react-dom.js"></script>
13    <script>
14    	// 应用的JavaScript代码
15      ReactDOM.render(
16      	React.DOM.h1(null, "hello world"),
17        document.getElementByID("app")
18      )
19    </script>
20  </body>
21</html>

React.DOM.*的使用

 1React.DOM.h1(
 2	{
 3    id: "my-heading"  // 第一参数用于指定该组件的DOM 属性
 4  },
 5  "hello world"       // 第二个参数定义该组件的子元素
 6),
 7  
 8// 可以有多个子元素
 9Reat.DOM.h1(
10	{
11    id: "my-heading"
12  },
13  React.DOM.span(null, "hello"),
14  "world"
15),
16  
17// 子元素可以嵌套
18 Reat.DOM.h1(
19	{
20    id: "my-heading"
21  },
22  React.DOM.span(null, 
23                 React.DOM.em(null, "hell"),
24                 "o"),
25  "world!"
26), 
27  
28// 如果使用JSX语法 可以在JavaScript中插入 XML
29 React.DOM.render(
30	<h1 id="my-heading">
31  	<span><em>Hello</em>0</span> world!
32  </h1>,
33  document.getElementById("app")
34)

特殊的DOM属性

class 和for 不能直接在JavaScript中使用。要用className和htmlFor。

 1// 反例  属性不会生效
 2React.DOM.h1(
 3	{
 4    class: "pretty",
 5    for: "me",
 6  },
 7  "hello world "
 8);
 9// 正例 属性生效
10React.DOM.h1(
11	{
12    className: "pretty",
13    htmlForor: "me",
14  },
15  "hello world "
16);

style不能使用字符串赋值，需要使用JavaScript对象，

 1// 反例 属性不会生效
 2React.DOM.h1{
 3  {
 4    style: " background: balck; color: whrite; font-family: Verdana",
 5  },
 6    "hello world!"
 7}
 8// 正例 属性生效
 9React.DOM.h1{
10  {
11    style: {
12      background: "balck",
13      color: "whrite",
14      fontFamily: "Verdana",
15    },
16  },
17    "hello world!"
18}

Tips:

  • React.js 就是一个开源的JavaScript库， 所以和JavaScript一样使用， 可以在html 页面中 通过<script src=""></script>引入React库
  • 在选定的DOM节点中渲染一个React组件，ReactDOM.render(reactWhat,domWhere)

组件的生命周期

 1class Hello extends React.Component {
 2  render() {
 3    return <div>Hello {this.props.name}</div>;
 4  }
 5}
 6
 7ReactDOM.render(
 8  <Hello name="World" />,
 9  document.getElementById('container')
10);

自定义组件

ReactDOM.render