开始React

在建立好我们的服务器后，我们就可以开始我们的React学习了，我们先把Hello-Node文件夹更名为Hello-React
在我们的服务器根目录 public 下修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React-1</title>
  <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="app">

  </div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello React</h1>,
      document.getElementById("app")
    );
  </script>
</body>
</html>

解读

  <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

我们引入了三个js文件，分别是react.js、react-dom.js、babel.js，前两个是我们react项目的基础文件，它给我们了react的众多方法，为什么它不弄成一个文件呢，因为react除了web，还有其他地方可以用，比如React Native，而我们现在是在浏览器中使用React，那么就需要引入react-dom.js

babel简介

既然前两个是我们在浏览器中使用React的必须，那么babel是干什么的呢，它能将我们的ES6、JSX等语法转为ES5，以扩展我们项目的可用性，毕竟仍然有很多学校或机关的电脑从不更新浏览器。babel的官网有一行大字，把babel解释得很清楚：Babel is a JavaScript compiler. “babel是一个JavaScript编译器”

JSX

JSX是React的灵魂，JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<时，JSX就当HTML解析，遇到{时，就当JavaScript解析。因此，我们可以像世界上最好的语言那样，直接在渲染输出语句中使用html代码，就像我们index.html中:

<script type="text/babel">
  ReactDOM.render(
      <h1>Hello React</h1>,
      document.getElementById("app")
  );
</script>

既然我们上面引入了babel.js我们的项目中也需要使用JSX，那么注意script标签应该写成<script type="text/babel">

ReactDOM.render();就是一个向浏览器渲染html代码的方法，前一个参数是你想渲染的内容，后一个参数是你想在那个容器里渲染，你可以看到我们的index.html文档中没有<h1>Hello React</h1>使用原生方法，我们需要createNode, createTextNode, 再一系列的appendChild，而现在使用ReactDOM.render();则方便不少