react基础

一、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标签引入
  • 注意先后顺序的问题，先引核心文件，再引其他文件
1 
2 
3 
4 
5

Hello World演示

 1 <div id="app">div>
 2 
 3 <script src="./js/react.development.js">script>
 4 <script src="./js/react-dom.development.js">script>
 5 <script>
 6   // 1、创建虚拟dom
 7   // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM)
 8   // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM,DOM中的内容/子DOM,...)
 9   // React.createElement(标签名称,对象形式的DOM属性信息,[DOM中的内容/子DOM,DOM中的内容/子DOM,...])
10   const vNode = React.createElement("div", {}, "hello world");
11   
12   // 2、获取挂载点
13   const el = document.getElementById("app");
14   // const el = document.querySelector("#app")
15   
16   // 3、页面渲染：ReactDOM.render(虚拟DOM, 挂载点)
17   ReactDOM.render(vNode, el);
18 script>

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

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

二、JSX

一、JSX概述

　　由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

　　React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。

  • React不一定非要使用JSX，但它有以下优点：
    • JSX执行更快，因为它在编译为JavaScript代码后进行了优化
    • 它是类型安全的，在编译过程中就能发现错误
    • 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速度
  • JSX语法：
    • 定义虚拟DOM时，不要用引号
    • 标签中混入js表达式时要用{}
    • 样式的类名指定不要用class，要用className
    • 内联样式，要用style={{key: value}}的形式去写
    • 只有一个根标签
    • 标签必须闭合
    • 标签首字母：
      • 小写字母开头，则会将标签转为html中同名标签，若html标签中无对应的同名元素，编译会报错
      • 大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

二、JSX重构Hello World

  • 在项目中尝试JSX最快的方法是在页面中添加这个