React can be downloaded and used directly, and many learning examples are provided in the download package.

This tutorial uses version 16.4.0 of React. You can download the latest version on the official website https://reactjs.org/ .

You can also use Staticfile CDN’s React CDN library directly at the following address:

      
 Official CDN address: 
 
 
 
<scriptsrc="https://unpkg.com/react@16/umd/react.development.js">script><scriptsrc=" https://unpkg.com/react-dom@16/umd/react-dom.development.js"> <scriptsrc="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">script>    
 Note: it is very inefficient to use Babel to compile JSX in a browser. 
 
 
  3.2.1.  Use an example  
 
 The following example outputs Hello, world! 
 
 
 React instance  
 
 
 
Hello React!   ReactDOM.render(
Hello, world!
, document.getElementById('example') );    
<p>  Instance resolution: </p> <p>  In the example, we introduced three libraries:  <code class="docutils literal notranslate">  <span class="pre">  react.development.min.js  </span>  </code>  、  <code class="docutils literal notranslate">  <span class="pre">  react-dom.development.min.js  </span>  </code>  and  <code class="docutils literal notranslate">  <span class="pre">  babel.min.js  </span>  </code>  : </p> <ul class="simple">  <li>  <p>  <code class="docutils literal notranslate">  <span class="pre">  react.min.js  </span>  </code>  -Core library of React  </p>  </li>  <li>  <p>  <code class="docutils literal notranslate">  <span class="pre">  react-dom.min.js  </span>  </code>  -provide DOM-related functionality  </p>  </li>  <li>  <p>  <code class="docutils literal notranslate">  <span class="pre">  babel.min.js  </span>  </code>  -Babel can convert ES6 code to ES5 code so that we can execute React code on currently unsupported ES6 browsers.  <code class="docutils literal notranslate">  <span class="pre">  Babel  </span>  </code>  Embedded support for JSX. By setting the  <code class="docutils literal notranslate">  <span class="pre">  Babel  </span>  </code>  and  <code class="docutils literal notranslate">  <span class="pre">  babel-sublime  </span>  </code>  Package (package) used together can take the syntax rendering of source codeto a whole new level.  </p>  </li> </ul> <div class="highlight-default notranslate">  <div class="highlight">  <pre><span></span>ReactDOM.render(<h1>Hello,world!</h1>,document.getElementById('example')); 
 
   
 The above code inserts an H1 title into the id= “example” node. 
 
 Note: 
 
 If we need to use JSX, then