创建环境--react脚手架

Posted on 2022-03-01 23:42  AcTourist  阅读(83)  评论(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库的支持)