如何使用React脚手架新建一个React项目

2023-10-29

1. react脚手架

  1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

  1. 包含了所有需要的配置(语法检查、jsx编译、devServer…)

  1. 下载好了所有相关的依赖

  1. 可以直接运行一个简单效果

  1. react提供了一个用于创建react项目的脚手架库: create-react-app

  1. 项目的整体技术架构为: react + webpack + es6 + eslint

  1. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2. 创建项目并启动

第一步,全局安装:npm i -g create-react-app

第二步,切换到想创项目的目录,使用命令:create-react-app hello-react

第三步,进入项目文件夹:cd hello-react

第四步,启动项目:npm start

3.安装axios

npm i axios

4.安装react-router-dom(路由)

npm i react-router-dom@5 (2021年11月之前是5版本)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用React脚手架新建一个React项目 的相关文章

随机推荐

  • oracle优化中的常用语句

    查看session使用数 或者称建立的连接数 select count from v session 1 2 查看oracle锁 SELECT substr v lock sid 1 4 SID substr username 1 12 U
  • 专利与论文-6:《专利权利要求书》的撰写与注意事项

    前言 专利权利要求书 在对于专利而言 怎么说它的重要性都不过分 它直接关系到你的专利的权利在哪里 当发生专利侵权的时候 如何保护自己的利益 如果说 专利权利说明书 是专利的技术性文档 那么 专利权利要求书 就是法律性文档 它定义了 哪些技术
  • prefetch 和 preload 及 webpack 的相关处理

    使用预取和预加载是网站性能和用户体验提升的一个很好的途径 本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法 并使用 webpack 进行实现 Link 的链接类型 标签的 rel 属性可以定义链接类型 pref
  • 60黑马QT笔记之SQLite

    60黑马QT笔记之SQLite 1 与MYSQL的区别 1 SQLite是本地数据库 不需要和MYSQL一样需要连接 2 插入时不支持自动增长 所以主键例如id 在输入时需要自己去控制 3 使用时需要先提前建好后缀为xxx db的文本文件
  • ubuntu 20.04安装开发环境总结_安装python

    Ubuntu 20 04 是一款主要面向开发人员的操作系统之一 与此同时 它还支持多种开发环境和工具的使用 但是因为对市面上各种软件的支持没有window那样友好 所以对ubuntu系统安装配置各种环境的问题做了个总结 安装 PyCharm
  • C/C++入门秋招知识点八股文

    1 C C 关键字 1 1 static 静态 变量 在C中 关键字static是静态变量 静态变量只会初始化一次 然后在这函数被调用过程中值不变 在文件内定义静态变量 函数外 作用域是当前文件 该变量可以被文件内所有函数访问 不能被其他文
  • 38.求解简单表达式。输入一个形式如“操作数  运算符  操作数”的四则运算表达式,输出运算结果,要求使用switch语句编写

    38 求解简单表达式 输入一个形式如 操作数 运算符 操作数 的四则运算表达式 输出运算结果 要求使用switch语句编写 include
  • 高速缓存(cache)原理

    高速缓存 cache 概念和原理 cache基本思想 cache 存储器 Cache memories 在处理器附近增加一个小容量快速存储器 cache 基于SRAM 由硬件自动管理 cache基本思想 频繁访问的数据块存储在cache中
  • 前端和后端终极学习视频(百度网盘资料)

    1 ps 链接 https pan baidu com s 1mjYbcJA密码 pqdt2 HTML5 CSS3从入门到精通 iso链接 https pan baidu com s 1mjYbcJA密码 gdyw3 Javascript视
  • 视频去抖动稳像总结

    下面转载了两篇别的文章 都是传统算法做的 后面将会持续更新 原文链接 https blog csdn net update7 article details 107864986 1 背景 点播 直播行业的蓬勃发展 使用户生产视频 UGC 逐
  • 使用sqoop命令报错ERROR mapreduce.ExportJobBase: Export job failed ERROR tool.ExportTool: Error during exp

    如图所示 仔细查看错误信息会发现有下面一条 2022 07 10 20 17 39 786 INFO mapreduce Job Job job 1657447073157 0042 running in uber mode false 2
  • 用Android NDK编译FFmpeg错误解决

    转载 http abitno me compile ffmpeg android ndk 编译出来只有15k 后来借鉴这篇文章 http www cnblogs com shaobin0604 archive 2011 08 05 2128
  • 【译】Nodejs最好的ORM - TypeORM

    TypeORM github https github com typeorm typeorm 这篇译文是从TypeORM github上的使用说明上翻译过来的 已经提交PR并merge到库中了 TypeORM是一个采用TypeScript
  • Angular引入node_modules里面的css文件出错Module build failed:TypeError:URL.startsWith is not a function

    问题困扰了好几天 原来是路径的问题 1 目录结构如下 2 webpack配置 include path join process cwd src styles css test css use style loader loader css
  • Hibernate Annotation (Hibernate 注解)

    进入 http www hibernate org 说明文档 英文 http docs jboss org hibernate annotations 3 5 reference en html single 中文 http docs jb
  • 轻量级网络:DenseNet

    目录 Insight DenseNet ResNets Dense connectivity Composite function Pooling layers Growth rate Bottleneck layers Compressi
  • CSS深度选择器(穿透)

    问题 vue compiler sfc v deep usage as a combinator has been deprecated Use deep inner selector 报错 修改 正确 CSS深度选择器 穿透 1 styl
  • JDK安装及oracle安装

    这里写自定义目录标题 JDK安装 虚拟机win03中安装Oracle JDK安装 1 jdk安装 解压安装包进行安装 记住安装地址 不要安装在含有中文的文件夹 若忘记则win r键 输入cmd 进入命令行模式 输入 where java 查
  • Docker的自定义镜像

    文章目录 五 自定义镜像 五 自定义镜像 回顾一下 什么是镜像 答 镜像是将应用程序及其所需要的系统函数库 环境 依赖 配置打包而成 镜像的结构是分层的 每一层称为一个Layer 其中 最底层包含基本的系统函数库 环境变量 文件系统 的层我
  • 如何使用React脚手架新建一个React项目

    1 react脚手架 xxx脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置 语法检查 jsx编译 devServer 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项