一,react的基本概念
React 是用于构建用户界面的 JavaScript 库
构建用户界面: User Interface,对咱们前端来说,简单理解为:HTML 页面
二,react全家桶是框架
react: 核心库
react-dom: dom操作
react-router:路由
redux:集中状态管理
三,React 特点
1.声明式
用类似于html的语法来定义页面。react中通过数据驱动视图的变化,当数据发生改变react能够高效地更新并渲染DOM
<div className="app">
<h1>Hello React! 动态数据变化:{count}</h1>
</div>
2.组件化
组件是react中最重要的内容,组件用于表示页面中的部分内容,组合、复用多个组件,就可以实现完整的页面功能
3.学习一次,随处使用
使用react/react-dom可以开发Web应用
使用react/react-native可以开发移动端原生应用(react-native)RN
使用react可以开发VR(虚拟现实)应用(react/react360)
四,React脚手架-从零开始创建项目
1.创建方式一:
先全局安装脚手架工具包
npm i -g create-react-app
用脚手架工具来创建项目
create-react-app your-project-name
2.创建方式二:
直接使用npx来创建项目
npx create-react-app your-project-name
注意:(npx create-react-app 是固定命令,create-react-app 是 React 脚手架的名称
your-project-name 表示项目名称,可以修改)
3.启动项目:
npm run start
注意:
src 目录是我们写代码进行项目开发的目录
index.js是入口文件
五,使用的基本步骤
1.导入包: React, ReactDOM
2.创建 react元素
3.渲染元素到某个dom上
代码示例:
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// 创建元素
const title = React.createElement('h1', {id:'box'}, 'hello react')
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
六,拓展 eslint 的配置
npm i eslint typescript -D
在项目根目录运行
npx eslint --init
如果想ctrl+s自动格式化 则可以在设置的配置json文件 写入一下代码
{
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".vue", ".jsx", ".tsx"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
在代码中 eslint并不能处理jsx中的代码 我们可以在vscode中下载插件 prettier-now
继续在json文件中写入格式化相关代码
{
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 编辑器设置 - 保存时做格式化
"editor.formatOnSave": true,
// 编辑器设置 - 默认采用prettier-now做格式化
// 如果使用的是prettier,这的设置应该是 esbenp.prettier-vscode
"editor.defaultFormatter":"remimarsal.prettier-now",
// 控制缩进
"prettier.useTabs": false, // 缩进不使用tab,使用空格
"prettier.tabWidth": 2, // 缩进字节数
// 函数声明时小括号前后要加空格
// 如果你使用prettier这一项是不能做选择的,导致和eslint默认配置的冲突
// 可以在百度中搜到很多的记录: https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
"prettier.spaceBeforeFunctionParen": true,
// react的jsx让>与结束标签同行
"prettier.jsxBracketSameLine": true,
"prettier.bracketSpacing": false,// 去掉数组前后空格
"prettier.semi": false, // 不要给语句加;
"prettier.singleQuote": true, // 采用单引号
"prettier.trailingComma": "none", // 不要尾随逗号,
"prettier.printWidth": 80, // 每行超过80列就换行
// 在.js中,写div按下tab就可以自动补全,而不需要写<div再补全
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}