day03—React脚手架

一、React脚手架搭建

1、xxx脚手架:用来帮助程序员快速搭建一个基于xxx库的模板项目。

(1)脚手架包含了所有需要的配置(语法检查、jsx编译、devServer…);
(2)下载好了所有相关的依赖;
(3)直接运行一个简单的效果;

2、React提供了一个用于创建React项目的脚手架库;(create-react-app 目录名称)
3、项目的整体技术架构:react+webpack+es6+eslint
4、使用脚手架开发项目的特点是:模块化、组件化、工程化

Step1:全局安装create-react-app库 npm i create-react-app -g
Step2:切换到你想要创建项目的目录 create-react-app xxx(目录名称最好不要使用中文以及符号)
Step3:cd 目录名称
Step4:启动项目 npm start

二、脚手架目录说明

1、public目录(静态资源文件夹)

脚手架服务的网站的根目录(静态资源目录,页面、样式、公共图片,但js不放在这儿)

【注】在public目录中,于我们而言,只有index.html文件是最重要的,组件内容就放在root容器元素中,最终呈现在页面上,只在root容器元素中放入一个组件——App组件(其他组件都作为App组件的子组件)
day03—React脚手架_第1张图片

DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  
  <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" />

  
  
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

  
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React Apptitle>
head>

<body>
  
  <noscript>You need to enable JavaScript to run this app.noscript>
  <div id="root">div>
body>

html>

【注】robots.txt文件:爬虫规则文件,爬虫爬取页面时,可以指定规则,哪些内容允许被爬取,

2、src目录(源码文件夹)

day03—React脚手架_第2张图片
【注】项目启动时,首先执行src目录的index.js文件(入口文件),根据根元素对象root,找到public目录下的index.html文件中的root结点,然后App组件显示在页面上(App.js文件)

【注】整个React项目中,只有一个html文件(React和Vue框架写的应用都是SPA应用,单页面应用,Singular Page Application,单页面应用)若有其他功能,拆分功能模块。

  1. App.js文件 :创建了App组件(定义函数组件App)
  2. App.css文件:App.js文件的样式
  3. index.css文件:通用的样式
  4. index.js文件:webpack入口文件(引入react、react-dom、index.css、App组件,在root元素中渲染App组件)找到index.html文件中的root根元素对象。
  5. logo.svg文件:logo图(引入时以模块的形式)
  6. reportWebVitals.js文件:记录页面的性能,使用web-vitals库检测页面性能
  7. setupTest.js文件:组件单元测试性能的文件(需要jest-dom库的支持)

你可能感兴趣的:(react,javascript,前端,react.js)