开始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();则方便不少
预览
现在我们在终端运行node server.js成功后，打开浏览器，输入localhost:3000，我们看到图示，那么我们的第一个React项目就完成了，大家可以在render()里面多尝试一下其他标签
window-7.png
网友评论