第三章React脚手架

忧郁火龙果

于 2023-07-10 17:05:13 发布

阅读量339

点赞数

分类专栏： React 文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/LQlove1/article/details/131642209

版权

React 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何使用create-react-app脚手架创建并启动React项目，解析了项目的目录结构，包括public和src文件夹中的主要文件。还展示了App.js和Hello.js两个基本React组件的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、脚手架的使用

一、脚手架的使用

1-1、创建项目并且启动


 1. 全局安装 :npm i -g create-react-app 
 2. 创建项目:create-react-app 项目名
 3. 项目文件夹：:cd hello-react
 4. 启动项目:npm start

1-2、项目目录解析

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

1-3、hello-react

App.js组件

import React from "react";
import Hello from "./Hello";
// 创建外壳组件App
class App extends React.Component {
  render(){
    return (
      <div>
        <Hello />
      </div>
    )
  }
}
export default App;

Hello.js组件

import React from "react";
// 创建外壳组件App
export default class Hello extends React.Component {
  render(){
    return (
      <div>
        hello,React
      </div>
    )
  }
}