react基本使用及其安装

Posted 2021-08-28 地中海真帅

介绍描述

1. 用于动态构建用户界面的 javascript 库(只关注于视图)
2. 由Facebook开源

React的特点

1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效（优秀的Diffing算法）

命令式编程 和 声明式编程

• 告诉计算机怎么做（How） - 过程
• 告诉计算机我们要什么（What） - 结果

如何使用 React

基于浏览器的模式

• React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
  • React.createElement(type,props,children);
• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
  • ReactDOM.render(element, container[, callback])
    • element：要渲染的内容
    • container：要渲染的内容存放容器
    • callback：渲染后的回调函数

babel

babel-standalone.js：在浏览器中处理 JSX

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

效果图:

React高效的原因

1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2. DOM Diffing算法, 最小化页面重绘。

在使用react 时需要引入核心模块

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  //React核心库。
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  //提供操作DOM的react扩展库。
  <script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
  //解析JSX语法代码转为JS代码的库



  

react基本代码效果图

JSX 是一个基于 JavaScript + XML 的一个扩展语法,本质是React.createElement(component, props, …children)方法的语法糖

- 它可以作为值使用
- 它并不是字符串
- 它也不是html
- 它可以配合JavaScript 表达式一起使用

创建虚拟DOM的两种方式

1. 纯JS方式(一般不用)
2. JSX方式

虚拟DOM与真实DOM

1. React提供了一些API来创建一种 “特别” 的一般js对象
    const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
    上面创建的就是一个简单的虚拟DOM对象
2. 虚拟DOM对象最终都会被React转换为真实的DOM
3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

插值表达式

在 JXS 中可以使用 {表达式} 嵌入表达式

表达式：产生值的一组代码的集合

注意:

vue使用两个花括号解析变量,react只用一个花括号解析变量

列表渲染

列表渲染(类似于vue里面的v-for)

• 数组
• 对象
  扩展：虚拟 DOM （virtualDOM） 和 diff

效果图

条件渲染

• 三元运算符
• 与或运算符

效果图

在属性上使用 表达式

JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意

• 当在属性中使用 {} 的时候，不要使用引号包含

这个是react的基本语法

下面我们来说一下react的项目安装及其启动

1. npm i -g create-react-app 全局安装react,注意是安装不是创建项目

2. yarn global add create-react-app

3. cnpm i -g create-react-app

大家可以根据自己的需求进行安装

创建项目的命令

• create-react-app <项目名称>
• npx create-react-app <项目名称>

安装项目以后使用npm start进行启动项目

启动项目成功效果图

重点报错

如果项目使用npm start 报错的话输入npm run eject,以后再使用npm start启动项目

总结:

今天主要学习了react的基本语法,及其基本项目安装,react相比vue更加复杂一点,但比vue更加灵活,但有一点是react创建项目时更加复杂,但更加容易报错,比如我上面说的那个报错,恐怕很多人都会遇到,希望大家在用到的时候一定要注意

最后作者创作不易,如果文章对你有帮助的话,记得留下你的点赞和关注呦