创建react项目

已于 2024-09-27 14:38:14 修改
阅读量398 收藏 8
点赞数 3
文章标签： react.js 前端 前端框架
于 2024-09-26 19:51:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52813800/article/details/142566750
版权

目录

新建空白文件夹

启动项目

修改配置文件

安装antd-mobile

按需导入组件

配置基础路由

安装

导入路由器

创建页面

页面引入

新建空白文件夹

进入文件夹-》cmd界面，输入以下命令

npx create-react-app 项目名

出现下图，则创建成功

若3000端口被占用就会出现提示，直接填y即可

启动项目

cd 项目名

npm start

根据上图的提示，进入项目的根目录

启动成功

*启动成功的cmd命令界面不要关闭

修改配置文件

打开项目的src，删除不需要的文件，以及创建assets、component、utils和pages文件夹

安装antd-mobile

快速上手 - Ant Design MobileEssential UI blocks for building mobile web apps.icon-default.png?t=O83Ahttps://mobile.ant.design/zh/guide/quick-start/打开terminal终端

按需导入组件

import { Button } from 'antd-mobile'        //App.js

配置基础路由

安装

npm install react-router-dom

导入路由器

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'

创建页面

页面引入

*注意<Router>、<Roures>、<Roure>位置

犯困的小山竹觉醒了
关注
【React】9、使用create-react-app（CRA）创建react项目
Coding and studying
06-01 1068
第一步，全局安装：第二步，切换到想创项目的目录，使用命令：第三步，进入项目文件夹：第四步，启动项目：你当然可以选择不全局安装你可以直接执行这样可以不安装create-react-app而直接创建你的脚手架项目你还可以执行创建一个支持TS语言的react脚手架项目。当看到这个界面在你的浏览器里自动打开的时候，你的脚手架项目就已经创建好了～ ---- 静态资源文件夹src ---- 源码文件夹App.css -------- App组件的样式App.test.js ---- 用于给App做测试index.css
脚手架创建react项目流程
We_990528的博客
06-28 655
注意: 在使用 create-react-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那,因为资源还是使用了 npm下载的, 我们可以换成淘宝的资源, 执行指令。2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入 代替 import './xxx.css'1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替 Home.css。
React---使用react脚手架搭建项目
lelara的博客
04-21 916
一、使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: re...
React学习之路 -- React脚手架搭建项目
赫子子的博客
11-23 613
前言：写此系列博客的目的是对自己所学的react知识点的总结和巩固，以及自己对react相关知识点的个人见解，希望能帮助到还并不会使用react的开发者入门react react官方文档 react中文文档 react社区 项目搭建 ...
「记录篇」我是如何一步步为公司搭建react项目脚手架的
最新发布
2401_83384536的博客
07-07 858
Redux Toolkit[12] 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，强烈建议你使用它。优点如下：优化 Redux 中间件、各种配置以及书写目录规范等，简化操作，例如取代 Redux 中很恶心的 types、actions、reducers；React-Redux Hook API 取代麻烦的connect和mapState；
React脚手架搭建及创建React项目
热门推荐
蜡笔love小新的博客
10-26 2万+
1.安装node.js和npm:    可自行到node官网下载，下载node完成后，npm也会自行下载完成。 2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。   3.安装好的npm的源默认是国外的源，会因为网络原因导致执行npm操作有延时，我们可以切换npm的源为淘宝的源镜像。    执行 npm config set registry h...
React脚手架搭建项目
weixin_45678402的博客
06-01 1707
React提供了一个用于创建react项目的脚手架库：create-react-app 一、项目的搭建 第一步： 全局安装 npm i -g create-react-app 第二步： 切换到准备创建项目的目录，使用命令：create-react-app hello-react 第三步： 进入项目文件夹：cd hello-react 第四步： 启动项目：npm start / yarn start 二、脚手架文件的介绍 public——静态资源文件夹 favicon.icon——网站页签图标 index.
使用IDEA创建的一个简单的react项目
07-25
- 首先，确保已经安装了Node.js，因为创建React项目需要用到npm（Node包管理器）。 - 打开IDEA，选择"Create New Project"，在左侧的列表中找到"JavaScript"，然后选择"React"模板。 - 按照向导设置项目名称、...
创建React项目
m0_68459717的博客
04-22 1601
win+R键打开cdm npm install -g create-react-app 全局安装 D:\webstormworkspace>npm install -g create-react-app npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. change...
创建react项目时遇到的报错
qq_45429539的博客
02-04 4531
创建react项目时遇到的报错 百度到的第一个方法： 1.执行npm install -g create-react-app全局安装 2.执行npx create-react-app myapp创建项目 结果控制台打印： (node:18924) ExperimentalWarning: The fs.promises API is experimental You are running `create-react-app` 4.0.1, which is behind the latest relea
React使用脚手架搭建项目
friend_ship的博客
09-24 134
安装脚手架 npm install create-react-app -g 创建项目 create-react-app 项目名称
【从0搭建react后台管理】1.react脚手架搭建项目
永远不要忘记为何至此
03-01 138
create-react-app创建项目
通过react脚手架搭建react项目
qq_36154659的博客
03-23 372
步骤一： 安装react脚手架 create-react-app （确保nodejs和npm是可用的） npm install -g create-react-app 等待安装完成后可以打开使用cmd输入以下命令react脚手架是否可用 create-react-app 如果可用则会呈现如下的结果，之后就可以用安装好的脚手架进行react的创建了 如果该命令不可用就需要检查当前的环境变量是否...
React之脚手架快速搭建项目
鱼记的博客
06-10 306
React之脚手架快速搭建项目 环境搭建 下载安装Node.js (nodejs.cn) 进入cmd 使用 npm install -g create-react-app 搭建一个全局的脚手架 项目搭建 cd 到要搭建项目的文件夹 create-react-app 项目名 搭建项目 cd 项目名 进入项目文件夹 npm start 启动项目 快速搭建React项目完成 浏览器进入 http://localhost:3000/ 查看项目 ...
react简单入门-脚手架搭建项目
m0_46694056的博客
12-02 469
*前言：其实步骤和vue没什么区别，大致相同，语法不通罢了。 1、安装脚手架 控制台输入如下命令，全局安装react脚手架，-g参数就是代表的全局的意思，会基础的npm都应该知道。 npm install -g create- react-app 稍等片刻，发现有类似如下显示，就说明安装成功了 说在某某某文件夹下添加成功某个包，用时多少多少，当然我这里用的是nvm，可能信息有点不一样，但翻译翻译就可以了。 2、使用脚手架创建项目 在控制台输入如下命令： create-react-app dome01
React 脚手架创建项目
FellAsleep的博客
04-13 2993
意义 现代的 Web 应用要考虑的问题很多，除了编写业务代码之外，还要考虑代码规范、预编译、压缩合并、打包上线等工作，需要有一套完整的解决方案来辅助我们快速开发，而 React 脚手架 就是这么一套完整的解决方案，它零配置，开箱即用，让我们从繁杂的 Webpack 配置当中解脱出来，更关注于业务本身。 使用 使用 create-react-app 这个命令行工具，它是 React 官方团队出的一个构建 React 应用的脚手架工具。 方法一 全局安装npm i -g create-react-app或者y
React脚手架搭建
weixin_46051988的博客
04-25 290
创建项目并搭建 第一步：全局安装：npm i -g create-ract-app 第二步：切换到想创建项目的目录，使用命令：create-react-app hello-react 第三步：进入此昂木文件夹:cd hello-react 第四步：启动项目：npm start
脚手架搭建react项目
qq_33203555的博客
11-06 8134
react和vue,angular一样也有脚手架。这大大方便了我们的开发。react的脚手架是create-react-app。脚手架下载使用npm下载create-react-app运行如下命令：npm install -g create-react-app国内npm一般下载比较慢或者是常出现下载失败的情况，我们可以指定下载的仓库：npm install -g create-react-app -
webstorm创建react项目
09-13
在WebStorm中创建React项目，可以按照以下步骤进行操作： 1. 打开WebStorm，并点击主界面的 "Create New Project" 或者 "New Project" 按钮。 2. 在弹出的对话框中，选择左侧的 "React" 并点击 "Next"。 3. 在下一个页面中，输入项目名称和选择项目存储路径，然后点击 "Next"。 4. 在下一个页面中，选择使用 "npx create-react-app" 创建项目，确保 "Use npx" 选项被选中。然后点击 "Next"。 5. 最后，在下一个页面中，选择需要包含的附加插件或者模板。你可以根据需要选择是否包含ESLint、TypeScript等插件。完成后，点击 "Finish"。 6. WebStorm将会自动为你创建React项目，安装相关依赖，并打开项目。 现在，你已经成功在WebStorm中创建了一个React项目。你可以开始编写React代码并运行你的应用程序了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值