👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始,涵盖了React的一切基础,属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
文章目录
使用create-react-app创建react应用
🍓1.1 react脚手架
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- 包含了所有需要的配置(语法检查、jsx编译、devServer…)
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
🍇1.2 创建项目并启动
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创项目的目录,使用命令:create-react-app ”项目名称“
第三步,进入项目文件夹:cd 到项目文件夹下
第四步,启动项目:npm start / yarn start
你当然可以选择不全局安装create-react-app
你可以直接执行npx create-react-app "项目名称"
这样可以不安装create-react-app而直接创建你的脚手架项目
你还可以执行npx create-react-app "项目名称" --template typescript
创建一个支持TS语言的react脚手架项目。
当你看到这个界面在你的浏览器里自动打开的时候:
没错,就是这个长得像写轮眼的东东,它会在页面中一直转,到这一步你的脚手架项目就搭建完毕咯~
🍒1.3 react脚手架项目结构
public
---- 静态资源文件夹
- favicon.icon ------ 网站页签图标
index.html -------- 主页面
- logo192.png ------- logo图
- logo512.png ------- logo图
- manifest.json ----- 应用加壳的配置文件
- robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
-
App.css -------- App组件的样式
-
App.js---------App组件
-
App.test.js ---- 用于给App做测试
-
index.css ------ 样式
-
index.js------入口文件
-
logo.svg ------- logo图
-
reportWebVitals.js
----页面性能分析文件(需要web-vitals库的支持)
-
setupTests.js
---- 组件单元测试的文件(需要jest-dom库的支持)
🍊1.4 index.html文件内容详解
<html lang="en">
<head>
<!-- 使用utf-8编码 -->
<meta charset="utf-8" />
<!-- %PUBLIC_URL%代表public文件夹的路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 用于开启理想视口,用于做移动端的适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 用于配置浏览器页签地址栏的颜色(仅支持安卓手机浏览器) -->
<meta name="theme-color" content="#000000" />
<!-- 网页的描述 -->
<meta name="description" content="Web site created using create-react-app" />
<!-- 用于指定网页添加到苹果手机主屏幕后的图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- 应用加壳时的配置文件 -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- 若浏览器不支持js,则展示标签中的内容 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
🍎1.5 功能界面的组件化编码流程(通用)
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件–动态显示初始化数据
- 数据类型
- 数据名称
- 保存在哪个组件?
动态组件–交互(从绑定事件监听开始)
好啦~今天的文章就先到这里啦,如果在文章中发现错误还请各位道友私信我以便更改~
原创不易,如果对你有帮助的话,请不要吝啬你的三连哟✅~
最后祝各位大朋友们六一快乐🎉🎉
每个人都能收获自己的棒棒糖🍭🍭
回见~