What is React? – React is a JavaScript library used to build web applications.
It helps create user interfaces that are fast and easy to use.

What is a component? – A component is a reusable piece of code that represents a part of the user interface, like a button, a card, or a list.

What is state used for? – State is used to store and manage changing data inside a component, such as user input or a list of items.

Why is React useful for web development? – React is useful because it makes code easier to organize, reuse, and maintain, and it updates the page efficiently without reloading the whole site.

Key Terms

JSX – a special syntax that looks like HTML but works in JavaScript.

Component – a reusable part of the user interface.

Props – data passed from one component to another.

State – data managed inside a component that can change.

Creating a React Project

We must install the necessary packages, write the name of our project, and be sure to select the “React” framework and the “JavaScript” option.
After that, we will create a React project using VITE.

Components in React

App.js – the main component where everything is combined.

MovieList.js – displays the list of movies.

MovieCard.js – displays information about a single movie (title, image).

What it does :

• Wraps the whole app with MovieProvider (global state for favorite movies)
• Displays the nav bar
• Controls page navigation using React Router
• Shows different pages depending on the URL: 1) / → Home page (all movies) 2) /favorites → Favorites page
  App.js is the main structure and navigation controller of the app

What it does :

• Shows the movie poster
• Displays the movie title and release year
• Shows a heart button to add/remove favorites movie
• Checks if the movie is already in favorites
• It receives movie data using props

NavBar.jsx – is a component that displays the top navigation menu of the app.

What it does :

• show the application name (Movie App)
• provide links to pages (Home and Favorites)
• allow the user to switch pages without reloading the browser using React Router

Adding a search function :

The search functionality is implemented in Home.jsx.
There is a search state and an input handler that filters the movies list.

1)The user types text into a search input.
2)This text is stored in state:

const [searchTerm, setSearchTerm] = useState("");

const [searchTerm, setSearchTerm] = useState("");

3)An event handler updates the state as the user types:

function handleSearch(e) {
  setSearchTerm(e.target.value);
}

function handleSearch(e) {
  setSearchTerm(e.target.value);
}

4)The movies list is filtered based on the search term:

const filteredMovies = movies.filter(movie =>
  movie.title.toLowerCase().includes(searchTerm.toLowerCase())
);

const filteredMovies = movies.filter(movie =>
  movie.title.toLowerCase().includes(searchTerm.toLowerCase())
);

5)Only the filtered movies are displayed:

filteredMovies.map(movie => <MovieCard key={movie.id} movie={movie} />)

filteredMovies.map(movie => <MovieCard key={movie.id} movie={movie} />)