React的语法

定义虚拟dom时不要用引号
标签中引入js表达式要用{}
如果在jsx要写行内样式需要使用style={ {coler：red}}形式
样式的类名指定不能写class，要写className;
只有一个根标签
标签必须闭合
标签首字母
①若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="hello-example"></div>
    <script type="text/babel">
      class HelloMessage extends React.Component {
        render() {
          return (
            <div>
              Hello {this.props.name}我的年龄是{this.props.age}
            </div>
          );
        }
      }

      ReactDOM.render(
        <HelloMessage name="Taylor" age="18" />,
        document.getElementById("hello-example")
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="timer-example"></div>
    <script type="text/babel">
      class Timer extends React.Component {
        constructor(props) {
          super(props);
          this.state = { seconds: 10 };
        }

        tick() {
          this.setState((state) => ({
            seconds: state.seconds + 2,
          }));
        }

        componentDidMount() {
          this.interval = setInterval(() => this.tick(), 1000);
        }

        // componentWillUnmount() {
        //   clearInterval(this.interval);
        // }

        render() {
          return <div>Seconds: {this.state.seconds}</div>;
        }
      }

      ReactDOM.render(<Timer />, document.getElementById("timer-example"));
    </script>
  </body>
</html>

https://blog.csdn.net/Ronychen/article/details/114669364?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163667659116780269882562%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=163667659116780269882562&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-114669364.first_rank_v2_pc_rank_v29&utm_term=React&spm=1018.2226.3001.4187

おすすめ