React

官网：https://react.docschina.org/

React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。

声明式

你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI

基于组件

组件时React最重要的内容，组件表示页面中的部分内容

学习一次，随处使用

使用React可以开发Web应用(ReactJs)，使用React可以开发移动端(react-native)，可以开发VR应用(react 360)

React与传统MVC的关系

React用于构建用户界面的 JavaScript 库，它不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

浏览器扩展与vscode开发扩展安装

Chrome 浏览器扩展：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN

vscode安装react开发扩展

react开发需要引入多个依赖文件，其中react.js、react-dom.js这两个文件是我们创建react应用程序必须要引入的依赖文件。

react.js 是核心，提供创建元素，组件等功能

https://unpkg.com/react@16/umd/react.development.js

react-dom.js 提供DOM相关功能

https://unpkg.com/react-dom@16/umd/react-dom.development.js

下载对应的react.js和react-dom.js的开发版本的js类库文件到本机中后，通过script引入到当前的网页中

// React 的核心库

//DOM 相关的功能

在html中定义reactjs渲染容器id和进行React实例化相关操作,完成helloworld显示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hell world</title>
</head>

<body>
  <!-- 用于内容显示容器 挂载点 -->
  <div id="app"></div>

  <!-- react核心类库 -->
  <script src="./js/react.development.js"></script>
  <!-- dom操作 -->
  <script src="./js/react-dom.development.js"></script>
  <script>
    const app = document.querySelector('#app')

    // 虚拟dom
    const el = React.createElement

    const vnode = el(
      'div',
      null,
      el('h1', { id: 100 }, 'hello world'),
      el('h1', { id: 100 }, 'hello world'),
    )

    // 把虚拟dom转为真实的dom并挂载到页面中
    ReactDOM.render(vnode, app)


  </script>


</body>

</html>

右侧打赏一下代码改变世界一块二块也是爱