一、react简介

一、介绍

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

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

二、特点

• 声明式

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

• 基于组件

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

• 学习一次，随处可用

  • React可以开发Web应用—ReactJs

  • React可以开发移动端—react-native

  • React可以开发VR应用—react 360

三、react与传统MVC关系

　　React用于构建用户界面的JavaScript 库，它不是一个完整的MVC框架，最多可以认为是MVC中的V（View）。

　　可以简单地理解为：React将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

四、开发工具安装

安装Chrome 浏览器扩展

 

vscode安装react开发扩展

五、使用

React开发需要引入多个依赖文件

• react.js
  • React核心，提供创建元素，组件等功能
• react-dom.js
  • 提供DOM相关功能

使用步骤

• 通过HTML的script标签引入
• 注意先后顺序的问题，先引核心文件，再引其他文件

<!-- React 的核心库 -->
<script src="js/react.development.js"></script>

<!-- DOM 相关的功能 -->
<script src="js/react-dom.development.js"></script>

Hello World演示

<div id="app"></div>
<!-- 引入react相关的文件 -->
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script>
  // 1、创建虚拟dom
  // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM)
  // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM,DOM中的内容/子DOM,...)
  // React.createElement(标签名称,对象形式的DOM属性信息,[DOM中的内容/子DOM,DOM中的内容/子DOM,...])
  const vNode = React.createElement("div", {}, "hello world");
  
  // 2、获取挂载点
  const el = document.getElementById("app");
  // const el = document.querySelector("#app")
  
  // 3、页面渲染：ReactDOM.render(虚拟DOM, 挂载点)
  ReactDOM.render(vNode, el);
</script>

注意：在react中，JavaScript代码部分里面如果涉及到DOM的class属性操作，不要直接使用class，因为class是es6里面的关键词，react里面需要使用className进行替换

const vNode = React.createElement("div", {id: "hi",className: "cls"}, "hello world");