【React】搭建React项目

article/2025/7/29 4:14:19

最近自己在尝试搭建react项目,其实react项目搭建没有想象中的那么复杂,我们只需要使用一个命令把React架子搭建好,其他的依赖可以根据具体的需求去安装,比如AntDesignMobile的UI框架,执行npm install antd-mobile --save命令。
有两种搭建方式:
方式一:

1.全局安装React脚手架
npm install -g create-react-app
2.检查脚手架是否安装成功
create-react-app -v
3.创建项目
create-react-app 项目名称  (js)
create-react-app 项目名称 --template Typescript  (ts)
4.在vscode中打开并启动项目
npm run start

此方法执行到的时候有可能出现bash: create-react-app command not found的报错,可以采用第二种方式

方式二:
这种是直接使用npx创建项目,可以解决方式一的报错,即create-react-app不是内部命令的错误。npx是nodejs的内置命令行,允许在不全局安装包的情况下,直接运行包的命令

npx create-react-app react-demo

在这里插入图片描述
在这里插入图片描述
react环境搭建好之后可以按照具体的开发需求使用npm/cnpm安装需要的依赖。


http://chatgpt.dhexx.cn/article/TL7xHnJk.shtml

相关文章

react入门:利用脚手架搭建react项目

步骤1:安装node,查看node和npm版本 node --version npm --version步骤2:全局安装create-react-app npm install -g create-react-app步骤3:查看create-react-app版本 npm info react步骤4:创建react项目 create-react-app rea…

react打包服务器文件,react项目搭建及打包发布

一、创建项目 1.npm install -g create-react-app; 2.create-react-app my-app(my-app为项目名字); 这样一个react项目就初始化好了,运行npm start启动项目可查看,接下来可以配置路由。 二、多页面路由 1.安装React Router React …

React项目搭建及基本介绍

React的项目搭建 项目搭建比较简单,先安装react脚手架,然后创建项目就完事了 第一步安装node(基本环境) 第二步安装webpack(基本环境) 直接敲命令运行即可 npm install -g webpack 第三步配置淘宝镜像 …

从0到0.1:最简单的React项目搭建

本文原创地址:http://blog.csdn.net/zhou_xiao_cheng/article/details/54677689,未经博主允许不得转载。 自从React火遍大江南北后,相信很多人都在加入到React队伍的路上,但是如何从零开始搭建一个React项目呢?本文将为大家介绍如何快速简单地搭建一个新的React项目。 在…

React + Ts项目搭建

一、安装reactts npx create-react-app my-app --template typescript二、安装eslint代码检测 一个好的项目必须有一个规范,所以得安装eslint代码检测 yarn add eslint npx eslint --initeslint初始化后会出现三个项目,根据项目而定 1、使用什么样的…

搭建react项目 搭建ts react项目 使用vite搭建react项目

创建react 项目 注意: 网上有一些生成react 的方法,但是也有一些是过时的。 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手架和 vue 的 vue-cli是一样的,都可以全局安装,命令: npm…

搭建React项目,超简单教程

步骤 前言一、安装create-react-app二、使用步骤1.创建项目2.运行项目3.文件目录 总结 前言 最近公司闲的无聊,刚好之前学的React,至今还未搭建过一个React项目,借这空闲时间来练练手,从0开始搭建React项目,以此来记录…

React项目框架搭建

一、.前置环境安装 确认已安装安装Node.js “在项目开发中需要使用NPM包管理工具,而NPM运行在node.js上面, 所以需要先安装node.js。通过npm可以很方便的安装、共享、分发代码,管理项目依赖关系;通过运行“npm install 包名”几乎…

react项目的搭建与启动

react项目的搭建与启动 准备工作(环境的搭建)react项目创建与启动常用插件安装Sass/Scss安装 准备工作(环境的搭建) (已经准备好的这一步可以跳过) 1.安装Node.js(安装一直选择下一步就行&…

react项目搭建(基础学习笔记)

react项目搭建(基础学习) 安装 局部安装 1、npm init -y或yarn init -y初始化项目 2、全局安装creact-react-app。使用npm install -D create-react-app或yarn add -D create-react-app。使用npx create-react-app --version查看安装的版本号。 3、…

React项目搭建的基本流程

一,版本号 React不同版本之间语法差别还是挺大的,这里放上我项目中的版本号仅供参考 二,项目目录搭建 通过脚手架创建项目: npx-create-react-app 项目名称 1.基本的目录结构 先进行项目初始化,删除项目原始的样式…

react项目搭建--相对较全面

前言:简单记录一下第一次搭建react项目框架,之前只是在已搭建好的框架内去开发实现项目,没有自己动手搭建过,亲自动手实际操作,还遇到挺多问题的。参考了不少文献,帮助我解决并完成整个项目搭建的文献&…

从零开始搭建react项目(一)

自学react有一段时间了,官网文档基础的看了一遍,然后便把之前公司做的一个vue项目用react搭建了下,顺便整理下一些知识点。 项目大概效果: 一、利用create-react-app搭建项目 1、全局安装create-react-app,执行&…

React项目搭建

一、创建项目 1、cmd切换到目标文件夹 2、初始化项目 npx create-react-app init-mobile 3、切换到对应目录根据提示启动项目 二、配置项目文件目录 调整项目中src目录结构如下: 三、引入组件库antd-mobile 1、安装 npm install --save antd-mobilenext 2、在…

思科路由器开启DNS解析

一、DNS服务端、DNS中继 R2(config)# interface FastEthernet0/0 R2(config-if)# ip address 192.168.1.254 255.255.255.0 R2(config)# interface FastEthernet0/1 R2(config-if)# ip address 22.1.1.2 255.255.255.0 R2(config)# router ospf 1 R2(config-router)# net…

IIS DNS服务器搭建

1——IIS(因特网信息服务),IIS意味着你能发布网页,在没有配置服务器之前就用IP访问。步骤步骤 开始---》控制面板---》添加或删除程序---》双击应用程序服务器---》选择IIS、控制台 我这里,顺便双击了网络服务---》添加…

Wireshark实验 - DNS

Wireshark实验 - DNS 官方英文文档:Wireshark_Intro_v6.01.pdf Wireshark 实验: DNS v6.01 《计算机网络:自顶向下方法(第6版)》补充材料,J.F. Kurose and K.W. Ross “不闻不若闻之,闻之不若见之&#…

内网DNS重要使用作用

DNS服务简介: DNS(Domain Name System–域名系统),是因特网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。是一个应用层的协议DNS使用TCP和UDP端口53。 DNS是一个分布式数据库,命名系统采用层次的逻辑结构…

DNS和SMTP

目录 SMTP 因特网中的电子邮件 ​一个简单的例子 什么是SMTP SMTP的缺点 用SMTP传输一个邮件的过程 SMTP是如何将一个报文从发送邮件服务器传送到接收邮件服务器的。 SMTP与HTTP的区别 共同点 不同点 邮件报文格式 邮件访问协议 POP3 IMAP 基于Web的电子邮件 D…

什么是DNS?为什么选择UDP?详细的DNS解析过程?

DNS DNS1、DNS是什么?2、因特网的域名结构3、缓存(Cache)4、 DNS请求实例 DNS 1、DNS是什么? DNS ( Domain Name Systme)简单理解就是解析器、域名服务器的组合,比如大家访问知乎,会输入http://www.zhihu.com&#x…