React introductory series one (first understanding of React)
1. Introduction to React
React is a JavaScript library for building user interfaces. React is mainly used to build UI, many people think React is the V (view) in MVC. React originated as an internal project at Facebook. React has high performance and the code logic is very simple.
2. React features
- Declarative Design − React adopts a declarative paradigm that makes it easy to describe applications.
- Efficient − React minimizes interaction with the DOM by emulating the DOM.
- Flexible − React works well with known libraries or frameworks.
- JSX − JSX is an extension to JavaScript syntax. React development does not necessarily use JSX, but it is recommended.
- Components − Building components through React makes the code easier to reuse, and can be well used in the development of large projects.
- One-way responsive data flow − React implements one-way responsive data flow, which reduces duplication of code, which is why it is simpler than traditional data binding.
3. Introduction to basic use
基本模板
<!DOCTYPE html>
<html>
<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="example"></div>
<script type="text/babel">
</script>
</body>
</html>
模板中代码一共用了三个库： react.js 、react-dom.js 和 Browser.js
需要注意的是，它们必须首先加载。
1）react.js是React的核心库。
2）react-dom.js是提供与DOM相关的功能。
3）Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线时，应将它放到服务器完成。
$ babel src --out-dir build
这个命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。Note: The type attribute of the last script tag is text/babel. This is because React's unique JSX syntax is incompatible with JavaScript. Wherever JSX is used, add type=”text/babel”. If you need to use JSX, the type attribute of the script tag needs to be set to text/babel.
补充一点：
使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，其语法风
格类似于HTML语法风格.不过，使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对
React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行，Babel内嵌了对JSX的支持。
在运行时引用babel.js虽然容易使用而且还很方便，不过并不是一种好的方案，因为需要转换，所以更加耗时，
这一缺点在产品阶段显得更加明显。Babel是React团队选择的在使用React过程中转换ES*和JSX为ES5语句的工具。实际
Babel主要用途是一个JavaScript转换器，它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说，Babel主
要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。babel.js与browser.js的关系 babel的
浏览器版本为browser.js（未精简）和browser.min.js（已精简）。所以最后一个文件也可以引入babel.min.js。
Fourth, use React through npm (use create-react-app to quickly build a React development environment)
create-react-app is from Facebook, and this command can quickly build a React development environment without configuration. The project created automatically by create-react-app is based on Webpack + ES6.
执行以下命令创建项目(支持node.js和npm)：
$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start