react---create-react-app搭建项目_create-react-app创建项目-优快云博客

本文链接：https://blog.youkuaiyun.com/maidu_xbd/article/details/131176725

该文介绍了如何使用create-react-app搭建React项目，包括安装、创建和启动步骤。详细列出了项目的基本目录结构，如public和src文件夹的内容，以及index.html和index.js的关键作用。此外，还提及了App组件和Hello/Welcome组件的使用。

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

1.项目搭建步骤

安装react脚手架create-react-app 【npm i create-react-app -g】
新建项目【create-react-app react_first_app】
进行项目目录【cd react_first_app】
启动【npm start]

2.项目目录

react_first_pro
├─ .gitignore               // 自动创建本地仓库
├─ package.json             // 相关配置文件
├─ public                   // 公共资源
│  ├─ favicon.ico           // 浏览器顶部的icon图标
│  ├─ index.html            // 应用的 index.html入口
│  ├─ logo192.png           // 在 manifest 中使用的logo图
│  ├─ logo512.png           // 同上
│  ├─ manifest.json         // 应用加壳的配置文件
│  └─ robots.txt            // 爬虫协议文件
├─ src                      // 源码文件夹
│  ├─ App.css               // App组件样式
│  ├─ App.js                // App组件
│  ├─ App.test.js           // 用于给APP做测试
│  ├─ index.css             // 样式
│  ├─ index.js              // 入口文件
│  ├─ logo.svg              // logo图
│  ├─ reportWebVitals.js    // 页面性能分析文件
│  └─ setupTests.js         // 组件单元测试文件
└─ yarn.lock

3.hello_react

【index.html】--应用入口文件

<!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" />
    <!-- seo -->
    <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 App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

%PUBLIC_URL%代表public目录

【index.js】--将APP组件渲染到页面

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App/>,document.getElementById("root"))

【App.jsx】

import React, { Component } from "react"
import Hello from "./components/Hello/Hello"
import Welcome from "./components/Welcome/Welcome"
export default class App extends Component{
    render(){
        return(
            <div>
                <Hello/>
                <Welcome/>
            </div>
        )
    }
}

【Hello组件/Welcome组件】