【react】创建react项目+项目结构

已于 2024-01-19 14:19:52 修改
阅读量594 收藏 7
点赞数 5
分类专栏： React 文章标签： react.js 前端 前端框架
于 2024-01-19 11:07:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49668076/article/details/135689688
版权
本文介绍了如何通过create-react-app快速搭建React开发环境，包括使用npx命令创建项目、配置Webpack、并执行npmstart查看初始运行的页面。
摘要由CSDN通过智能技术生成

使用create-react-app快速搭建开发环境

create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节

在这里插入图片描述

npx create-react-app react_hm

执行命令后开始创建
创建好执行cd react_hm
npm start

当看到webpack compiled successfully，代表项目创建好了，会自动打开浏览器展示带有Reack 标志的页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

春晓_春眠花落
关注
专栏目录
AluraQuiz-base:在React沉浸过程中使用NextJs + react创建的测验项目
05-25
`AluraQuiz-base-main`很可能包含了项目的所有源代码文件，包括`pages`目录（Next.js的路由结构）、`components`目录（React组件）、`styles`目录（CSS样式文件）、`public`目录（静态资源）、`package.json`（项目...
React项目架构+电商项目布局及代码
07-16
React 项目架构是指在 React 框架下，如何组织和设计项目的目录结构、文件组织、路由设计、状态管理等方面的考虑。一个良好的项目架构可以让开发者更容易维护和扩展项目。 1. 目录结构 一个基本的 React 项目目录...
2024年Web前端最全Vue项目项字典值变量添加键值对，国内前端开发成果
2401_84434442的博客
05-04 623
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
React + Ts项目搭建
热门推荐
iam671的博客
07-03 1万+
react + typescript + node-sass + react的@别名项目搭建
从零开始创建react+flask项目+上传GitHub
qq_45484237的博客
09-25 774
这是在环境已经都配置好的前提下，如何新建一个react前端+flask后端项目，并上传GitHub。
零到一react+ts项目搭建
weixin_45158228的博客
09-16 1216
*·**因为都是写静态的数据，可以自行定义，路由跳转核心是useNavigate，useRouters两个方法，通过useRouters()获取路由表，使用useNavigate()获得navigate函数(navigate是自定义的变量，可以是任意字符串)，它接收两个参数，第一个是路径，第二个是可配置对象。**·**react项目默认隐藏了webpack相关配置文件，如果想要暴露在项目中，需要执行npm run eject，此操作无法回退，根据需要执行；
React+Typescript项目构建
子枫
02-08 804
React手脚架构建+TypeScript
vite+react+ts+sass搭建项目
weixin_57337549的博客
03-05 7542
vite+React+ts+sass重0开始搭建项目
Vite+React+TypeScript 搭建项目
weixin_48493783的博客
05-16 327
viet+react+typescript项目搭建
如何利用react框架快速创建一个electron项目
weixin_43354152的博客
06-30 775
如何利用create-react-app工具快速搭建一个react框架下的electron项目。
React+Mobx+Antd前端项目实战
xuanyu.li的博客
10-10 1096
React+Mobx+Antd实现前端项目开发——todo-app案例
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
在React项目中使用TypeScript，可以显著提升代码质量和开发体验，避免运行时常见的类型错误。 3. **Ant Design**：Ant Design是一个优秀的React UI组件库，它提供了丰富的预设组件，如按钮、表格、表单等，使得...
react+redux+router完整实践项目案例源码
08-11
在项目中，你会学习到如何创建store，定义reducer来处理actions，以及如何使用connect函数将React组件与Redux store连接起来，实现组件与状态的交互。同时，Redux DevTools也常被用来进行调试，提供了时间旅行调试的...
react+redux+reactRouter+webpack+antd Demo
05-26
在IT行业中，React、Redux、React Router、Webpack和Ant Design是...通过分析和学习这个Demo，开发者可以深入理解这些技术如何协同工作，提升前端开发能力，同时也可以借鉴其项目结构和配置，为自己的项目提供参考。
TS React 项目中使用TypeScript
最新发布
小白小白从不日别的博客
09-18 1552
消息: {this.props.msg}定义复杂数据类型后，可以导出数据类型方便其他组件引入使用。state = {}render() {return (消息: {this.props.msg}姓名：{this.props.user.name}年龄：{this.props.user.age}
了解 React 应用程序中的渲染和重新渲染：它们如何工作以及如何优化它们
忧郁的蛋的专栏
09-14 1148
渲染是 react 根据状态或属性在屏幕上渲染用户界面 (ui) 的过程。当你的组件第一次渲染时，它被称为第一次渲染。
React项目中使用发布订阅模式
zyqgt960812的博客
09-12 699
发布订阅模式（也称观察者模式）是一种管理跨组件通信的有效方式，尤其是在不希望直接依赖于特定组件的情况下。这种模式允许一个对象（发布者）通知多个其他对象（订阅者），而不必知道这些对象是谁或他们在哪里。这有助于解耦组件，使得代码更加模块化和可维护。
ACE之ACE_Reactor_Notify
多看多听多总结
09-14 908
ACE_Reactor_Notify作为Reactor的实现类ACE_Reactor_Impl内部通知来唤醒eventloop。
React电商项目架构与关键代码示例
- React脚手架：使用了`npx create-react-app [-g]`命令，这是创建React项目的一种便捷方式，它会自动安装React、ReactDOM、Babel等依赖。React@17.0.0版本是当前推荐的核心库，而react-dom@17.0.0负责页面渲染，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值