ReactJS组件

笔记

快速开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

在 JavaScript 代码里写着 XML 格式的代码称为 JSX；为了把 JSX 转成标准的 JavaScript，我们用 <script type="text/babel">标签，然后通过Babel转换成在浏览器中真正执行的内容。

分离文件

React JSX 代码文件可以写在单独的文件里

1
2
3
4
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后在 helloworld.html 引用它：

1
<script type="text/babel" src="src/helloworld.js"></script>

离线转换

先安装命令行工具（依赖 npm）：
然后将你的 src/helloworld.js 文件转成标准的 JavaScript:
一旦你修改了， build/helloworld.js 文件会自动生成。

为什么使用 React?

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。

很多人认为 React 是 MVC 中的 V（视图）。

我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

简单
仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。

声明式 (Declarative)
数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。

构建可组合的组件
React 都是关于构建可复用的组件。事实上，通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。

react
reactjs
React入门
React实战
React 入门实例教程
React 教程

本文标题:ReactJS组件

文章作者:Youngrivers

发布时间:2018-11-13, 23:28:15

最后更新:2016-08-03, 05:28:48

原始链接:http://yoursite.com/2018/11/13/x11/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 快速开始
    1. 1.1. 分离文件
    2. 1.2. 离线转换
  2. 2. 为什么使用 React?
,