首页手记 Create-React-App教程：新手入门到上手实践

Create-React-App教程：新手入门到上手实践

标签：

JavaScript 前端工具 React

概述

本文提供了全面的Create-React-App教程，涵盖了从安装到项目构建和部署的全过程。详细介绍了Create-React-App的优势和项目结构，并通过实例演示了组件开发、路由配置和状态管理等关键技术点。此外，还提供了调试和常见错误处理的指南，帮助开发者快速上手和优化React应用开发。

Create-React-App简介

什么是Create-React-App

Create-React-App是由Facebook开发并维护的一个命令行工具，用于快速创建React应用。它提供了一组默认配置，使得开发者可以专注于编写React组件，而无需担心复杂的WebPack配置或构建流程。Create-React-App简化了环境搭建过程，使得初学者可以快速上手React开发。

Create-React-App的优势与特点

零配置：初学者可以无需关心复杂的配置，快速开始编写应用程序。
内置开发服务器：支持热重载，即修改代码后，浏览器会自动刷新，不必等待编译完成。
自动代码分割：支持懒加载，根据组件的功能和模块化进行动态加载，提高应用性能。
CSS预处理器支持：默认支持Sass和Less等常用CSS预处理器。
状态管理与路由库：支持集成Redux和React Router等库，无需手动配置。
测试工具集成：内置Jest和React Testing Library，方便进行单元测试和集成测试。

安装Node.js和npm

在使用Create-React-App之前，需要安装Node.js环境以及npm（Node Package Manager）。

访问Node.js官网下载最新版本的Node.js：https://nodejs.org/en/download/
安装完成后，可以通过命令行检查安装是否成功：

node -v
npm -v

如果输出对应版本号，说明安装成功。

快速开始：创建第一个React应用

安装Create-React-App的全局命令：

npm install -g create-react-app

使用create-react-app命令创建新项目：

npx create-react-app my-app

这将创建一个名为my-app的新项目，包含基础的React应用结构。

进入项目文件夹并启动开发服务器：

cd my-app
npm start

此时，浏览器将自动打开http://localhost:3000，展示默认的React应用。

项目结构解析

文件和文件夹介绍

create-react-app生成的项目包含以下主要文件夹和文件：

public/：存放静态资源，如index.html。
src/：存放应用的源代码，包括组件、样式等。
package.json：包含项目依赖和脚本命令。
.gitignore：忽略某些文件不被Git版本控制系统追踪。

如何修改项目配置

可以通过修改项目配置文件来定制化项目开发环境。例如，修改package.json中的脚本命令，可以自定义构建和测试命令：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

或者修改public/index.html来定制HTML文件的内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.js"></script>
</body>
</html>

基础组件开发

组件的定义与使用

在React中，组件是可复用的代码单元。组件可以被定义为函数或类。组件分为两类：函数组件和类组件。

函数组件

函数组件通常用于展示数据，不包含状态。

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

类组件

类组件可以包含状态（state）和生命周期方法。

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

类组件与函数组件的区别

函数组件：更简洁，用于展示数据。
类组件：可以包含状态，适用于复杂的逻辑处理。

state和props的使用

state：组件内部的状态，通常用于控制组件内部的数据变化。
props：从父组件传递给子组件的属性。

示例：

// 父组件
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  render() {
    return <ChildComponent name="Alice" />;
  }
}

// 子组件
import React from 'react';

function ChildComponent(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default ChildComponent;

容器组件与展示组件的概念

容器组件：负责管理数据状态和逻辑，通常与Redux、MobX等状态管理库配合使用。
展示组件：只负责展示数据，通常从父组件接收props。

示例：

// 容器组件
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DisplayComponent from './DisplayComponent';

class ContainerComponent extends Component {
  render() {
    return <DisplayComponent data={this.props.data} />;
  }
}

const mapStateToProps = (state) => ({
  data: state.data
});

export default connect(mapStateToProps)(ContainerComponent);

常用库和工具

使用React Router进行路由配置

React Router是React应用程序中的路由库。它允许定义不同的路由，并根据URL动态加载组件。

安装React Router：

npm install react-router-dom

示例配置：

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

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

export default App;

引入Material-UI等UI库美化界面

Material-UI是一个流行的React UI库，基于Google的Material Design。

安装Material-UI：

npm install @material-ui/core

示例使用Material-UI的按钮组件：

import React from 'react';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
    </div>
  );
}

export default App;

添加Axios进行API数据请求

Axios是一个用于浏览器和Node.js的HTTP客户端，支持Promise API。

安装Axios：

npm install axios

示例代码：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  );
}

export default App;

使用Redux进行状态管理

Redux是一个用于JavaScript应用的状态管理库，广泛用于大型React应用。

安装Redux和React-Redux：

npm install redux react-redux

示例代码：

import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counterReducer);

function App() {
  const counter = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <Provider store={store}>
      <div>
        <p>{counter}</p>
        <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
        <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
      </div>
    </Provider>
  );
}

export default App;

项目构建与部署

构建和发布到GitHub Pages

构建应用程序：

npm run build

发布到GitHub Pages：

