当前位置: 首页 > news >正文

使用create-react-app创建react项目

create-react-app

全局安装create-react-app

npm install -g create-react-app

使用create-react-app创建一个项目

$ create-react-app your-app 注意命名方式Creating a new React app in /dir/your-app.Installing packages. This might take a couple of minutes. 安装过程较慢,
Installing react, react-dom, and react-scripts... 

如果不想全局安装,可以直接使用npx

$ npx create-react-app your-app    也可以实现相同的效果

这需要等待一段时间,这个过程实际上会安装三个东西

  • react: react的顶级库
  • react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom
  • react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面,表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:npm startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd your-appnpm startHappy hacking!

根据上面的提示,通过cd your-app命令进入目录并运行npm start即可运行项目。
生成项目的目录结构如下:

├── README.md                            使用方法的文档
├── node_modules                    所有的依赖安装的目录
├── package-lock.json            锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json                    
├── public                                静态公共目录
└── src                                        开发用的源代码目录

代码的入口是项目目录下的index.js

相关文章:

使用create-react-app创建react项目

create-react-app 全局安装create-react-app npm install -g create-react-app 使用create-react-app创建一个项目 $ create-react-app your-app 注意命名方式Creating a new React app in /dir/your-app.Installing packages. This might take a couple of minutes. 安装过…...

12.串,串的存储结构与模式匹配算法

目录 一. 一些术语 二. 串的类型定义 (1)串的顺序存储结构 (2)串的链式存储结构 三. 串的模式匹配算法 (1)BF算法 (2)KMP算法 四. 案例实现 串(String)---零个或多个任意字符…...

Ribbon:listOfServers ,${variableName:defaultValue}

解释: 配置了address的地址,请求会走address,也就是http://127.0.0.1:8081,通常用户与别的后端服务进行联调设置为其本地服务的ip。 如果address的地址被注释掉,如下面所示,类似这样的占位符${variableName:defaultVa…...

TensorFlow二元-多类-多标签分类示例

探索不同类型的分类模型,使用 TensorFlow 构建二元、多类和多标签分类器。 二元分类 简述 逻辑回归 二元交叉熵 二元分类架构 案例:逻辑回归预测获胜团队 多类分类 简述 Softmax 函数 分类交叉熵 多类分类架构 案例:预测航天飞机…...

【回眸】牛客网刷刷刷!(七)——通信协议之 网络通讯

目录 前言 1、TCP/IP分层模型 2、ARP缓存 3、TCP 协议之所以提供可靠传输,不怕丢包、乱序的主要的原因是 4、以太网数据链路层MII/GMII/RMII/RGMII四种常用接口 5、在以太网通信协议LWIP中,数据包管理机构采用数据结构pbuf 分类包括 6、关于以太网…...

MySQL 安装配置

MySQL 安装配置 MySQL 是最流行的关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司。 MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。 MySQL由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,一般中小型网站的开发都选择MySQL…...

【0824作业】C++ 拷贝赋值函数、匿名对象、友元、常成员函数和常对象、运算符重载

一、思维导图 二、作业&#xff1a;实现关系运算符的重载 关系运算符重载 概念&#xff1a; 种类&#xff1a;>、>、< 、< 、 、!表达式&#xff1a;L#R (L表示左操作数&#xff0c;R表示有操作数&#xff0c;#表示运算符)左操作数&#xff1a;既可以是左值也可以…...

ubuntu 22.04 LTS openai triton 安装

第一种方法&#xff1a; pip install triton 第二种方法&#xff0c;安装最新的版本&#xff1a; pip install -U --index-url https://aiinfra.pkgs.visualstudio.com/PublicPackages/_packaging/Triton-Nightly/pypi/simple/ triton-nightly 第三种方法&#xff1a; git c…...

Android SDK 上手指南||第七章 Java应用程序编程

第七章 Java应用程序编程 如果大家已经对Java非常熟悉&#xff0c;那么不妨直接忽略这部分内容。如果大家的技巧还存在局限或者对Java这种语言只闻其名&#xff0c;那么本文将为各位解答很多在Android开发当中经常遇到的问题。需要注意的是&#xff0c;这篇文章并不能作为Java…...

