React 电影 APP 是一个电影 Web 应用项目，我们要在其中创建组件来显示电影列表、每部电影的详细信息，并实现搜索功能。
最终输出预览图：
!Screenshot-from-2023-10-12-18-04-13
React 电影 APP 的实现思路
为了在 React 中创建这个电影 Web 应用，我们将使用一个 API，它可以根据搜索框中的查询内容提供数据。我们将使用 axios 来获取数据，并在结果组件中使用数组 map（映射）来展示这些数据。此外，当用户点击某部电影时，详情组件将会显示该特定电影的完整信息。
创建电影 Web 应用的步骤
我们将按照以下步骤来创建我们的应用：
步骤 1： 使用 npm 命令在终端中初始化名为 movie-app 的项目
npm create vite@latest movie-app --template react
步骤 2： 切换目录并进入你的主文件夹，操作如下
cd movie-app
步骤 3： 安装 axios：
npm install axios
电影 Web 应用的项目结构
然后，我们将删除所有不必要的文件。删除文件后的文件结构如下所示：
!Screenshot-from-2023-10-16-10-29-20React 电影 APP 的项目结构
安装外部库后的依赖列表：
"dependencies": {
"axios": "^1.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.0.0", // 如果使用路由
"vite": "^4.0.0"
}
示例： 该示例演示了在搜索名称时给出匹配电影标题的列表，并在点击列表中的某一项时显示详细信息。
CSS
/ App.css /
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "montserrat", sans-serif;
background: linear-gradient(to right, #000428, #004e92);
}
header {
width: 100%;
padding-top: 2rem;
padding-bottom: 1rem;
}
header h1 {
color: #ffffff;
font-size: 4rem;
font-weight: 700;
text-align: center;
}
main {
width: 100%;
max-width: 90%;
margin: 0 auto;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 20rem;
text-align: left;
}
.results {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/ margin: 0 -15px; /
}
.results .result {
width: 20%;
min-width: 250px;
background: #000000;
max-height: 500px;
/ padding: 15px; /
margin: 20px 25px;
display: flex;
flex-direction: column;
cursor: pointer;
}
.results .not-found {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 2rem 0.5rem;
}
.results .not-found h2 {
color: #ffffff;
}
.results .result img {
/ display: block; /
width: 100%;
padding: 10px 2px;
margin: 0 auto;
height: 350px;
width: 230px;
}
.results .result h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
width: 100%;
text-align: center;
padding: 1rem;
background: #272829;
flex: 1 100%;
transition: 0.4s ease-out;
}
.result:hover {
box-shadow: 0 0 8px 3px #eaf0f7;
/ background: #dfd8d8; /
}
.results .result h3:hover {
background: #fff;
color: #223343;
box-shadow: 0 0 8px 3px #4484c4;
}
.detail {
margin: 3rem 5rem;
overflow-y: scroll;
}
.detail .content .rating {
margin-left: 2rem;
font-size: 1.5rem;
margin-bottom: 0;
margin-top: 1rem;
padding-bottom: 0;
}
.detail .content {
display: block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
max-width: 15000px;
/ max-height: 600px; /
padding: 25px;
background: #000000;
color: #fff;
overflow-y: scroll;
}
.detail .content h2 {
font-size: 3rem;
padding: 2rem;
padding-top: 0;
padding-bottom: 0.5rem;
font-weight: 600;
}
.detail .content span {
font-size: 1.4rem;
margin-left: 2rem;
margin-bottom: 3rem;
font-weight: 300;
color: #ffffff;
}
.detail .content .rating {
margin-bottom: 30px;
}
.detail .content .about {
display: flex;
flex-wrap: wrap;
margin: 0 -15px 30px;
}
.detail .content .about img {
flex: 1 1 50%;
max-width: 300px;
opacity: none;
padding: 0 15px;
margin-left: 2rem;
margin-top: 1rem;
}
.detail .content .about p {
flex: 1 50%;
padding: 15px 25px;
margin-top: 3rem;
font-size: 1.5rem;
}
.detail .content .close {
/ display: inline-block; /
padding: 15px 30px;
font-size: 18px;
/* margin-top: 3rem;
margin-right: 2rem;
margin-bottom: 1rem; */
font-weight: 7