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

👋 感谢您的观看！

本站网络名称： 微看VCAN网

本站永久网址： https://www.dzq3.com

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END