Vue 框架如何获取数组中的值?

在Vue框架中&#xff0c;获取数组中的值可以通过以下几种方式实现&#xff1a; 1、使用数组索引&#xff1a; 可以使用数组的索引来获取特定位置的值。在Vue中&#xff0c;可以通过在模板中使用差值表达式或指令来获取数组中的值。例如&#xff1a; <div>{{ myArray[0]…...

如何成立一家音频芯片/算法设计公司

一 如何成立一家音频芯片设计公司&#xff1f; 要成立一家音频芯片设计公司&#xff0c;可以按照以下步骤进行&#xff1a; 市场调研&#xff1a;了解音频芯片市场的需求和竞争情况&#xff0c;确定目标客户和定位。 制定商业计划&#xff1a;根据市场调研的结果&#xff0…...

用docker-compose搭建LNMP

docker-compose搭建LNMP 一、compose 的部署1.Docker Compose 环境安装 二、编写Docker Compose1.准备依赖文件,配置nginx2.配置mysql3.配置php4.编写docker-compose.yml5.执行6.查看 一、compose 的部署 &#xff08;1&#xff09;公司在实际的生产环境中&#xff0c;需要使用…...

JavaScript:基本语法(变量与函数的定义与使用)

文章目录 script 标签srcdefer 延迟加载 基本语法定义变量 与 使用变量基本类型typeof 查看变量类型复合类型数组类型定义对象类型定义 函数定义函数使用函数 script 标签 src 和scc一样可以内嵌也可以外src外引。 一般是推荐外引。 <script src"idx.js">&l…...

树莓派4B上安装Gitlab

参考连接&#xff1a; 树莓派上使用 GitLab 搭建专业 Git 服务 | 树莓派实验室 gitlab reconfigure 卡住 ruby_block[wait for redis service socket] action run_芹菜学长的博客-CSDN博客 以及用到了讯飞星火 系统版本信息 1.进入 giblab安装页面gitlab/gitlab-ce - Instal…...

JVM 之字节码(.class)文件

本文中的内容参考B站尚硅谷宋红康JVM全套教程 你将获得&#xff1a; 1、掌握字节码文件的结构 2、掌握Java源代码如何在JVM中执行 3、掌握一些虚拟机指令 4、回答一些面试题 课程介绍 通过几个面试题初始字节码文件为什么学习class字节码文件什么是class字节码文件分析c…...

neo4j函数

1、断言函数 1all()判断是否一个断言适用于列表中的所有元素2all()判断是否一个断言至少适用于列表中的一个元素3none()如果断言不适用于列表中的任何元素&#xff0c;则返回true4single()如果断言刚好只适用于列表中的某一个元素&#xff0c;则返回true5exists()如果数据局库…...

wazuh初探系列一 : wazuh环境配置

目录 方法一&#xff1a;一体化部署 安装先决条件 第一步、安装所有必需的软件包 第二步、安装Elasticsearch 1、添加 Elastic Stack 存储库 安装 GPG 密钥&#xff1a; 添加存储库&#xff1a; 更新源&#xff1a; 2、Elasticsearch安装和配置 安装 Elasticsearch 包…...

【2023】Spring Validation中@NotNull注解、@NotBlank注解介绍以及使用

【2023】Spring Validation中NotNull注解、NotBlank注解介绍以及使用 前言一、简介spring-validation框架的常用注解 二、代码实现添加依赖1、实体举例2、Controller层:3、统一异常处理4、结果返回验证通过返回验证失败返回 前言 平常我们在编写代码的时候总需要很多if判空&am…...

nodejs+vue养老院管理系统 u1yrv

本智慧养老中心管理系统是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了老人信息和管理员这两者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可…...

高效PDF校对:释放高质量内容的力量

在数字化世界中&#xff0c;内容是王者。随着企业和个人越来越依赖数字文档进行沟通、分享和创新&#xff0c;我们在PDF中传递的内容的质量变得至关重要。在这里&#xff0c;我们将探索高效的PDF校对如何帮助您释放高质量内容的真正潜力。 超越仅仅是“正确” 当我们谈论PDF校…...

