Here is the code for the React application:
**src/components/Header.js**
```js
import React from 'react';
function Header() {
return (
<header className="pb-2 mt-4 mb-2 border-bottom">
<h1>My Favorite Movies</h1>
</header>
);
}
export default Header;
```
**src/components/Movie.js**
```js
import React from 'react';
function Movie({ title, image, description }) {
return (
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<img src={image} alt={title} />
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p>
</div>
</div>
</div>
);
}
export default Movie;
```
**src/components/MovieList.js**
```js
import React from 'react';
import Movie from './Movie';
function MovieList({ movies }) {
return (
<div className="row">
{movies.map((movie, index) => (
<Movie key={index} title={movie.title} image={movie.image} description={movie.description} />
))}
</div>
);
}
export default MovieList;
```
**src/components/MoviesPage.js**
```js
import React from 'react';
import Header from './Header';
import MovieList from './MovieList';
const movies = [
{
title: "Inception",
image: "https://example.com/inception.jpg",
description: "A mind-bending thriller by Christopher Nolan."
},
{
title: "The Dark Knight",
image: "https://example.com/dark_knight.jpg",
description: "A gripping tale of Batman and Joker."
},
{
title: "Interstellar",
image: "https://example.com/interstellar.jpg",
description: "A space exploration epic."
}
];
function MoviesPage() {
return (
<div>
<Header />
<MovieList movies={movies} />
</div>
);
}
export default MoviesPage;
```
**index.js**
```js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import MoviesPage from './components/MoviesPage';
ReactDOM.render(
<React.StrictMode>
<MoviesPage />
</React.StrictMode>,
document.getElementById('root')
);
```
This application uses Bootstrap for styling and sets up four components: `Header`, `Movie`, `MovieList`, and `MoviesPage`. The `MoviesPage` component renders the `Header` and `MovieList` components, passing the sample data array as a prop to the `MovieList` component. The `MovieList` component iterates over the array and renders a `Movie` component for each movie. The `Movie` component displays a Bootstrap card with the movie's title, image, and description.
You can run the application using `npm run dev` and open it in your browser at `http://localhost:3000`.
Note: This code assumes you have already set up a new React project using Vite and have installed Bootstrap. If you haven't, you can run `npx create-react-vite` to set up a new project, and then `npm install bootstrap` to install Bootstrap.
Rocket
Mini tools
