React入门 Part1

JSX

JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。

JSX语法对使用React来说并不是必须的，实际上，JSX语法知识React.createElement(componet, props, …children)的语法糖，所有的JSX语法最终都会转换成这个方法的调用。

JSX语法

基本语法

JSX基本语法和XML语法相同，都是使用成对的标签构成一个树状结构的数据。

示例代码：

import React from 'react';

const TestElement = (
    <div>
        <h1>Hello, world!</h1>
    </div>
)

export default TestElement;

使用：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import TestElement from './test/JSXGrammar';

ReactDOM.render(
  <React.StrictMode>
    {TestElement}
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

标签类型

在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、span等）和React组件类型的标签。

当使用DOM类型的标签时，标签的首字母必须小写。

当使用React类型的标签时，标签的首字母必须大写。

示例代码：

import React, { Component } from 'react';

class ElementLabelTest extends Component {
    render () {
        return (
            <h1>Hello, React!</h1>
        );
    };
}

export default ElementLabelTest;

使用：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

import ElementLabelTest from './test/ElementType';

ReactDOM.render(
  <React.StrictMode>
    <ElementLabelTest></ElementLabelTest>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

JavaScript表达式

JSX可以使用JS表达式，因为JSX本质上仍是JS。

在JSX中使用JS表达式需要将表达式使用“{}”包起来。

表达式在JSX中使用的主要场景有两个：通过表达式给标签属性赋值和通过表达式定义组件。

标签属性

当JSX标签是DOM类型的标签时，对应DOM标签支持的属性JSX也支持。

部分属性的名称会有所改变，主要的变化有：class要写成className，事件属性名称采用驼峰格式。

注释

JSX中注释要用大括号“{}”将"/**/"包裹起来。