第十六章 脚手架文件介绍

这篇具有很好参考价值的文章主要介绍了第十六章 脚手架文件介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

react项目脚手架文件目录

public ---- 静态资源文件夹
|-------favicon.icon ------ 网站页签图标
|-------index.html -------- 主页面
|-------logo192.png ------- logo图
|-------logo512.png ------- logo图
|-------manifest.json ----- 应用加壳的配置文件
|-------robots.txt -------- 爬虫协议文件

src ---- 源码文件夹
|-------App.css -------- App组件的样式
|-------App.js --------- App组件
|-------App.test.js ---- 用于给App做测试
|-------index.css ------ 全局样式
|-------index.js ------- 入口文件
|-------logo.svg ------- logo图
|-------reportWebVitals.js ---- 页面性能分析文件(需要web-vitals库的支持)
|-------setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹的路径 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!-- 开启理想视口,用于做移动端网页的适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定网页添加到手机主屏幕后的图标 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!-- 应用加壳时的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
		<!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

public/index.html文件是React应用程序的入口点,负责提供HTML文档的基本结构,并包含一个idrootdiv元素,这是React应用程序将呈现的地方。

  • src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

src/index.js文件是React应用程序的主要入口点,负责将应用程序呈现到DOM中。

1:首先,该文件导入了ReactReactDOM

import React from 'react';
import ReactDOM from 'react-dom';

2: 然后,它导入了应用程序的主要组件,即src/App.js文件中定义的组件:

import App from './App';

3: 接下来,它使用ReactDOM.render()方法将应用程序呈现到DOM中。这个方法需要两个参数:要呈现的React元素和要将其呈现到的DOM节点。在这个例子中,要呈现的React元素是<App />,它是应用程序的主要组件。要将其呈现到的DOM节点是document.getElementById('root'),它是在public/index.html文件中定义的idrootdiv元素。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

最后,该文件还包含了一些用于开发和调试的代码。例如,它使用了React.StrictMode组件,这个组件可以帮助您在开发过程中发现潜在的问题。它还使用了console.log()方法,这个方法可以将消息记录到浏览器的控制台中,以帮助您调试应用程序。文章来源地址https://www.toymoban.com/news/detail-408091.html

到了这里,关于第十六章 脚手架文件介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【vue2第八章】工程化开发和使用脚手架和文件结构

    vue工程化开发 使用脚手架VUE CLI: 1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。 2,工程化开发。基于构建工具如(webpack)的环境中开发vue。 vue cli是什么: vue cli是一个vue官方提供的一个全局的命令工具. 可以帮助我们快速的创建一个开发vue项目的标准化基础

    2024年02月10日
    浏览(42)
  • Vue学习计划-Vue2--VueCLi(二)vuecli脚手架创建的项目内部主要文件分析

    1. 补充: 什么叫单文件组件? 一个文件中只有一个组件 vue-cli 创建的项目中, .vue 的文件都是单文件组件,例如 App.vue 2. 进入分析 1. package.json : 项目依赖配置文件: 如图,我们说主要的属性: name : 项目的名称 version : 项目版本 scripts : 脚本入口 serve : 启动项目命令 build :

    2024年02月04日
    浏览(72)
  • 三、创建脚手架和脚手架分析

    1、安装node.js **下载地址:**https://nodejs.org/zh-cn/ 界面展示 2、检查node.js版本 查看版本的两种方式 node -v node -version 出现版本号则说明安装成功(最新的以官网为准) 3、为了提高我们的效率,可以使用淘宝的镜像源 输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安

    2024年02月22日
    浏览(51)
  • win系统将脚手架的软链接指向本地脚手架

    先了解一下脚手架研发、发布、安装、调试发大致流程: 本地研发,具体研发过程略 当前目录下登录npm npm login 发布脚手架 npm publish 安装脚手架 npm i -g xxxx(win系统会在系统盘的nodejs文件夹下自动添加脚手架执行命令和执行文件) 执行脚手架命令,没问题的话说明整个流程

    2024年02月08日
    浏览(51)
  • 脚手架开发流程详解

    创建npm项目 创建脚手架入口文件,最上方添加 配置package.json,添加bin属性 编写脚手架代码 将脚手架发布到npm 安装脚手架 使用脚手架 分包:将复杂的系统拆分成若干个模块 命令注册: 参数解析 options全称:–version、–help options简写:-V、-h 带params的options: --path /Users/sam/D

    2024年02月07日
    浏览(45)
  • 设计自己的脚手架

    前言 ​ 在工程中,不仅是软件工程,在建筑行业,我们也经常能看到脚手架的概念。脚手架(又称为 CLI ,全称 command-line interface ),我理解是一种快速构建项目的工具,它主要提供了项目的基础结构和一些常用的配置,避免了从头开始搭建项目的繁琐工作。通过使用脚手架

    2024年02月16日
    浏览(41)
  • React 脚手架

    React 脚手架(React boilerplate)是一种预先设置好的、可以快速启动 React 项目的工具。脚手架已经包含了 React、Webpack、Babel、ESLint、Jest 等一些常用的工具和库,并已经配置好了这些工具的参数,可以直接使用和自定义修改。使用 React 脚手架可以大大加快项目的启动和开发,同

    2024年02月13日
    浏览(51)
  • 使用Vue脚手架

    (193条消息) 第 3 章 使用 Vue 脚手架_qq_40832034的博客-CSDN博客 说明 1.Vue脚手架是Vue官方提供的标准化开发工具(开发平台) 2.最新的版本是4.x 3.文档Vue CLI脚手架(命令行接口) 具体步骤 1.如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taobao.org 2.全局安装 @v

    2024年02月13日
    浏览(60)
  • Vue 脚手架

    ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ │── main.js: 入口文件 ├── .gi

    2024年03月24日
    浏览(45)
  • 安装Node(脚手架)

    从官网直接下载安装即可,自带npm包管理工具。https://nodejs.org/en 安装之后在终端里查看查看node版本 安装webpack 安装vue-cli3.x以上 注意 要先在盘服中创建好文件夹,然后访问 创建好之后创建工程名字然后选择最后一个,最后一个是自定义项目 我就不选择Y了,我选的是N 创建项

    2024年02月11日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包