前端新手必看：快速搭建React.js 的项目

你是否对 React.js 感兴趣，但不知道从何开始？本文章带你从零开始，快速搭建一个 React.js 项目！无需任何经验，只需跟随简单的步骤，你就能在几分钟内创建一个完整的 React 应用。我们将涵盖从环境配置、项目初始化到运行开发服务器的所有内容，帮助你轻松上手 React.js 开发。

1. 前置知识准备
   • 熟练掌握 HTML、CSS 和 JavaScript 基础知识，特别是 ES6+ 语法，如箭头函数、解构赋值、Promise 等。
   • 了解 HTTP 请求的基本概念，例如 GET、POST 请求。
2. 环境搭建
   • 安装 Node.js 和 npm（Node 包管理器），它们是创建和运行 React 项目的基础。
3. 创建项目
   • 使用 Create React App 快速搭建 React 项目骨架。
4. 学习核心概念
   • 理解 React 的组件化开发、虚拟 DOM、状态管理（如 useState、useReducer）、生命周期函数（函数组件使用 Hooks 来替代类组件的生命周期）等概念。
5. 学习请求接口
   • 了解如何使用 fetch API 或第三方库（如 axios）进行 HTTP 请求。

实际案例：实现登录页面、首页列表页面，并完成接口请求与数据展示。

步骤 1：创建项目

在终端中执行以下命令：

npx create-react-app react-login-list-app
cd react-login-list-app

步骤 2：安装依赖

为了进行接口请求，我们使用 axios 库，在项目根目录下执行：

npm install axios

步骤 3：编写代码

项目结构

src
├── components
│   ├── Login.js
│   └── Home.js
├── App.js
├── App.css
└── index.js

Login.js

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

const Login = ({ onLoginSuccess }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async () => {
        try {
            // 模拟登录接口请求，实际使用时替换为真实接口地址
            const response = await axios.post('https://example.com/api/login', {
                username,
                password
            });
            if (response.data.success) {
                onLoginSuccess();
            } else {
                alert('登录失败，请检查用户名和密码');
            }
        } catch (error) {
            console.error('登录请求出错:', error);
            alert('登录请求出错，请稍后重试');
        }
    };

    return (
        <div>
            <h2>登录页面</h2>
            <input
                type="text"
                placeholder="用户名"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="密码"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button onClick={handleLogin}>登录</button>
        </div>
    );
};

export default Login;

Home.js

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

const Home = () => {
    const [listData, setListData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                // 模拟获取列表数据接口请求，实际使用时替换为真实接口地址
                const response = await axios.get('https://example.com/api/list');
                setListData(response.data);
            } catch (error) {
                console.error('获取列表数据出错:', error);
                alert('获取列表数据出错，请稍后重试');
            }
        };

        fetchData();
    }, []);

    return (
        <div>
            <h2>首页列表页面</h2>
            <ul>
                {listData.map((item, index) => (
                    <li key={index}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default Home;

App.js

import React, { useState } from 'react';
import Login from './components/Login';
import Home from './components/Home';
import './App.css';

function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLoginSuccess = () => {
        setIsLoggedIn(true);
    };

    return (
        <div className="App">
            {isLoggedIn? <Home /> : <Login onLoginSuccess={handleLoginSuccess} />}
        </div>
    );
}

export default App;

App.css

.App {
    font-family: Arial, sans-serif;
    padding: 20px;
    text-align: center;
}

input {
    margin: 5px;
    padding: 5px;
}

button {
    margin: 5px;
    padding: 5px 10px;
}

index.js

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

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

步骤 4：运行项目

在终端中执行以下命令启动开发服务器：

npm start

打开浏览器，访问 http://localhost:3000，即可看到登录页面。

用到的技术

1. React.js：构建用户界面，使用组件化开发，提高代码的可维护性和复用性。
2. JSX：允许在 JavaScript 代码中编写类似 HTML 的标记，使代码更直观。
3. Hooks：
   • useState：用于管理组件的状态，如登录状态、输入框的值、列表数据等。
   • useEffect：处理副作用，如在组件挂载时进行接口请求。
4. axios：用于发送 HTTP 请求，支持多种请求方式（GET、POST 等），并处理响应数据。
5. 事件处理：通过 onChange 和 onClick 等事件处理函数来处理用户的输入和操作。
6. CSS：为应用添加简单的样式，提升用户体验。