第02节、React环境搭建和HelloWorld程序

如果不考虑工程化的问题,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的知识。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论