如果不考虑工程化的问题,React的运行基础环境非常简单,只需要在HTML文件中引入两个js文件(react.min.js和react-dom.min.js)即可开始工作
1、 搭建开发环境
下载所需文件
首先我们访问https://reactjs.org/,在页面中单击网页左上角的React版本(课程录制时是v15.6.1)。点击后下载两个文件。
Github下载地址:https://github.com/facebook/react/releases
react.js:实现React核心逻辑,且于具体的渲染引擎无关,从而可以跨平台公用。如果应用要迁移到React Native,这一部分逻辑是不需要改变的。
react-dom.js:包含了具体的DOM渲染更新逻辑,以及服务端渲染的逻辑,这部分就是与浏览器相关的部分了。
下载好后,你只需要在你HTML中引入这两个文件就可以编写React代码了。
2、Hello World程序
按照国际惯例,学习一个新程序知识都要写HelloWorld的。
我们先动手把这个程序敲出来,然后再讲解。
建立工程文件夹,这里假定为d:/react_demo。
视频中使用的代码编辑工具是VSCode,你可以用其它你习惯的编辑器(如果你是前端新手,建议使用和视频中一样的编辑器,这样可以保证操作一致)。
<!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>Document</title>
</head>
<body>
<div id="reactContainer"></div>
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script>
var HelloComponent =React.createClass({
render:function(){
return React.createElement('h1',null,'Hello world');
}
});
ReactDOM.render(
React.createElement(HelloComponent,null),
document.getElementById('reactContainer')
)
</script>
</body>
</html>
React.createClass
它的作用是注册一个组件类HelloComponent,这个组件类只包含一个render函数,该函数通过调用React.createElement实现了以下HTML内容:
<h1>Hello world</h1>
ReactDOM.render()
ReactDOM.render是React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点。
3、总结
看完文章,一定要动手做出我们的Hello World程序。有个好的开始,下节课我们将学习JSX的知识。
👋 感谢您的观看!
资源解压密码:ipotato.chat
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
4 本站资源统一解压密码:ipotato.chat
暂无评论内容