从零构建私有化AI智能体中枢:Comobot部署、编排与生产实践

1. 项目概述&#xff1a;从零构建你的私有化智能体中枢如果你和我一样&#xff0c;对市面上的AI助手既爱又恨——爱其智能&#xff0c;恨其不可控、数据隐私的担忧以及无法深度融入自己的工作流——那么&#xff0c;Comobot这个项目或许能让你眼前一亮。它不是一个简单的聊天机…...

FPG财盛国际:数字化能力升级的全面观察

FPG财盛国际&#xff1a;数字化能力升级的全面观察在评估金融服务平台时&#xff0c;监管合规、技术能力、客户服务等维度构成了重要的观察方向。FPG财盛国际作为业内较为活跃的服务机构&#xff0c;其在这些方面的实践具有一定的参考价值。本文将围绕评测视角&#xff0c;对其…...

终极开源ZPL虚拟打印机:告别物理设备,高效调试条码标签

终极开源ZPL虚拟打印机&#xff1a;告别物理设备&#xff0c;高效调试条码标签 【免费下载链接】Virtual-ZPL-Printer An ethernet based virtual Zebra Label Printer that can be used to test applications that produce bar code labels. 项目地址: https://gitcode.com/…...

STM32 IAP方案怎么选?内置DFU vs 自写Bootloader,从F1到F4系列实战对比

STM32 IAP方案深度对比&#xff1a;从芯片选型到实战落地 当产品需要支持远程固件更新时&#xff0c;工程师们往往面临一个关键抉择&#xff1a;是采用ST官方内置的DFU方案&#xff0c;还是自行开发Bootloader&#xff1f;这个看似简单的选择背后&#xff0c;实则牵涉到芯片选型…...

5分钟搞定:抖音无水印批量下载工具终极应用指南

5分钟搞定&#xff1a;抖音无水印批量下载工具终极应用指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖…...

基于Vue 3与TypeScript的Dify AI聊天前端开发与部署实战

1. 项目概述&#xff1a;一个现代化的Dify AI聊天前端 如果你正在寻找一个开箱即用、界面美观且功能完整的Dify AI聊天前端&#xff0c;那么LeeAirQ/Dify-Web这个项目值得你花时间了解一下。作为一个长期在AI应用层折腾的开发者&#xff0c;我见过太多后端强大但前端简陋的AI项…...

WinRAR分卷压缩 vs 7-Zip分卷压缩:哪个更适合你?一次讲清区别、选型和实操

WinRAR分卷压缩 vs 7-Zip分卷压缩&#xff1a;深度对比与场景化选型指南 在数字文件传输与存储的日常场景中&#xff0c;大文件处理始终是个绕不开的痛点。无论是设计师需要发送PSD源文件给客户&#xff0c;还是开发人员要共享虚拟机镜像&#xff0c;当文件体积突破邮箱附件限…...

Java-Thread-Affinity源码解析:深入理解IAffinity接口的跨平台设计

Java-Thread-Affinity源码解析&#xff1a;深入理解IAffinity接口的跨平台设计 【免费下载链接】Java-Thread-Affinity Bind a java thread to a given core 项目地址: https://gitcode.com/gh_mirrors/ja/Java-Thread-Affinity Java-Thread-Affinity是一个专注于线程亲…...

Python开发者如何构建个人技能库:从代码片段到高效编程

1. 项目概述&#xff1a;一个Python开发者的“兵器库”在Python开发这条路上摸爬滚打久了&#xff0c;你会发现一个有趣的现象&#xff1a;高手和新手之间的差距&#xff0c;往往不在于对某个框架的掌握深度&#xff0c;而在于对“工具”和“技巧”的运用效率。这里的“工具”不…...

五分钟用Python为嵌入式应用接入Taotoken大模型服务

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 五分钟用Python为嵌入式应用接入Taotoken大模型服务 为嵌入式设备或物联网项目添加智能对话能力&#xff0c;可以极大地提升产品的…...