0301入门-react脚手架-react应用

最新推荐文章于 2024-05-13 21:12:44 发布

gaog2zh

最新推荐文章于 2024-05-13 21:12:44 发布

阅读量336

点赞数 1

分类专栏： # React 文章标签： react.js javascript 前端 createreactapp

本文链接：https://blog.csdn.net/gaogzhen/article/details/129912955

版权

React 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1 React脚手架安装

1.1 React脚手架概述

React脚手架（React Starter Kit）是一个工具集，用于帮助开发人员快速搭建React应用程序的基本结构。它包括了React应用程序的基本文件和文件夹结构、自动化构建工具、开发服务器、测试工具等，可以大大减少开发人员的工作量。

目前比较流行的React脚手架包括：

Create React App：这是由React团队提供的官方脚手架，它提供了一个简单的方式来创建React应用程序，包括Webpack和Babel等工具的配置，还可以自动化处理构建、测试和部署等任务。
Next.js：这是一个基于React的服务器端渲染框架，提供了一些附加功能，如代码分割、预取、静态文件导出等，可以大大提高React应用程序的性能和SEO。
Gatsby：这是一个静态站点生成器，也是基于React的，它可以将数据源（如Markdown文件、CMS、API等）转换为静态HTML文件，具有快速加载、SEO友好、可扩展等优点。

这些React脚手架都可以根据开发人员的需求进行定制化配置，以满足特定的项目要求。

我们目前要学习的create-react-app。

1.2 create-react-app安装

第一步：全局安装，命令npm install -g create-react-app
第二步：切换到目的路径，创建项目 create-react-app xxx项目名
第三部：进入项目文件夹 cd xxx项目名
第四部：启动项目 npm start或者yarn start

1.3 React脚手架项目结构

初始化项目结构如下图1.3-1所示：

在这里插入图片描述

2 脚手架文件介绍

启动项目，效果图如下2-1所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PIApI7Wl-1680424518550)(/Users/gaogzhen/baiduSyncdisk/study/front/react/note/03scaffold/images/截屏2023-03-30 17.12.39-create-react-app-yarn-start.png)]

项目结构简介如下：

node_modules：项目依赖库
public：公共资源文件夹
- favicon.ico：Favicon.ico是一个网站的图标文件，通常在浏览器的地址栏、书签栏、标签页等处显示。该文件用于标识和区分一个网站，是网站品牌识别的重要组成部分之一。
- index.html：首页
- logo192.png：适配192logo
- Logo512png：适配512logo
- manifest.json：移动端加壳配置
- robots.txt：Robots.txt是一种位于网站根目录下的文本文件，用于告诉搜索引擎爬虫哪些网页可以被抓取，哪些网页不能被抓取。Manifest.json是一个Web应用程序清单文件，用于描述Web应用程序的元数据信息，如名称、图标、版本号、作者等。该文件可以帮助浏览器了解Web应用程序的相关信息，从而使Web应用程序更像一个本地应用程序。
src：资源文件夹
- App.css：APP组件样式
- App.js：函数式定义了一个APP组件
- App.test.js：给APP做测试
- index.css：入口样式
- index.js：项目入口
- logo.svg：logo
- ReportWebVitals：记录页面性能
- setupTests.js：组件测试
- .gitignore：git忽略文件
- package.json：
- README.md：首页介绍

3 自定义组件

我们先了解脚手架，通过循序渐进方式，一些暂时用不到的“组件”我们会删减。

脚手架中我们只留下node_modules,空的public和src文件夹，package.json,README.md。

我们在App壳组件中添加2个自定义的组件Hello和Welcome组件。

第一步，public/index.html,代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <title>React 脚手架</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

组件容器root必须的，其他为固定结构

第二步，开发入口文件src/index.js,代码如下：

// 引入react核心库
import React from "react";
// 引入react-dom
import ReactDOM from 'react-dom/client'
// 引入App组件
import App from './App'

// 渲染组件到页面
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
)

都是固定结构，引入App壳组件并渲染

第三步，开发壳组件src\App.jsx,代码如下：

// 创建外壳组件App
import {Component} from 'react'
import Hello from './components/Hello'
import Welcome from './components/Welcome'

class App extends Component {
  render() {
    return (
      <div>
        <Hello />
        <Welcome/>
      </div>
    )
  }

}

export default App

文件前缀为index默认为首页或者入口文件，引入的时候只需引入地址到父路径即可；
文件后缀为js或者jsx引入的时候，只需引入路径到文件名即可。

第四步，为了方便管理和隔离，自定义的组件我们统一放在src/components下，文件名为组件名。

创建Hello组件，代码如下

import {Component} from 'react'
// import Ht from './index.css'
import hello from './index.module.css'

class Hello extends Component {
  render() {
    return (
      <div>
        <h2 className={hello.title}>
           hello, reac222
        </h2>
      </div> 
    )
  }
}

export default Hello

创建Welcome组件，代码如下

import {Component} from 'react'
import wel from './index.module.css'
// import './index.css'

class Welcome extends Component {
  render() {
    return (
      <div>
        <h2 className={wel.title}>
           welcome study react
        </h2>
      </div> 
    )
  }
}

export default Welcome

import {Component} from ‘react’ 为模块化导入，不是结构赋值语法。
我们使用类式组件
最后需要导出组件，基于模块化开发，需要导入导出。
因为组件最后统一放置在App组件中，所以，如果样式有冲突，我们可以通过样式模块化来隔离
- 样式的组件化，即定义样式文件后缀由.css改为.module;在使用时，通过import from导入为对象。

文件结构如下图3-1所示：

在这里插入图片描述

代码在文章最后仓库中有。

效果如下图3-2所示：

在这里插入图片描述

4 vscode中React插件安装

在开发中，有很多固定和重复的代码，比如引入react，react-dom 定义类组件等等。为了提高开发效率，在很多开发工具中，都提供了代码片段（snippets）功能，即在工作区输入助记符，自动生成相应格式的代码。

其中在vscode中，我们可以通过安装如下图4-1所示插件

在这里插入图片描述

该插件给我们封装好了很多代码片段，比如敲rcc 对应代码片段为

import React, { Component } from 'react'

export default class 当前文件名 extends Component {
  render() {
    return (
      <div>当前文件名</div>
    )
  }
}

更多代码片段参考官方文档

5 组件化编码流程

组件拆分：拆分组件，抽取组件；
实现静态组件：使用组件实现静态页面效果；
实现动态组件：
- 动态显示初始化数据
  - 数据类型
  - 数据名称
  - 保存在那个组件中

通过上面对脚手架的学习，我们用脚手架来做个TodoList入门案例。

结语

❓QQ:806797785

⭐️源代码仓库地址：https://github.com/gaogzhen/react-staging.git

参考：

[1]React视频教程[CP/OL].2020-12-15.p49-55.

[2]React官网[CP/OL].

[2]ChatGPT[CP/OL].

gaog2zh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
0301入门-react脚手架-react应用

0301入门-react脚手架-react应用
复制链接

扫一扫

专栏目录

0301入门-react脚手架-react应用

1 React脚手架安装

1.1 React脚手架概述

1.2 create-react-app安装

1.3 React脚手架项目结构

2 脚手架文件介绍

3 自定义组件

4 vscode中React插件安装

5 组件化编码流程

结语

“相关推荐”对你有帮助么？