自学React系列~01之React基础

发表于 分类于

React的HelloWorld

使用任何语言都先来一个 HelloWorld 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>

        <script type="text/babel">
            const VDOM = <h1>Hello React!</h1>;
            ReactDOM.render(VDOM, document.getElementById("test"));
        </script>
    </body>
</html>

JSX语法

  • 定义虚拟 DOM 的时候不要写引号

    1
    const VDOM = <h1>Hello React!</h1>;  #h1标签前后都没有引号

  • 标签中混入 JS 表达式时要用 {}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const arr = ['张三', '李四', '王二'];
    const VDOM = <h4>
            <ul>
              {arr.map((key, i) => {
                return <li key={i}>{key}</li>;  # 这里的 key 使用 {} 包起来的
              })}
            </ul>
          </h4>;
    ReactDOM.render(VDOM, document.getElementById("test"));

  • 使用样式时，类名不要用 class 而要用 className

    1
    const VDOM = <h1 className='title'>Hello React!</h1>;  #使用定义的 .title css 样式

  • 内联样式，使用 style 属性时要用 {{style: value}}，如果有样式是 background-color 这种的改写成坨峰形式即 backgroundColor

    1
    const VDOM = <h1 style={{'backgroundColor': 'pink', 'width': '1000px', 'height': '100px'}}>Hello React!</h1>;

  • 只有一个顶级标签(要标签)

    1
    const VDOM = <h1 className='title'>Hello React!</h1>;  #不能再出现 与 <h1> 标签平级的标签了

  • 标签必须闭合

    1
    const VDOM = <h1>; #这种形式不可以

  • 标签首字母小写会转为同名的 html 标签

    1
    const VDOM = <h1>Hello React</h1>; #会转换成 html 的 <h1></h1> 标签

  • 标签首字母大写代表是 React 的组件

    1
    2
    3
    4
    5
    function Demo(){
      return <h1>这是一个函数式组件</h1>;
    }

    ReactDOM.render(<Demo/>, document.getElementById("test"));  #<Demo/>标签就是 React 的组件

React组件

函数式组件

使用函数定义的 React 组件称为函数组件，示例如下:

1
2
3
4
function Demo(){
  return <h1>这是一个函数式组件</h1>;
}
ReactDOM.render(<Demo></Demo>, document.getElementById("FunctionComponent"));

类式组件

使用类定义的React组件称为类式组件，示例如下:

1
2
3
4
5
6
class ClassComponent extends React.Component {
  render(){
    return <h1>这是类组件</h1>;
  }
}
ReactDOM.render(<ClassComponent></ClassComponent>, document.getElementById("ClassComponent"));