(二)如何用react脚手架构建项目以及文件目录的基本介绍

React-脚手架 系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、react是什么?二、react 特点三.react 基本使用4. react脚手架使用react脚手架初始化项目知识补充: npm 的升降级 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了 阅读详情

1、创建项目:

打开命令窗口,切换到要创建项目的地址

执行命令:
    create-react-app  项目名称   (js版本)
    create-react-app  项目名称  --template typescript  (ts版本)

2、创建成功即可看到以下内容;若创建失败,报错信息包含:rename、 please try running this.command again as root/Administrator等类似信息, 则需要用管理者身份来打开cmd窗口或者powershell窗口来创建即可

3、启动项目

可以在目录的README.md文件中看到包含启动项目的相关项目指令!

npm  start

4、项目目录

(1)node_modules: 这里面包含了react项目中会用到的一些依赖或者一些第三方库;

(2)public:里面包含了我们项目中的启动页面,react比较适合单页面项目应用开发,所以暂时只包含一个index.html,并且这也是react工程的入口页面,即启动项目后,打开的首页

(3)src:该文件包含了一些我们自己使用的js、css、img文件等,但你打开src文件夹你会发现很混乱,不要管什么app.js,你只需要关注index.js即可,系统默认将index.html对准了index.js,i即我们项目的入口js,它和index.html所对应。

5、目录简化

为了让目录结构更易懂,所以我们需要删除一些不必要的文件;src文件夹下原来的所有东西,除了index.js之外,都可以删掉;即只要保留入口文件即可。

用React实现一个文件管理器 import React, { Component } from 'react' import { Row, Col, Modal, Table, Upload, Button, Breadcrumb, Icon, Progress, message } from 'antd' import http from "libs/http"; import "./table.module.css"; export default class FileManagerTable extends Component. 阅读详情

相关推荐

React--》超详细教程——React脚手架的搭建与使用

React脚手架是开发现代Web应用的必备,其充分利用Webpack、Babel、ESlint等工具辅助项目的开发,当然这些工具也无需手动配置即可使用,脚手架的意义更多的是关注的是业务而不是工具的配置;项目的整体技术架构为:react + webpack + es6 + eslint。使用脚手架开发项目的特点:模块化、组件化、工程化。

ztK63LrD的博客 1万+

react脚手架文件各目录结构详解

react脚手架文件目录结构解析 node_modules — 项目依赖包文件夹 public — 静态资源文件夹 favicon.icon — 网站偏爱图标 index.html — 主页面(重要) logo192.png — logo图 logo512 — logo图 manifest.json — 应用加壳的配置文件 robots.txt — 爬虫协议文件 src — 源码文件夹 App.css — App组件的样式 App.js — App组件 (重要) App.test.js — 给

Create_IT_Man的博客 1975

【React1】React概述、基本使用、脚手架、JSX、组件

React是一个用于构建用户界面的javascript库。用户界面:对前端来说就是HTML页面, 所以,React 主要用来写HTML页面,或构建Web应用。如果从MVC的角度看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M 和 C的功能。React起源于Facebook的内部项目,后又用来假设Instagram的网站,并与2013年5月开源。React简介React 是Facebook用来创建用户界面的JS库,在2013年开源。React不是一个MVC框架。

充电五分钟... 1487

React学习之路 - 目录结构

node_modules — 存放项目依赖包public — 存放网站的静态资源文件src — 存放源代码,基于ES6规则的React代码gitignore — git的选择性上传的配置文件package.json — Webpack配置和项目包管理文件包含项目中依赖的第三方包(包的版本)和一些常用命令配置都在这个里边进行配置,当然脚手架已经为我们配置了一些了,目前位置,我们不需要改动。如果你对webpack了解,对这个一定也很熟悉。

Kant2048的博客 2001

[react]5、React脚手架

3、React脚手架将webpack相关的配置隐藏起来了,如果查看需要使用package.json文件中的一个脚本:"eject":"react-scripts eject",这个操作不可逆,命令格式如下。4、通过脚手架创建的工程需要通过import引入node_modules中相关代码文件,node_modules中相关代码文件都是通过模块化 module.exports导出使用,package.json // 对整个应用程序的描述:包括应用名称、版本号、一些依赖、以及项目的启动、打包等等。

