不管React是什么，写个hello world 先，以下是代码，使用cdn引入了js文件，以下代码可以直接在浏览器运行
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
（以上代码在 https://github.com/ruanyf/react-demos 中的demo01）
请注意代码，以上的html文件中引入了三个js文件，
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
- 其中，==react.js== 是 React 的核心库
- ==react-dom.js== 是提供与 DOM 相关的功能
- ==Browser.js== 的作用是将 JSX 语法转为 JavaScript 语法
react代码的主要部分，也就是被type类型为‘text/babel’的<script>标签包裹的部分。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
ReactDOM是react中定义的一个对象，该对象下的render()方法，可以将<h1>Hello, world!</h1>,这个简单的组件写入到id为“example”的标签中，由此实现了组件的渲染。
运行结果：
页面显示
想要学习React的朋友，可以查看
网友评论