Support Flow | PixieBrix
Mini tools
MUHAMMAD SHAHIN
@muhammadshahin Tasks: 11
🛠️ 1 tool
🙏 60 karma
Enthusiast
Joined: August 2024
Follow
MUHAMMAD SHAHIN's tools
-
2403656Released 1y ago100% FreeHere 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.
