Create-React-App学习：初学者入门指南

本文全面介绍了使用Create-React-App学习的相关内容，包括快速搭建React应用的方法、项目结构解析以及基本组件开发。文章还详细讲解了路由管理的实现和部署上线的步骤，帮助读者掌握使用Create-React-App学习的全过程。

什么是Create-React-App

Create-React-App是由Facebook开发的一个工具，它提供了一个简单的脚手架，使得React应用的创建变得非常容易。使用Create-React-App，开发者可以专注于编写React组件，而无需担心配置复杂的构建工具，如Webpack、Babel等。

Create-React-App的优势和用途

Create-React-App的主要优势包括：

• 快速启动：使用Create-React-App创建新项目非常迅速，只需几个步骤即可运行。
• 开箱即用：内置了ESLint和Prettier等工具，支持代码格式化和自动修复。
• 无需配置：无需编写复杂的构建配置，Create-React-App自动处理构建工具的配置。
• 热重载：在开发过程中，代码更改会自动热重载，无需手动刷新浏览器。
• 测试支持：内置了Jest测试框架，方便进行单元测试和集成测试。

安装和环境搭建

下载并安装Node.js和npm

首先，确保你的机器上已经安装了Node.js和npm。可以通过以下命令检查是否已安装：

node -v
npm -v

如果没有安装，可以访问Node.js官网下载安装包：https://nodejs.org/

安装完成后，可以再次运行上述命令验证安装是否成功。

使用Create-React-App创建新项目

安装Create-React-App需要使用npm。首先确保npm已经更新到最新版本：

npm install -g npm

然后，使用Create-React-App创建一个新项目：

npx create-react-app my-app
cd my-app
npm start

上述命令依次执行以下步骤：

• 使用npx安装Create-React-App并创建一个名为my-app的项目。
• 进入项目目录。
• 使用npm start启动开发服务器。

打开浏览器并访问http://localhost:3000，你应该能看到默认的React应用页面。

项目结构解析

项目文件夹结构介绍

my-app项目的文件夹结构如下：

my-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.js
  │   ├── logo.svg
  │   └── serviceWorker.js
  ├── package.json
  ├── package-lock.json
  └── README.md

• node_modules：包含项目依赖的文件夹。
• public：存放静态资源文件的文件夹，如HTML模板和favicon。
• src：存放React组件和应用逻辑的文件夹。
• package.json：包含项目的依赖和脚本配置。
• package-lock.json：记录了项目依赖的具体版本。
• README.md：项目的说明文件。

关键配置文件说明

• package.json：包含项目的依赖列表和脚本配置。例如：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

• package-lock.json：记录了项目依赖的具体版本。例如：

{
  "name": "my-app",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "dependencies": {
    "react": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
      "integrity": "sha512-..."
    },
    "react-dom": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
      "integrity": "sha512-..."
    },
    "react-scripts": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
      "integrity": "sha512-..."
    }
  }
}

• README.md：项目的说明文件。例如：

# My React App

This is a React app created using Create-React-App. It includes basic components and routing.

• src/index.js：入口文件，引入并渲染根组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

基本组件开发

创建和导入React组件

首先，在src目录下创建一个名为Header.js的新文件：

import React from 'react';

function Header() {
  return (
    <header>
      <h1>My App</h1>
    </header>
  );
}

export default Header;

然后，在App.js中导入并使用这个组件：

import React from 'react';
import Header from './Header';

function App() {
  return (
    <div className="App">
      <Header />
      <p>Welcome to my app</p>
    </div>
  );
}

export default App;

使用JSX进行简单布局

在App.js中，我们使用JSX来构建简洁的布局：

import React from 'react';
import Header from './Header';

function App() {
  return (
    <div className="App">
      <Header />
      <p>Welcome to my app</p>
    </div>
  );
}

export default App;

Header.js和App.js中的JSX结构如下：

• Header组件负责渲染一个简单的头部：

  <header>
  <h1>My App</h1>
  </header>

• App组件负责将Header组件和其他内容组合起来：

  <div className="App">
  <Header />
  <p>Welcome to my app</p>
  </div>

路由管理

安装React Router

首先，安装React Router：

npm install react-router-dom

然后，在App.js中引入并使用BrowserRouter和Route组件：

import React from 'react';
import Header from './Header';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

实现基本的多页面应用

创建三个组件，分别是Home.js、About.js和Contact.js：

// Home.js
import React from 'react';

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

// About.js
import React from 'react';

function About() {
  return <h2>About Page</h2>;
}

export default About;

// Contact.js
import React from 'react';

function Contact() {
  return <h2>Contact Page</h2>;
}

export default Contact;

在App.js中定义路由：

import React from 'react';
import Header from './Header';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

现在，当你访问/about或/contact时，将分别显示About和Contact组件。

部署上线

构建项目

首先，构建项目以准备部署：

npm run build

该命令会生成一个build文件夹，包含优化后的静态文件，可以用于生产环境。

将应用部署到GitHub Pages或其他平台

1. GitHub Pages：

   • 首先，确保你的项目在GitHub上有一个仓库。
   • 在package.json中添加以下脚本：

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "deploy": "gh-pages -d build"
   }

   • 安装gh-pages：

   npm install gh-pages --save-dev

   • 运行部署命令：

   npm run deploy

   • 如果你还没有设置GitHub Pages，可以使用以下命令自动完成设置：

   npm run deploy -- -d

   • 配置.gitignore文件：

   node_modules
   .env
   build/

2. 其他平台（如Netlify、Vercel等）：

   • 使用GitHub或其他版本控制系统将项目推送到远程仓库。
   • 创建一个新应用并链接到你的仓库。
   • 在设置中，指定build文件夹作为部署目录。
   • 确保构建命令设置为npm run build。
   • 运行部署命令：

   npm run build

   • 提交代码并进行部署。

完成以上步骤后，你可以在相应的域上查看你的应用。

总结

通过本指南，你已经学习了如何使用Create-React-App快速搭建一个React应用，并掌握了基本的组件开发、路由管理和部署上线的技术。建议继续深入学习React和相关框架的高级特性，以提升项目开发能力。可以参考慕课网上的React课程，获取更深入的实践和学习资源。