新建项目

方式一：CDN，react-dom依赖于react需放在其后面

  1. <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  2. <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  3. <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  1. npx create-react-app my-app

基本示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>learn-react</title>
  9.     <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  10.     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  11.     <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  12. </head>
  14. <body>
  15.     <div id="app"></div>
  16.     <script type="text/babel">
  17.         ReactDOM.render(
  18.             <h1>Hello, world!</h1>,
  19.             document.querySelector("#app")
  20.         );
  21.     </script>
  22. </body>
  24. </html>

JSX

使用表达式

  1. const myId = 'acd';
  2. const mydata = 'hello,react!'
  3. ReactDOM.render(
  4.     (
  5.         <h2 id={myId}>{mydata}</h2>
  6.     ),
  7.     document.querySelector("#app")
  8. );
  1. ReactDOM.render(
  2.     (
  3.         <div>
  4.             <ul> {
  5.                 data.map((item, index) => {
  6.                     return <li key={index}>{item}</li>
  7.                 })
  8.             }
  9.             </ul>
  10.         </div>
  11.     ),
  12.     document.querySelector("#app")
  13. );

注意：

  • {} 中只能使用表达式，不能使用语句

    • a
    • a+b
    • func1()
    • arr.map()
    • function func1(){}

      样式

      1. ReactDOM.render(
      2. (
      3.    <div>
      4.        <h2 id={myId} className="title">
      5.            <span style={{color:'blue'}}>{mydata}</span>
      6.        </h2>
      7.        <input />
      8.    </div>
      9. ),
      10. document.querySelector("#app")
      11. );
      注意：

  • 使用 className 而非 class

  • 绑定style：style={{color:’blue’}}
  • 绑定id：id={myId}
  • 只能有一个根标签
  • 大小标签为react组件，小写标签为HTML标签

    组件

    函数式组件

    适用于简单组件
    1. ReactDOM.render(
    2.   <MyComponent />,
    3.   document.querySelector("#app")
    4. );
    5. function MyComponent() {
    6.   return (
    7.       <div>
    8.           函数式组件
    9.       </div>
    10.   )
    11. }

    类组件

    参考

    【1】https://fullstackopen.com/zh/