React学习起始

一、准备工作

react是一个用于构建用户界面的 JavaScript 库

脚手架安装：npx create-react-app（脚手架名称） react-basic（包名）--------等同于maven构建项目的性质

启动项目：yarn start or npm start

注：全局安装缺点：太久没初始化项目，就得重新装

 

二、基本使用

1导包 2创建元素 3渲染元素到指定容器

import React from 'react'
import ReactDom from 'react-dom'

/*
标签名字==定义什么样式 属性项 标签内容
*/
// const element = React.createElement('div',{id:'box',title:'哈哈'},'我是内容')
// ReactDom.render(element,document.getElementById('root'))

const element = React.createElement('ul',{className:'list'},[
    React.createElement('li',null,'香蕉'),
    React.createElement('li',null,'香蕉'),
    React.createElement('li',null,'香蕉'),
])
ReactDom.render(element,document.getElementById('root'))

 

三、JSX（上述不直观，JSX是 JS 的语法扩展，通过jsx创建react元素）

脚手架：我们可以写JSX语法代替掉React方法创建元素,脚手架默认经过babel的编译处理。

v17版之前的仍需要导入React包，后续的做了升级，不需依赖React库了。

 JSX注意点

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

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

• JSX必须要有一个根节点， <></> <React.Fragment></React.Fragment>

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

• JSX中语法更接近与JavaScript

  • class => className

  • for====> htmlFor

• JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止自动插入分号的bug（类似于if写{}，包裹起来更好！）

使用prettier插件格式化react代码

• 安装prettier插件

• 添加prettier的配置

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