上一篇文章已经尝试使用了React的Button组件，这一篇文章将开始学习征程第一步 Hello World！

官方文档：react.docschina.org/docs/hello-…

前期准备：

1.将下面地址里的JS文件下载到本地js文件夹中。

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
https://unpkg.com/babel-standalone@6.26.0/babel.min.js

2.新建一个名为2.HelloWorld.shtml（命名随意）文件

3.安装Node.js，在终端输入下面代码安装http-server

npm install http-server -g

4.开启 http-server 服务，在终端输入下面的代码开启服务

$ http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新） 

出现下图，开启成功。

一.开启服务器后，在浏览器地址上输入http://127.0.0.1:8080/ ，选择需要查看的页面，点击下方2.HelloWorld.shtml

二.在2.HelloWorld.shtml中引入准备好的js文件。

三.新建div，输入React代码。

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。

虽然你可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，可以定义包含属性的树状结构的语法，类似HTML标签那样的使用，而且更便于代码的阅读。

使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器。

四.本地服务器地址，查看效果。

总结：

1.开启本地服务器的原因是模拟实际开发中，请求的是服务器的文件，其次在请求外部文件时，可能会存在跨域的问题（React官方也提供了兼容跨域的文件）。

2.由于React支持原生js or jsx的写法，本文使用了JSX的写法，在使用JSX写法时，要注意它使用XML标记的方式去直接声明界面，在使用 JSX语法时，必须要引入babel的JSX解析器 （本文使用了官方提供的文件，详情查看前期准备中的地址），把JSX转化成JS语法（否则不会生效），同时babel 会把es6语法转成es5语法，去兼容更多浏览器。有关JSX的补充：react.docschina.org/docs/introd…

注意：

1.使用JSX必须要加type="text/babel" 以及 加入对应的JSX解析器。