React——04——React脚手架

最新推荐文章于 2024-08-21 18:34:12 发布

野生小米椒

最新推荐文章于 2024-08-21 18:34:12 发布

阅读量131

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/x1037490413/article/details/112781036

版权

React 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一：初始化React脚手架

在这里插入图片描述
全局安装时进入cmd，我的要用管理员身份运行才行，不然会下载失败
我们将文件夹放在桌面上，创建文件夹

静静等待…
桌面上会有这个文件夹，一般来说package.json里的scripts里面的就是项目运行或者打包需要执行的命令

在这里插入图片描述进入桌面上那个文件夹，在路径里直接敲cmd

在这里插入图片描述
就能进入这个文件夹的路径，然后输入yarn start

或者在vs code运行这个项目

二：脚手架文件介绍

在这里插入图片描述页签图标用ico的后缀

<!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="#000000" />
    <!-- 描述网站引擎信息 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- （仅支持iphone） 用于指定网页添加到手机主屏幕后的图标 -->
    <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>

三：细节

文件命名时组件的后缀都写jsx,其他业务逻辑的写js，这样可以区分开来，import引入文件时js和jsx是可以不写后缀的
在这里插入图片描述有时候我们不想重新开项目，但是又想保存上个项目的东西，可以给src和public更改名字，这样下次想用它们，把新项目的src和public改成其他的，原来项目名字改回来，就可以使用了