Custom Category: React

My first React project and the one I’m the proudest of. This project introduced me to state, components, props, and all of the introductory level syntax and nuances of React. Using the MovieDB API, I asked the database of movies and returned a grid of the current most popular movies.

Being new to React (or any javascript framework), the concept of components and props was a little intimidating and something I initially struggled with. It’s a slightly different way of thinking than coding CMS templates, but I wanted to challenge myself.

This project is broken up into 3 components;

• movies which contains the properties of the individual movie. The title, id, overview, and poster url.
• movieList which calls the movie DB API and returns the list of movies. Then maps through the list and outputs a grid of movies and their covers. This component also sets the initial movies state.
• movieDetail which contains all of the details of the movie. This component once again calls the movieDB API, but this time using the movie id that was passed in from the movieList component, so it shows the info of the movie that was selected.

The downside to this project is that a lot of the methods I learned weren’t necessarily the most up-to-date. For example using componentDidMount instead of useEffect which is introduced in React hooks.

This project was the 2nd that I’ve built using React, and it taught me so much about ‘React thinking’. And what I mean by ‘React thinking’ is being able to break down the logic of a project into small components that interact with one another.

Breaking down each process into its own component with functions, with a specific job. Then returning the data that will be passed into the next component via props. This project also taught me about state management. Setting the state based on the data, as well as clearing it before changing the state once again. I chose this project for that very reason. I wanted a project where I would input information into a field, pass that information into the program and store it. Also being able to remove that information, or change the state of it (by setting a reminder or not).