React创建项目(保姆级讲解,配置文件详细介绍)

这篇具有很好参考价值的文章主要介绍了React创建项目(保姆级讲解,配置文件详细介绍)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

说在前面的话

前期准备

一、React项目创建

二、配置文件详解

三、自定义组件-实现简单计算器demo

末尾


说在前面的话

        由于开始学习React框架,这里“简单”记录一下react通过脚手架创建项目的过程,并演示了一个计算器的demo。

前期准备

        在开始创建项目前,确认是否安装了node.js运行环境,打开电脑终端输入node -v即可,若没有版本号,则麻烦大家出门右转,然后伸出智慧的右手搜一下如何安装node.js,一定会有很多详细教程的。

node -v

创建react项目,React,react.js,前端,javascript,vscode

一、React项目创建

1.先创建一个初始文件夹,并在当前路径下打开终端

创建react项目,React,react.js,前端,javascript,vscode

ps:我这里使用cmder打开终端,使用自带的cmd打开终端也是可以的。 

2.用脚手架创建初始项目

命令格式:npm create-react-app xxxxx(项目名称)

npx create-react-app calculator-app

创建react项目,React,react.js,前端,javascript,vscode

ps:项目名称小写,不要出现中文

>>>项目创建成功,则会有一些提示信息

创建react项目,React,react.js,前端,javascript,vscode

3.进入项目文件夹,启动项目

cd calculator-app
npm start

创建react项目,React,react.js,前端,javascript,vscode

>>>项目成功运行,则根据地址访问项目

创建react项目,React,react.js,前端,javascript,vscode

>>>项目运行效果

创建react项目,React,react.js,前端,javascript,vscode

二、配置文件详解

1.用vscode打开项目

code .

(前面启动项目的时候就打开了,不信回去看看)

 创建react项目,React,react.js,前端,javascript,vscode

 2.项目配置文件详解

创建react项目,React,react.js,前端,javascript,vscode

node_modules:存放项目所依赖的一些第三方包文件

public:静态资源文件夹

  • favicon.ico:导航图标
  • index.html项目首页的html模版
  • logo192.png&logo512.png两个logo图片
  • manifest.json应用加壳配置文件,在手机上描述我们应用程序的json文件
  • robots.txt爬虫协议文件

src:源码文件夹

  • App.cssApp组件的样式
  • App.jsApp组件
  • App.test.js自动化测试文件,用于给App做测试
  • index.css全局样式
  • index.js入口文件,所用组件都会通过index.js载入
  • logo.svgreact的一个标志文件,sug文件是纯粹的XML,保证了在放大缩小时图像不失真
  • reportWebVitals.js导入了一个web-vitals的第三方库,用来检查应用程序的性能
  • setupTests.js:从Jest-dom导入匹配器,在进行测试时使用

其它文件

  • .gitignore:git的一个文件,在这里可以配置不想提交到版本库里的文件
  • package-lock.json:项目安装包的版本号
  • package.json:存放react的一些依赖和指令
  • README.md:项目的介绍文件,运用markdown标记语言编写,在github等开源代码网站上,项目常用.md文件来进行介绍

三、自定义组件-实现简单计算器demo

1.基础配置调整:删除、添加、下载组件包

  • 首先删除一些我们不需要的文件
  • 其次编写自定义的组件和样式
  • 下载一个react的触摸组件
npm install react-point

创建react项目,React,react.js,前端,javascript,vscode

