api_key_weather_app

Gain insights into creating five dynamic applications with ReactJS. Delve into hooks, APIs, and localStorage while building projects like to-do lists, quizzes, memory games, portfolios, and GitHub profiles.

ReactJS is one of the most well-known JavaScript frameworks. It was created by Facebook (now Meta). Being component-based and drawing on the most recent theories behind design systems, it allows you to design frontend software quickly and create dynamic user interfaces.

This course takes a project-oriented approach. You’ll start by building a “My To-do List” application, using localStorage, useEffect, and useState hooks, as well as setTimeout and nanoid. Then, you will build a “Quiz” application while learning to use the confetti package and ternary operator. Next, you’ll cover fetch API and build the “Pretty Sunny” project. Next, you’ll create the “Asia Explorer” memory game, creating catchy effects by dynamically adding class names. Then, you will implement a “Personal Portfolio” application. Finally, you will create a “GitHub Readme” profile to help you showcase your projects on GitHub.

Ultimately, you’ll be able to highlight your achievements on your resume, thus boosting your chances of landing a job.

Creating Five Impactful Applications with ReactJS

# Function-based components

Throughout this course, we’ll use a component-based approach to separate the entire React app into individual components. This will help us organize our code more efficiently. The main point of utilizing React is to make code more readable and easier to arrange. Components are self-contained UI elements that can be used anywhere in our project. They’re similar to JavaScript functions in that they can be called from anywhere in the code and only require that arguments be passed. The two types of components are class-based and function-based. We’ll use a function-based approach because we’re using advanced React.

# Folder structure
When creating components, it’s best if they only do one thing, similar to the suggested format of JavaScript functions. As previously stated, the components should be fully self-contained independent UI elements. There’s a common naming convention that must be followed while creating the components in React:
- Component file names should be capitalized.
- Component function names should also be capitalized.
- Components are mostly exported using the `default` export, whereas values and specific functions in the component can use a named export.

The following is an example of the application:

Learn about folder structure lists and how a react project can be divided into different small components.

Course Overview

My Todo List

React Fundamental Assessment

JavaScript Quiz

React Beginner Assessment

Pretty Sunny

React Intermediate Assessment

Asia Explorer

Advance Level React Assessment

Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Folder Structure

Function-based components