【第1节 认识React】什么是React 、React JSX、模块与组件和模块化与组件化

认识React

什么是React

React是用于构建用户界面的 JavaScript 库。它有如下三个特点：

1、声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

2、组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的UI。组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

3、一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。
React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

React使用

首先，导入相关的库。

React的使用分成两步，第一步，创建虚拟DOM元素对象，第二步，将虚拟DOM渲染到页面真实的DOM容器中。

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<div id="test"></div>

<script type="text/babel">
    //创建虚拟DOM元素对象
    var vDom = <h1>Hello React</h1>
    //将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom, document.getElementById("test"));
</script>

React JSX

React提供了一些API来创建一种“特别”的一般js对象：

var element = React.createElement('h1', {id:'myTitle'},'hello')

上面创建的就是一个简单的虚拟DOM对象。

JSX全称是JavaScript XML，是React定义的一种类似于XML的JS扩展语法，用来创建React虚拟DOM对象。

var ele=<h1>Hello</h1>

它不是字符串，也不是HTML/XML标签，它最终产生的就是一个JS对象。

浏览器不能直接解析JSX代码，需要babel转译为纯JS代码才能运行，只要用了JSX，都要加上type="text/babel"，声明需要babel来处理。

<script type="text/javascript">
    const msg = "I LIKE YOU!";
    const myId = "Atguigu";
    //第一种方式
    const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, msg.toUpperCase());
    ReactDOM.render(vDom1, document.getElementById("test1"))
</script>
<script type="text/babel">
    //第二种方式
    const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>;
    ReactDOM.render(vDom2, document.getElementById("test2"))
</script>

模块与组件和模块化与组件化

模块：是向外提供特定功能的js程序，一般就是一个js文件。复用js，简化js的编写。

组件：是用来实现特定（局部）功能效果的代码集合 （html/css/js）