当前位置: 首页 > 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

http://www.lryc.cn/news/140217.html

相关文章:

  • 12.串,串的存储结构与模式匹配算法
  • Ribbon:listOfServers ,${variableName:defaultValue}
  • TensorFlow二元-多类-多标签分类示例
  • 【回眸】牛客网刷刷刷!(七)——通信协议之 网络通讯
  • MySQL 安装配置
  • 【0824作业】C++ 拷贝赋值函数、匿名对象、友元、常成员函数和常对象、运算符重载
  • ubuntu 22.04 LTS openai triton 安装
  • Android SDK 上手指南||第七章 Java应用程序编程
  • Vue 框架如何获取数组中的值?
  • 如何成立一家音频芯片/算法设计公司
  • 用docker-compose搭建LNMP
  • JavaScript:基本语法(变量与函数的定义与使用)
  • 树莓派4B上安装Gitlab
  • JVM 之字节码(.class)文件
  • neo4j函数
  • wazuh初探系列一 : wazuh环境配置
  • 【2023】Spring Validation中@NotNull注解、@NotBlank注解介绍以及使用
  • nodejs+vue养老院管理系统 u1yrv
  • 高效PDF校对:释放高质量内容的力量
  • 【Git游戏】提交的技巧
  • SQL注入读写文件
  • stm32之12.如何使用printf打印输出
  • 敏感挂载hotplug容器逃逸分析与复现
  • RTThread学习有关的Keil的两个符号 $Sub$ $main 与 $Super$ $main
  • Python实现企业微信群告警
  • python基础教程:re模块用法详解
  • 基于亚马逊云科技无服务器服务快速搭建电商平台——部署篇
  • git介绍+集成到IDEA中+使用gitee
  • 【java】【项目实战】[外卖四]分类管理业务开发
  • 【Go 基础篇】Go语言包详解:模块化开发与代码复用