Challenge 02: Componentizing the application

🚀 About the challenge

In this challenge, you will have to create an application to train what you have learned so far in ReactJS

This will be an application where your main objective is to refactor a page for listing films according to genre.

The application is already fully functional but a large part of its code is directly in the App.tsx file. To solve this in the best way, it is necessary to divide the application into ** at least ** two main parts: sidebar and the main content that has the header and the list of films.

• The application has only one main feature, which is the listing of films;
• In the sidebar it is possible to select which category of films should be listed;
• The first category on the list (which is "Action") should start as marked;
• The application header has only the name of the selected category that must change dynamically.

👷 Preparing for the challenge

For this challenge, in addition to the concepts seen in class, we will use some new things to make our application even better. So, before going directly to the challenge code, we will explain a little bit about Fake API with JSON Server.

Fake API with JSON Server

Just as we use MirageJS in module 2 to simulate an API with transaction data from the dt.money application, we will use JSON Server to simulate an API that has the information of genres and films.

Navigate to the created folder, open it in Visual Studio Code and execute the following commands in the terminal:

yarn
yarn server

Then you will see the message:

Note that he started a fake API with the /genres and /movies resources in localhost on port 3333 from the information in the [server.json] file (https://github.com/rocketseat-education/ignite-template-componentizando-a-aplicacao/blob/main/server.json) located at the root of your project. Accessing these routes in your browser, you can see the return of the information already in JSON:

That way, you just need to consume these API routes normally with Axios.

🔧 What should I edit in the application?

With the template already cloned, the dependencies installed and the fake API running, you must create at least the SideBar and Content components that already have the files created. The files to be edited are:

• src/App.tsx This component contains the entire application with the exception of the Button component that does not need to be changed and Icon that also does not need to be changed.
• src/components/Content.tsx This component, still empty, must have all the logic and body responsible for the header and content of the application (section outlined in red):

• src/components/SideBar.tsx This component, also empty, must have all the logic and body responsible for the section that contains the title of the site and the navigation part to the left of the page (section outlined in red):

📄 License

This project is under a license MIT.

Challenge proposed with 💜 by Rocketseat 👋 Join this great community!