ps:这里首先在原本的cmder中按ctrl+c退出,然后在vscode中按ctrl+`打开终端

2.修改文件

首先修改index.html文件,在挂载点这个div外面再套一层,至于作用,且听我细细道来

创建react项目,React,react.js,前端,javascript,vscode

然后修改一下全局样式index.css文件,添加样式让计算器组件位于屏幕中间

创建react项目,React,react.js,前端,javascript,vscode

再然后修改index.js文件,引入+渲染自定义组件

创建react项目,React,react.js,前端,javascript,vscode

最后使用我们前面提到的npm start命令启动项目

npm start

创建react项目,React,react.js,前端,javascript,vscode

>>>太棒了,项目运行成功,通过地址访问一下吧

创建react项目,React,react.js,前端,javascript,vscode

>>>运行效果

创建react项目,React,react.js,前端,javascript,vscode

末尾

         关于React创建项目的宝宝级教程就介绍到这了,React框架的深入学习,还需要我们继续探索,一起加油吧~

ps:Last but not least,放几个下载地址,至于安装和使用的详细教程,就劳请各位出门右转,伸出智慧的右手搜一下吧,一定会有详细教程的,啦啦啦。

Cmder下载地址:Cmder

Node.js下载地址:Node.js

Vscode下载地址:Vscode

Calculator组件中的js和css源码https://pan.baidu.com/s/1OxzzhETq4MOKuJ4Amujt1A?pwd=hcgv%C2%A0%E6%8F%90%E5%8F%96%E7%A0%81%EF%BC%9Ahcgv文章来源地址https://www.toymoban.com/news/detail-757842.html

到了这里,关于React创建项目(保姆级讲解,配置文件详细介绍)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

    Vite官方网站:Vite | 下一代的前端工具链  Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。  兼容性注意 Vite 需要 Node.js 版本 14.18+,16+。然

    2024年02月14日
    浏览(51)
  • 保姆级教程 从零配置nodejs环境并用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp

    本教程后面部分(用命令行创建基于vue3的uniapp项目+Webstorm配置uniapp)适合习惯使用vscode或Webstorm等(或者说不习惯HBuilder X)的人参考,如果习惯使用HBuilder X,还是建议使用HBuilder X来搭建uniapp项目,会方便很多。 目录 1. 配置node.js 1.1 下载并安装 1.2 配置环境变量 1.3 修改安装

    2024年02月20日
    浏览(48)
  • Java 配置文件的使用(附代码详细讲解)

    Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍Java在配置文件中的试用,在idea里MySql数据库连接信息为什么要放在配置文件中?怎么读取配置文件信息?以及部分理论知识 🍉 欢迎点赞  👍  收藏  ⭐ 留言评论  📝 私信必回哟 😁 🍉 博主收将持续更新学习记录获,友友们有任

    2024年02月22日
    浏览(38)
  • 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置axios,utils工具包,vue.fonfig.js配置项 (下)

    这里是创建移动端项目 【Vue】Vue2.x创建项目全程讲解,保姆级教程,手把手教,Vue2怎么创建项目(上) 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,接上一篇创建Vue2项目(中) 【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置ax

    2024年02月13日
    浏览(52)
  • 【框架篇】Spring Boot核心介绍及项目创建(详细教程)

    Spring Boot 是基于 Spring 开发的一种轻量级的全新框架,不仅继承了 Spring 框架原有的优秀特性,而且还通过简化配置来进一步简化了 Spring 应用的整个搭建和开发过程。通过 Spring Boot ,可以轻松地创建独立的,基于生产级别的和基于 Spring 的应用程序。 Spring 的诞生是为了简化

    2024年02月16日
    浏览(41)
  • 【SpringBoot快速入门】(2)SpringBoot的配置文件与配置方式详细讲解

    之前我们已经学习的Spring、SpringMVC、Mabatis、Maven,详细讲解了Spring、SpringMVC、Mabatis整合SSM的方案和案例,上一节我们学习了SpringBoot的开发步骤、工程构建方法以及工程的快速启动,从这一节开始,我们开始学习SpringBoot配置文件。接下来,我们逐步开始学习,本教程所有示例

    2024年02月03日
    浏览(37)
  • SpringBoot(项目创建使用+配置文件+日志文件)

    目录 1. Spring Boot 项目创建 2. 写一个 Hello World 并运行 3. 配置文件的作用及格式 4. properties 配置文件的基本语法  5. 读取配置文件 6. yml 配置文件说明 7. properties 和 yml 的区别 8. SpringBoot 日志文件 8.1 日志的作用 8.2 自定义日志打印 8.3 日志的级别 8.4 日志持久化 8.5 更简单的实现

    2024年01月22日
    浏览(55)
  • GitHub教程:最新如何从GitHub上下载文件(下载单个文件或者下载整个项目文件)之详细步骤讲解(图文教程)

    在这篇博客中,我们将深入探讨如何从GitHub下载文件或整个项目。无论你是编程新手,还是资深开发者,本文都将提供简单易懂的指导,帮助你轻松掌握下载技巧。涵盖从单个文件下载到整个项目的下载,我们的目标是确保每位读者都能通过本文轻松实现从GitHub的下载需求。

    2024年04月10日
    浏览(87)
  • RT-Thread Studio使用经验——项目创建及文件介绍

    1.创建项目时会有两种选择 RT Thread项目 和 RT Thread Nano项目 ,RT Thread项目体量比较大,包含了RT Thread的大部分功能,比如应用层开发,驱动开发,图形界面开发等,生成程序的大小大约在50kb左右; RT Thread Nano属于轻量级的RT Pthread工程开发,只包含了基础的裸机开发的部分库文

    2024年02月08日
    浏览(41)
  • JWT详细讲解(保姆级教程)

    1.什么是JWT JSON Web Token (JWT)是一个开放标准(RFC 7519) ,它定义了一种紧凑和自包含的方式, 用于作为 JSON 对象在各方之间安全地传输信息 。此信息可以进行验证和信任,因为它是经过数字签名的。JWT 可以使用机密(使用 HMAC 算法)或使用 RSA 或 ECDSA 的公钥/私钥对进行签名。 虽

    2024年02月13日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包