• I set up React Testing Library.

• I wrote unit tests for the files operate.js and calculate.js using Jest.

• I created unit tests for all React components:

  • Use Jest snapshots to test the components.
  • Use React Testing Library to simulate user interaction.

Features added:

• I create a website consisting of 3 pages: Home, Calculator, and Quote.

• In this project, I used React basic styling.

• For every page, I created a route.

• I used React Router to make the routes work.

Refactor calculator.js: ♻️

• I refactored the Calculator component (components/Calculator.js) from a class-based component to a functional component with hooks.
• After the refactor was done, I tested the app in the browser and It kept the same functionality 🥳.

Feature calculator logic: ♻️

• I copied the files calculate.js and operate.js into a logic/ directory.
• I imported the files into my Calculator component.
• I Implemented the event handler to use the math logic from calculate.js and operate.js in my React component.

• Deleted all the boilerplate from CRA (text, images, styles).
• I created a directory called components.
• Inside components, I created new Calculator.js and Button.js files.
• In Calculator.js, I created a React component that matches this design:

• I used class-based components.

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• This view should be empty - you will add content in separate tasks.

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• Create a directory for all Redux state slice files.

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• Create a directory for all Redux state slice files.

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• Create a directory for all Redux state slice files.

Fetch data from the Missions endpoint (https://api.spacexdata.com/v3/missions) when a user navigates to the Missions section.

Once the data are fetched, dispatch an action to store the selected data in Redux store:

• mission_id
• mission_name
• description

NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).

Fetch data from the Rockets endpoint (https://api.spacexdata.com/v3/rockets) when the application starts (as Rockets is the default view).

Once the data are fetched, dispatch an action to store the selected data in Redux store:

• id
• name
• type
• flickr_images

NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).