阿坝州做网站公司,定制平台,html成品网站,电商平台系统#x1f4bb; React 基础篇#xff08;一#xff09;#x1f3e0;专栏#xff1a;React #x1f440;个人主页#xff1a;繁星学编程#x1f341; #x1f9d1;个人简介#xff1a;一个不断提高自我的平凡人#x1f680; #x1f50a;分享方向#xff1a;目前主攻… React 基础篇一专栏React 个人主页繁星学编程 个人简介一个不断提高自我的平凡人 分享方向目前主攻前端其他知识也会阶段性分享 格言☀️没有走不通的路只有不敢走的人☀️ 让我们一起进步一起成为更好的自己 文章目录 React 基础知识篇一react是什么(1) 重要版本变更(2) 项目创建(3) 抽离配置文件 组件的写法(1) 函数组件(2) 类组件(3) 组件嵌套(4) 两个组件的区别 React 基础知识篇一
react是什么
官方解释React 是一个声明式高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面这些代码片段被称作“组件”。
vscode中React有助于快捷开发的插件
ES7 React/Redux/React-Native snippets
// 代码段快捷键
React-Native/React/Redux/React-Native...(1) 重要版本变更
序号版本号发版时间重要更新1162017 年 9 月 26引入 es6 的类组件216.32018 年 4 月 3 日生命周期更新316.42018 年 5 月 23 日生命周期更新416.82019 年 2 月 6 日引入 react hooks517.02020 年 10 月 20 日过渡版本618.02022 年 3 月 29 日写法改变严格模式发生改变
(2) 项目创建
create-react-app 脚手架使用 需要保证电脑安装 node 版本在 14 以上系统在 win7 以上 # 方式1:使用npx
$ npx create-react-app react-basic
# 方式2:使用npm
$ npm init react-app react-basic
# 方式3:使用yarn
$ yarn create react-app react-basicyarn的使用
yarn的安装npm i yarn tyarn -g
安装依赖npm i xxx -g - yarn add xxx -globalnpm i xxx -S - yarn add xxxnpm i xxx -D - yarn add xxx -devnpm i - yarn项目初始化目录
项目启动yarn start
React 单页面应用 目录分析
manifest.json图片适配robots.txtseo优化yarn.lock版本锁定
(3) 抽离配置文件
eject指令用于抽离配置文件 cra脚手架基于webpack默认webpack的配置在 node_modules下的react-scripts 内部,但是一般情况下传输代码时不会上传 node_modules那么在必要情况下就必须得抽离配置文件。 通过npm run eject或者cnpm run eject 或者yarn eject指令抽离配置文件 抽离配置文件过程中注意事项 确保项目的 git 仓库是最新的如果不需要对于 webpack 进行配置那么不需要抽离配置文件create-react-app v2 默认支持 ts 以及 sass 以及 css 的模块化如果使用 sass 作为 css 预处理器那么不需要抽离配置文件
抽离后项目目录产生文件夹config和scripts
index.js入口文件 初始测试
// 引入react
import React from react
// 引入reactDom
// 浏览器端引入reactDom,app端引入react-native
import ReactDOM from react-dom/clientconst root ReactDOM.createRoot(document.getElementById(root))
// jsx语法允许我们在js文件里面写html
// 可以将我们写的html代码转成虚拟DOM
const msg react!!!
root.render(divhello {msg}/div)组件的写法
组件的命名首字母大写拓展名js或jsx 变量名如果是小写字母开头的认为是标签 变量名如果是大写字母开头的认为是组件 (1) 函数组件
传参props
const App (props) {return divhello {props.msg}!/div;
};
// 组件实例化
root.render(Header msgworld/);(2) 类组件
传参this.props
class App extends React.Component {render() {// 在类组件里面不知道怎么做的时候就打印thisconsole.log(this);return divhello {this.props.msg}/div;}
}// root.render(app(world));
// root.render(app({ msg: world }));
// 将组件变成标签的过程就是组件实例化的过程
root.render(App msgworld /);(3) 组件嵌套
import React,{Component,Fragment} from react;class Msg extends Component{render(){return divmsg/div}
}const App (){return Fragmentdiv组件嵌套/divMsg/Msg/Fragment
}export default App;注组件中必须有一个根标签
解决组件中必须有一个根标签 方式一 使用Fragment标签嵌套在所有标签的最外面
import { Fragment } from react
class App extends React.Component{render() {return FragmentdivHello/divdivWorld/div/Fragment}
}方式二 在所有标签最外面套一层/
const Home () {return divHello/divdivWorld/div/
}以上两种方式的本质还是共用同一个父组件但是不会产生新标签只做占位符与Vue中的template标签作用相同
(4) 两个组件的区别
组件的定义方式不同。生命周期不同类组件有函数式组件没有。副作用操作执行不同class 组件通过生命周期函数函数组件用 Hooks 的 useEffect。state 的定义、读取、修改方式不同函数组件用 hook 的 useState。this class 组件有函数式组件没有。实例 class 组件有函数时组件没有。ref 使用不同类组件可以获取子组件实例函数式组件不可以因为函数式组件没有实例。 注官方推荐使用函数式组件 结束语 希望对您有一点点帮助如有错误欢迎小伙伴指正。 点赞您的赞赏是我前进的动力 ⭐收藏您的支持我是创作的源泉 ✍评论您的建议是我改进的良药 一起加油
