React18 回顾,入门

前言

最近听前端大佬说 Vue 快不行啦,现在都是 React 啦,幸好以前玩过但是太久没用也忘记了,没关系我过一下就完事了现在呢我就带大家搞一篇 React 的入门.

官方文档: https://react.dev/

中文文档: https://react.docschina.org/learn

啥是 React ?

它用于构建 Web 和原生交互界面的库,React 的主要目标是提供一种高效、灵活且可维护的方法来构建用户界面,React 从诞生之初就是可被渐进式使用的 Vue 不是也是渐进式 hhh

image.png

React 的优势

它基于传统的 DOM 开发的优势,组件化的开发方式 、生态也很丰富、跨平台支持!!

组件化架构: 界面划分为小组件，每个组件都有自己的状态（state）和属性（props）

虚拟DOM：React引入了虚拟DOM,它是一个内存中的轻量级表示实际DOM的树结构从而提高性能!!!!

单向数据流：React采用单向数据流的模型，使得数据的流动更可控。数据从父组件传递到子组件，这有助于减少潜在的错误。

JSX语法：React使用JSX语法，允许在JavaScript代码中编写类似HTML的标记,这我看到的时候感觉太牛逼了直接在函数里面返回 html

跨平台开发：React可以用于构建Web应用程序，也可以与React Native一起用于构建原生移动应用程序，从而实现跨平台开发。

还有很多就不一一介绍了,来吧玩一下.其实我也是跟着官方文档来玩的

感兴趣的大佬可以去官方文档先尝试一下

image.png

是不是舒舒服服!!!!

image.png

来吧我们自己搭建一个脚手架玩

使用 CreateReactApp 搭建

image.png

官方地址:https://create-react-app.bootcss.com/docs/getting-started

Create React App 让你仅通过一行命令，即可构建现代化的 Web 应用, 屌不屌?

执行命令

npx create-react-app react-demo 注意: 要提前安装 Node.js 哦

解释命令

1. npx Node.js工具命令，查找并执行后续的包命令
2. create-react-app 核心包（固定写法），用于创建React项目
3. react-demo React项目的名称（可以自定义）

image.png

下载可能有点慢,慢慢等不急 !!!!!!!!!

下载完毕我们打开看看

image.png

image.png

Hello World !

我们就简单的玩玩后面才是详细的开始!!!

找到 App.js 直接修改想要出来的效果!!!

image.png

image.png

最后

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