Skip to main content

First React demo

需求：点击按钮更换文本

原生 JavaScript#

<body>  <p class="title">Hello World</p>  <button class="change-btn">Change text</button>  <script>    let text = document.getElementsByClassName("title")[0];    const btn = document.getElementsByClassName("change-btn")[0];
    btn.addEventListener("click", function () {      text.textContent = "Hello React!";    });  </script></body>

React#

<body>  <div id="app"></div>  <script    src="https://unpkg.com/react@16/umd/react.development.js"    crossorigin  ></script>  <script    src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"    crossorigin  ></script>  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  <script type="text/babel">    let text = "Hello world";
    render();
    function render() {      ReactDOM.render(        <div>          <p>{text}</p>          <button onClick={clickBtn}>Change text</button>        </div>,        document.getElementById("app")      );    }
    function clickBtn() {      text = "Hello React!";      render();    }  </script></body>

It be more codes🤷‍♂️

Component#

ReactDOM.render 第一参数是一个 HTML 原生或者一个组件，So let's package a component with React.

e.g.

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^