React初学者入门指南：动手构建电影列表

2023-09-29 18:12:10

React 入门指南：打造一个电影列表案例

在当今数字时代，学习 React 已成为构建动态且引人入胜的用户界面的必备技能。作为 JavaScript 框架的先驱，React 以其简化复杂 Web 应用程序开发的能力而闻名。

如果你是一位 React 新手，可能会感到有些不知所措，但不要担心！本指南将一步一步指导你完成一个电影列表案例，让你轻松掌握 React 的基础知识。

使用 React 创建电影列表

为了开始我们的 React 之旅，我们将使用 coderwhy 的 React 课程。这个课程提供了清晰易懂的解释和动手练习，非常适合初学者。

按照课程中的步骤，创建你的 React 项目，并在 src 目录下创建一个名为 MovieList.js 的文件。这是我们电影列表组件的核心。

import React, { useState } from 'react';

const MovieList = () => {
  const [movies, setMovies] = useState([
    { id: 1, title: '肖申克的救赎', year: 1994 },
    { id: 2, title: '教父', year: 1972 },
    { id: 3, title: '黑暗骑士', year: 2008 },
  ]);

  const handleDeleteMovie = (id) => {
    const newMovies = movies.filter((movie) => movie.id !== id);
    setMovies(newMovies);
  };

  return (
    <div>
      <h1>电影列表</h1>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id}>
            {movie.title} ({movie.year})
            <button onClick={() => handleDeleteMovie(movie.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MovieList;

在这个组件中，我们定义了一个电影列表，并允许用户通过单击按钮删除电影。我们使用 useState 钩子来管理电影状态，使用 map 方法遍历电影数组并创建列表项。

接下来，在 App.js 文件中引入 MovieList 组件并将其渲染到页面上：

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

const App = () => {
  return (
    <div>
      <MovieList />
    </div>
  );
};

export default App;