React学习笔记-day01

React概述

react介绍

用于构建用户界面的javascript库，

https://reactjs.org/（英文）

https://react.docschina.org/（中文）

• React 是一个用于构建用户界面（UI，简单理解为：HTML 页面）的 JavaScript 库
• 如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能
• react/react-dom/react-router/redux: 框架
• React 起源于 Facebook 内部项目（News Feed，2011），后又用来架设 Instagram 的网站（2012），并于 2013 年 5 月开源react介绍
• React 是最流行的前端开发框架之一，其他：Vue、Angular 等等框架对比
• 与vue区别：我的理解是vue提供了更多的组件及功能封装，React更加趋于底层，对js功底要求较高

react特点

1.声明式UI

你只需要描述UI（HTML）看起来是什么样的，就跟写HTML一样

const aa = 

    
Hello React! 动态数据变化:{count}

声明式对应的是命令式，声明式关注的是 what，命令式关注的是how

2.组件化

• 组件是react中最重要的内容

• 组件用于表示页面中的部分内容

• 组合、复用多个组件，就可以实现完整的页面功能

（react中万物皆组件）

3.学习一次，随处使用

• 使用 react/rect-dom 可以开发Web应用
• 使用 react/react-native 可以开发移动端原生应用（react-native） RN 安卓 和 ios应用 flutter
• 使用 react 可以开发 VR（虚拟现实）应用（react360）

React 脚手架（CLI）

• React 脚手架的介绍

• 使用 React 脚手架创建项目

• 项目目录结构调整

• npm i -g @vue/cli React 脚手架（CLI）

  • React 脚手架的介绍
  • 使用 React 脚手架创建项目
  • 项目目录结构调整
  • npm i -g @vue/cli (vue) => npm i -g create-react-app(react)
  • vue create xxx (vue) => create-react-app xxx(react)

  React 脚手架的介绍

  • 脚手架：为了保证各施工过程顺利进行而搭设的工作平台
  • 对于前端项目开发来说，脚手架是为了保证前端项目开发过程顺利进行而搭设的开发平台
  • 脚手架的意义：
    • 现代的前端开发日趋成熟，需要依赖于各种工具，比如，webpack、babel、eslint、sass/less/postcss等
    • 工具配置繁琐、重复，各项目之间的配置大同小异
    • 开发阶段、项目发布，配置不同
      • 项目开始前，帮你搭好架子，省去繁琐的 webpack 配置
      • 项目开发时，热更新、格式化代码、git 提交时自动校验代码格式等
      • 项目发布时，一键自动打包，包括：代码压缩、优化、按需加载等

  使用 React 脚手架创建项目

  • 命令：npx create-react-app react-basic
    • npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
    • react-basic 表示项目名称，可以修改
  • 启动项目：yarn start or npm run start
  • npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
    • 原始：1 全局安装npm i -g create-react-app 2 在通过脚手架的命令来创建 React 项目
    • 现在：npx 调用最新的 create-react-app 直接创建 React 项目

  项目目录结构说明和调整

  • 说明：
    • src 目录是我们写代码进行项目开发的目录
    • 查看 package.json 两个核心库：react、react-dom（脚手架已经帮我们安装好，我们直接用即可）
  • 调整：
    1. 删除 src 目录下的所有文件
    2. 创建 index.js 文件作为项目的入口文件，在这个文件中写 React 代码即可

  React 的基本使用

  基本步骤

  • 使用步骤

  - 导入react和react-dom     
  - 创建react元素(虚拟DOM)
  - 渲染react元素到页面中
  

  • 导入react和react-dom

  // 导入react和react-dom
  import React from 'react'
  import ReactDOM from 'react-dom'
  

  • 创建react元素

  // 创建元素
  const title = React.createElement('h1', null, 'hello react')
  

  • 渲染react元素到页面

  // 渲染react元素
  ReactDOM.render(title, document.getElementById('root'))
  

  完整

  
  import React from "react";
  import ReactDom from "react-dom"
  
  // 创建 虚拟DOM
  // React.createElement('标签名',{标签属性：class建议写成className}，标签内容)
  const vNode= React.createElement('div',{id:'aa'},'盒子')
  
  //渲染到页面中
  // ReactDom.render（元素，挂载对象）
  ReactDom.render(vNode,document.getElementById("root"))
  

  JSX的基本使用

  createElement的问题

  • 繁琐不简洁
  • 不直观，无法一眼看出所描述的结构
  • 不优雅，开发体验不好

JSX

JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。

JSX是react的核心内容

注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。

使用步骤

- 导入react和reactDOM包
- 使用jsx语法创建react元素
- 把react元素渲染到页面中

• 导入react和reactDOM

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

• 创建react元素

// 创建元素
const title = 

• 渲染元素

// 渲染元素
ReactDOM.render(title, document.getElementById('root'))

JSX 注意点

• 只有在脚手架中才能使用 jsx 语法

  • 因为JSX需要经过 babel 的编译处理，才能在浏览器中使用。脚手架中已经默认有了这个配置。

• JSX必须要有一个根节点， <>

• 没有子节点的元素可以使用/>结束

• JSX中语法更接近与 JavaScript

  • class =====> className
  • for========> htmlFor

• JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止自动插入分号的bug

使用 prettier 插件格式化react代码

• 安装插件
• 添加 prettier 的配置

// 保存到额时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",