• React使用create-react-app创建react项目

    👏欢迎来到我的React系列文章
    🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列
    🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界

    文章目录

    在这里插入图片描述

    使用create-react-app创建react应用

    🍓1.1 react脚手架

    1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
      • 包含了所有需要的配置（语法检查、jsx编译、devServer…）
      • 下载好了所有相关的依赖
      • 可以直接运行一个简单效果
    2. react提供了一个用于创建react项目的脚手架库: create-react-app
    3. 项目的整体技术架构为: react + webpack + es6 + eslint
    4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

    🍇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>
  
  <meta charset="utf-8" />
  
  <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 Apptitle>
head>

<body>
  
  <noscript>You need to enable JavaScript to run this app.noscript>
  <div id="root">div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    🍎1.5 功能界面的组件化编码流程（通用）

    1. 拆分组件: 拆分界面,抽取组件

    2. 实现静态组件: 使用组件实现静态页面效果

    3. 实现动态组件–动态显示初始化数据

      • 数据类型
      • 数据名称
      • 保存在哪个组件？

      动态组件–交互（从绑定事件监听开始）

    好啦～今天的文章就先到这里啦，如果在文章中发现错误还请各位道友私信我以便更改～

    原创不易，如果对你有帮助的话，请不要吝啬你的三连哟✅～

    最后祝各位大朋友们六一快乐🎉🎉

    每个人都能收获自己的棒棒糖🍭🍭
    回见～

    在这里插入图片描述

  • 相关阅读:
    swagger（API接口文档利器）
    Python学习打卡：day08
    服务器怎么启动vue3 构建的dist 服务
    C++代码基本内存操作及原理
    第53期|GPTSecurity周报
    如何检查 Docker 和 Kubernetes 是否可以访问外部网络，特别是用于拉取镜像的仓库？
    最新，Spring Boot 2.3.5 发布，你跟上了吗？
    线性表01- 数组与简易接口设计
    VSCode使用简介
    8万字带你入门Rust
  • 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126447693