初探React

Veröffentlicht am

Hello,World!

React是现在比较主流的前端框架，我们这次入门指南，旨在让大家了解和认识什么是React，我们的重点不是精通React，重点是“从0到1”这样一个过程。

React的设计思想十分独特，是革命性的创新，他的性能十分出众，代码逻辑十分简单和清晰，这使得越来越多的人加入React这个大框架中来。

这也是我们实际工作中需要做的－－给用户带来价值。

现在我们进行由阶段的练习，先从“Hello，World！”开始。

React 容易上手，并且需要的基本都是基础知识，这对前端初学者来说是十分亲切的，下面我们通过进行每一个Demo来逐步的揭开React的神秘面纱。

安装和使用

React 的安装包，你可以快速的在其官网上下载到，不过在我的github上自带了React的源码，不用另外安装，只需要把这个库拷到你的硬盘上就行！
https://github.com/AleenL/React.git

做到了上面的步骤，我们就可以做我们的第一个例子了。

React 的 HTML 模版

使用React的网页源码，结构大致如下；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
    <div id="index"></div>
    <script type="text/babel">
        /* There is your code*/
    </script>
</body>
</html>

上面的代码有两个地方需要注意，最后一个script标签里的type属性为text/babel这是React所特有的JSX语法，是和JavaScript 不兼容的，凡事使用 JSX 的地方， 都要加上 type="text/babel"。

代码分别有三个库， React.js、react-dom.js和Browser.js，他们必须首先加载，所以要放在head标签中，其中react.js是React的核心哭，react-dom.js是提供与DOM相关的功能，browser.js的作用是将JSX 语法庄转为 avaSctipr 语法，这一步十分浪费时间，所以上线的时候，应该将他放在服务器中完成。

第一个Demo

ReactDOM.render 是 React 的基本方法，用于将模版转为 HTML 语言，并插入指定的 DOM 节点。

1
2
3
4
ReactDOM.render(
    <h1>Hello,world!</h1>,
    document.getElementById("index")
);

这段代码插入最后一个Script标签中，意思是将一个 h1 标题插入了 index节点中，运行结果如下。

img