kelai_6792的博客 1433

react笔记之学习之使用create-react-app创建文件

前端

geyaoisnice的博客 257

React手脚架项目目录结构

React脚手架项目目录结构 根目录: |-- node_modules 项目依赖包 由npm进行管理 |-- public ---- 静态资源文件夹 —公共文件,里边有公用模板和图标等一些东西 |-- favicon.icon ------ 网站页签图标 |-- index.html -------- 主页面,承装各个组件 整个项目只有一个html文件,单页面应用 |-- logo192.png ------- logo图 |-- logo512.png ------- logo图 |-- manif..

weixin_46435234的博客 437

基于Webpack的React项目脚手架搭建实战详解

在中定义脚本命令是标准化构建流程的关键做法:这些脚本可通过执行:其背后机制如下:npm 查找中是否存在对应命令(如webpack若存在,则将其加入$PATH;执行用户定义的命令字符串;子进程继承当前 shell 环境变量。特别注意:需额外安装否则会提示错误。通过封装常用命令,团队可以统一开发和构建行为,降低沟通成本。运行后,CRA 会将所有隐藏配置暴露出来:# 注意:此操作不可逆!

weixin_42163404的博客 878

React脚手架工具创建项目的详细介绍

只是在模块化开发中,我们需要手动的来导入React、ReactDOM,因为它们都是在我们安装的模块中;不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单;既然相似,就没有必要每次都从零开始搭建,完全可以使用一些工具,帮助我们生产基本的工程化模板;比如项目需要依赖很多的第三方库,如何更好的管理它们(比如管理它们的依赖、版本升级等);不同的项目,在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可;每个项目作出完成的效果不同,但是它们的基本工程化结构是相似的;

m0_71485750的博客 9992

【微信读书】数据内容接口逆向解析实战:从请求捕获到文本提取

本文详细解析了微信读书网页版数据内容接口的逆向工程实战过程。通过浏览器开发者工具捕获网络请求,定位关键API接口,并深入JavaScript代码分析数据解析逻辑,最终实现从请求模拟到文本提取的完整流程。文章旨在技术学习,探讨Web应用数据交互原理,帮助开发者理解现代前端数据流与编码机制。

game4的博客 420

AI变现案例实战系列4:AI数字员工团队——用OpenClaw搭建6个智能体,自动运营你的赚钱系统

摘要:谷歌AI产品经理Shubham Saboo利用OpenClaw搭建6人AI团队,实现内容创作、技术开发等任务自动化,每月成本不足400美元。文章对比阿里云和Windows本地两种部署方案,提供详细配置指南。通过多Agent架构实现物理隔离与精准协作,可创建6个专业AI角色(如研究员、运营、工程师等),每个Agent专注单一任务,避免记忆负担和上下文污染问题。阿里云方案适合长期稳定运行,Windows本地部署则适合零成本测试。最终可组建高效AI团队,实现7x24小时无人值守运营。(149字)

小明的博客 1141

使用脚手架搭建React项目

使用脚手架搭建React项目

唯见青山不见君 3232

从零到一:用STM32 FOC算法驯服无刷电机的艺术

本文详细介绍了如何使用STM32和FOC算法实现无刷电机的高性能控制。从硬件搭建、参数识别到闭环调节,一步步解析FOC算法的核心原理与调优技巧,帮助开发者掌握电机控制的关键技术,实现从零到一的精准驯服。

kkk56的博客 917

7.脚手架搭建React项目

脚手架搭建React项目

xiaoxiannvh的博客 1213

通信原理 | 随机数仿真 | 均匀、正态、双高斯、瑞利、莱斯、对数正态、nakagami、Suzuki分布的随机数仿真(matlab)

信道建模在通信系统设计和分析中扮演着至关重要的角色。它指的是使用数学和物理模型来描述和模拟无线或有线通信路径中的信号传播特性。

若北辰 1984

【华为OD机试真题】282、求满足条件的最长子串的长度 | 机试真题+思路参考+代码分析 (C++、Java、Py、C语言、JS)

题目描述 >给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度,字符串本身是其最长的子串,子串要求: >  1、只包含1个字母(a~ z,A~Z), 其余必须是数字; 2、字母可以在子 串中的任意位置; >  如果找不到满足要求的子串,如全是字母或全是数字,则返回-1

KJ.JK 1万+

如何使用React脚手架创建项目以及基本的目录介绍

使用react脚手架创建一个最基本的项目

qq_44015417的博客 2707

【WRFDA第一期】WRF数据同化概述及资源整理

【WRFDA第一期】WRF数据同化概述及资源整理

WW、forever的博客 1658

React基本使用、React脚手架的使用

目录 React概述 是什么 React的特点 React的基本使用 虚拟DOM React的安装 React的使用 React脚手架的使用 使用react脚手架初始化项目 在脚手架中使用react React概述 是什么 是一个用于构建用户界面的JavaScript库,旨在简化可视化界面的开发。 React是Facebook开发并于2013年发布。它基于JSX的语法,JSX是React的核心组成部分,它使用xml标记的方式去直接声明界面。React核心是组件,组件的设计提高

TangJing_的博客 1039

Java代码实现opc ua 事件订阅和数据变化订阅

OPC UA (Open Platform Communications Unified Architecture) 提供了两种主要的订阅机制:数据变化订阅(Data Change Subscription)和事件订阅(Event Subscription)。这两种订阅机制允许客户端实时接收来自服务器的数据更新或事件通知。

洛阳泰山的博客 2367

PMSM控制系列文章进阶-8.电流、角度采样及其同步

摘要:本文分析了高低压电机在电流和角度采样中的不同方案选择。高压电机采用霍尔传感器和旋变进行隔离采样,低压电机则使用shunt电阻和磁编码器以降低成本。重点讨论了采样时间补偿问题:电流采样需与PWM周期同步,角度采样需考虑传感器延迟;通过park变换和反park变换时需补偿采样与发波的时间差,提出了通过测试母线电流或Ud变化来验证补偿时间准确性的方法。文中还介绍了对传感器信号进行软解码处理的方法,包括消除直流偏置、增益误差和正交误差等参数的自学习过程。

weixin_41343701的博客 613

React 脚手架

将css文件名改为index.module.css,在index.js文件中引入 import hello from './index.module.css' ,在渲染时 Hello React!3.创建component组件文件夹,这个是保存项目中使用的组件的。2.创建项目:create-react-app hello-react。---- 组件单元测试的文件(需要jest-dom库的支持)五、第一个react项目---Hello React。

hsyldw2000的博客 2000

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

react脚手架

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

fang.lovest.yang的博客 1843

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

reactjs-vite-tailwindcss-boilerplate:2024年最完整的React开发脚手架搭建指南

reactjs-vite-tailwindcss-boilerplate是一个基于Vite、React 18、TypeScript、Vitest、Testing Library、TailwindCSS 3、Eslint和Prettier构建的完整脚手架,为开发者提供了开箱即用的React项目开发环境,帮助你快速启动现代化React应用开发。 ## 🚀 为什么选择这个React脚手架? 在20

gitblog_00307的博客 1114

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

React应用(基于React脚手架)

react 是前端三大框架中之一,而且大公司基本都在用react 包括百度也在使用 他有自己的独特的虚拟dom build-react-cli是帮助你快速创建生成react项目的脚手架工具,配置了多种可选择的不同类型项目模版。 1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1. 包含了所有需要的配置(语法检查、jsx编译、devServer…) 2. 下载好了所有相关的依赖 3. 可以直接运行一个简单效果 2. react提供了一个用于创建react项目的脚手架库: crea

weixin_62897746的博客 2502

用脚手架快速搭建React项目

public/:存放静态资源,例如 HTML 文件和图标等。index.html:应用的入口 HTML 文件。src/:存放源代码。App.js:主组件文件。index.js:应用的入口 JavaScript 文件。index.css:全局样式文件。:存放项目依赖的第三方包(通过 npm 安装的)。:项目配置文件,包含项目名称、版本、依赖项等信息。虽然 Create React App 提供了开箱即用的配置,但有时我们需要根据项目需求进行自定义配置。可以使用eject请注意,eject。

chen的博客 1100
上一篇: (一)react介绍以及脚手架创建项目环境配置
下一篇: (三)react中JSX语法的基本使用
春风欲雨
博客等级 码龄7年 68粉丝 106原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值