将构建输出的文件夹build部署到GitHub Pages。
在GitHub仓库中将gh-pages分支设置为源分支。

示例发布到GitHub Pages的设置：

# 切换到gh-pages分支
git checkout -b gh-pages

# 部署build文件夹的内容
cp -r build/. .

# 提交并推送
git add .
git commit -m "Deploy to GitHub Pages"
git push origin gh-pages

# 切换回main分支
git checkout main

部署到Netlify和Vercel

部署到Netlify：

创建Netlify账号，新建站点。
在Netlify中上传构建输出的文件夹build。

示例Netlify部署：

# 部署到Netlify
netlify deploy --dir=build

部署到Vercel：

创建Vercel账号，新建项目。
链接到GitHub仓库，部署项目。

示例Vercel部署：

# 使用vercel CLI部署
vercel

配置环境变量

环境变量可以在项目中定义，用于不同环境的配置。

示例：

# .env文件
REACT_APP_API_URL=https://api.example.com

在代码中使用：

import React from 'react';

function App() {
  return (
    <div>
      <p>API URL: {process.env.REACT_APP_API_URL}</p>
    </div>
  );
}

export default App;

调试与常见错误处理

调试工具：

Chrome DevTools：内置调试工具，可以查看React组件的渲染树。
React DevTools：Chrome扩展，用于调试React组件。

常见错误处理：

TypeError：检查组件的props是否正确。
SyntaxError：检查代码的语法错误。
RuntimeError：检查代码的运行时错误，如API调用失败。

示例错误处理：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        setError(error.message);
      });
  }, []);

  return (
    <div>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
      {error ? <p>Error: {error}</p> : null}
    </div>
  );
}

export default App;

实际项目案例与总结

完整项目案例解析

创建一个简单的待办事项应用，包含添加、删除和编辑功能。

创建项目：

npx create-react-app todo-app
cd todo-app

安装依赖：

npm install @material-ui/core axios

创建组件：

// src/TodoItem.js
import React from 'react';
import { Button } from '@material-ui/core';

function TodoItem({ todo, onDelete, onToggle }) {
  return (
    <div>
      <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
        {todo.text}
      </span>
      <Button onClick={() => onDelete(todo.id)}>Delete</Button>
      <Button onClick={() => onToggle(todo.id)}>Toggle</Button>
    </div>
  );
}

export default TodoItem;

// src/TodoList.js
import React, { useState } from 'react';
import TodoItem from './TodoItem';
import { Button, TextField } from '@material-ui/core';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState('');

  const handleAddTodo = () => {
    const newTodo = {
      id: Date.now(),
      text: inputText,
      completed: false,
    };
    setTodos([...todos, newTodo]);
    setInputText('');
  };

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const handleToggleTodo = (id) => {
    setTodos(todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    }));
  };

  return (
    <div>
      <TextField
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        label="Add new todo"
      />
      <Button onClick={handleAddTodo}>Add</Button>
      <ul>
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onDelete={handleDeleteTodo}
            onToggle={handleToggleTodo}
          />
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

修改App.js：

// src/App.js
import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <h1>Todo App</h1>
      <TodoList />
    </div>
  );
}

export default App;

启动应用：

npm start

Create-React-App社区资源与进阶学习路径

Create-React-App有丰富的社区支持和资源：

官方文档：https://create-react-app.dev/docs/getting-started/
React官方文档：https://reactjs.org/docs/getting-started.html
社区支持：https://reactiflux.com/
学习资源：慕课网（https://www.imooc.com/）提供在线课程，涵盖React和Create-React-App的学习路径。

用户常见疑问解答

如何更新Create-React-App的版本？

使用npm update create-react-app命令可以更新全局安装的create-react-app命令。对于已经创建的应用，可以使用npx create-react-app@latest命令创建新项目参考最新的版本配置。

如何在项目中使用CSS文件？

可以在src目录下创建CSS文件，然后在组件中通过import引入：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <h1>Hello, World</h1>
    </div>
  );
}

export default App;

如何使用TypeScript开发Create-React-App项目？

可以通过npx create-react-app my-app --template typescript命令创建一个TypeScript项目：

npx create-react-app my-app --template typescript

这样会自动生成TypeScript配置并安装相关依赖。

如何热重载？

Create-React-App提供了热重载功能，即在开发环境中，修改代码后浏览器会自动刷新。只需启动开发服务器：

npm start

如何优化构建性能？

可以通过以下方式优化构建性能：

代码分割：使用动态导入（import()）方式加载模块。
Tree Shaking：确保导入的模块中没有未使用的代码。
环境变量：使用环境变量减少构建时的配置。

npm run build -- --optimize-minification

如何调试React应用？

可以使用Chrome DevTools进行React应用的调试：

打开浏览器的开发者工具（F12或右键检查）。
在Element标签下查看React组件的DOM结构。
在Sources标签下设置断点和调试代码。

如何测试React组件？

Create-React-App集成了Jest和React Testing Library进行单元测试和集成测试：

// src/App.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕标琳琳

手记
篇

粉丝

18

获赞与收藏

140

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 312701 2199

后端通用面试教程

41个小节 30627 343

网络编程入门教程

20个小节 12592 237

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空