首页: 点击进入react官网
React作为前端主流框架,企业需求也在日益剧增,掌握它势在必行,今天来入个门;从简单静态项目到工程化开发
1、新建html文件
React和Vue一样,也是现在内存中加工虚拟dom,然后渲染到页面,所以页面需要一个容器;body中的div就是将来呈现渲染结果的容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 新建一个div,给一个id属性,值为app -->
<div id="app">
</div>
</body>
</html>
2、导入3个库文件
官网点击顶部文档菜单,右侧有CDN导入核心库的链接;官网这里只提供了俩文件,react.js和react-dom.js;这里其实还缺少一个文件,babel.min.js;
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
3、编写script部分
这里需要注意,看代码的备注
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 新建一个div,给一个id属性,值为app -->
<div id="app">
</div>
</body>
</html>
<!-- 这里的type必须是text/babel,这是告诉浏览器需要使用babel来解析script标签中的代码,这个不是普通的javascript,前提是必须引入babel.min.js文件,否则会报错 -->
<script type="text/babel">
// ReactDOM来自react-dom.js文件,render函数接受两个参数
// 参数1:jsx语法,这里一定不要家引号,jsx本来就需要写标签,下一节会讲到
// 参数2:表示jsx编译的结果显示到哪个dom元素
ReactDOM.render(
<h1>Hello,React!</h1>,
document.getElementById('app')
)
</script>
4、打开html预览效果
看到Hello,React就表示成功啦