创建环境--react脚手架

Posted on 2022-03-01 23:42 AcTourist 阅读(68) 评论(0) 编辑收藏举报

一、前提

　　1.需要安装node.js，地址：https://nodejs.org/en/download/

　　2.需要安装yarn环境

　　（1）在cmd 中输入 npm install yarn -g

　　都安装好后就可以在cmd中输入 npm -g create-react-app

　　3.遇到问题，都安装好了，但是就是安装不了create-react-app 解决方法：用npx create-react-app 文件名（最好都用小写）就可以解决了

二、过程

　　1.用cmd创建文件 create-react-app 文件名

　　2.用vs打开该文件夹

　　3.在vs里的中端输入 yarn start 会跳转到网页有react的图标

4.理解文件夹的index.html的代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="utf-8" />
 5     <!-- %PUBLIC_URL%代表pubilc文件夹的路径 -->
 6     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7     <!-- 开启理想视口，用于做移动端网页的适配 -->
 8     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9     <!-- 用于配置浏览器页签+地址栏的颜色，仅支持安卓手机浏览器 -->
10     <meta name="theme-color" content="#000000" />
11     <!--描述  -->
12     <meta
13       name="description"
14       content="Web site created using create-react-app"
15     />
16     <!-- 用于指定网页添加到手机主屏幕后的图标（苹果） -->
17     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
18     <!-- 应用套壳配置文件 -->
19     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
20   
21     <title>React App</title>
22   </head>
23   <body>
24     <!-- 若浏览器不支持js则展示标签中的内容 -->
25     <noscript>You need to enable JavaScript to run this app.</noscript>
26       
27     <div id="root"></div>
28     
29   </body>
30 </html>

5.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库的支持)

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 部署react

· 面向组件编程

· 使用create-react-app脚手架搭建一个react项目

· 使用方式脚手架创建React

· React—05—脚手架

AcTourist

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

创建环境--react脚手架