React入门

一、React是什么？

一个JS库用于构建UI，有如下几个特点：

1.1 Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
声明式编写UI
UI和数据绑定，当数据发生改变时同时更新渲染界面展示，类似于android中的databinding；将对象的创建工作交给React，开发者只需告诉它你想要什么，不必关心实现细节，类似于spring中的ioc。
参考：https://zhuanlan.zhihu.com/p/26085755

1.2 Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
基于组件
构建包装好的组件能够管理自己的状态，然后将它们组成复杂的UI界面。由于组件逻辑是用JS代码编写而不是模板代码（标记语言代码），你可以轻松的传递丰富的数据到组件中去并且将组件的状态剥离DOM。有点类似android中组合形式的自定义控件，容器型的控件不仅包裹着若干子控件，还有逻辑代码。

1.3 Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.
一次学习，任意地方使用
开发者可以在不改动现有代码的前提下开发任何新功能，在服务端与移动端皆可使用。

二、基本使用
2.1 Try React
React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.
尝试React
React从一开始就被设计成可渐进式采用的模式。开发者可以按需使用，无论你是想尝鲜，还是往一个简单HTML中增加一些交互性，还是开启一个复杂应用，React都可以发挥它的作用。

2.2 Add React in One Minute
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
There will be no complicated tools or install requirements — to complete this section, you only need an internet connection, and a minute of your time.
在下面的例子中将展示如何往一个已存在的HMTL页面中添加React组件，你可以在自己的网站中或者创建一个空HTML文件来练习，在这个过程中不需要任何编译工具或者安装要求，只需要网络连接和几分钟时间。

Step 1: Add a DOM Container to the HTML
First, open the HTML page you want to edit. Add an empty

tag to mark the spot where you want to display something with React. For example:

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

第一步，添加一个装载虚拟DOM的容器
添加一个空<div>标记，它相当于一个占位符，后面通过React创建的组件将会填充到这里。在一个页面中你可以在任意位置放置任意数量的占位符。

Step 2: Add the Script Tags
Next, add three <script> tags to the HTML page right before the closing</body> tag:

 <!-- ... other HTML ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>

</body>

第二步，加载React
在</body>之前添加三个JS库引用，前两个是加载React（记住在发布到生成环境时替换成相应的生产库，生产库已经过压缩可以提高下载速度），第三个引用是加载自定义组件。

Step 3: Create a React Component
Create a file called like_button.js next to your HTML page.

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// 这两行代码将会找到之前"id"为“like_button_container”的容器，然后将创建好的React组件塞进去
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

第三步，创建自定义React组件
新建一个叫“like_button.js”的文件，添加如上代码，在浏览器中运行效果如下图：

参考：https://reactjs.org/
https://reactjs.org/docs/getting-started.html

https://reactjs.org/docs/add-react-to-a-website.html