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

# Create the file structure
The file structure is similar to what was used in earlier projects. We use the file structure as displayed in the snippet below:

import React from 'react'
import './styles.css'

const App = () => {
    return (
        <React.Fragment>
            <h1>Folder Structure</h1>          
        </React.Fragment>
    )
}

export default App

import React from "react"
import ReactDOM from 'react-dom'
import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)


React

Dart

GoJS React

Typescript React

Vue.js

Here’s a brief introduction about the folders used in this project:
- The `Header` component does the same job as the `Header` component did in the previous projects. That is, it displays the project name at the top of the screen.
- We’ve included an `About` section in the project so that the recruiter can get a brief introduction about ourselves.
- There are various skills that a developer can master, but showing recruiters the skills in which we are proficient can make our job hunting easier. To that end, we’ve included a `Skills` component in the project.
- All the projects we created in this course are shown in the `Project` component. It will also help us display our proof of work.
- `Contact`: We should include a section with our `Contact` information in case someone wants to contact us about our portfolio.

# Add styling
Let’s add the styling properties to the `styles.css` file. We do this so that we can just add the class name to style our elements later in the course. 

Learn about the personal portfolio project’s file structure.

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

File Structure

Create the file structure