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

# Header
The `Header` component will be used to display the name of our app on the top of the screen. We’ll make changes to the `Header` component and export it to the `App.js` file.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';
import Header from "./Header/Header"


const App = () => {
  return (
    <React.Fragment>

      <Header />

    </React.Fragment>
  )
}

export default App

:root {
  --brand-color: #0ea5e9;
  --dark-color: #0f172a;
  --mid-color: #cbd5e1;
  --light-color: #ffffff;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



body {
  background-color: #e9ebf0;
}


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

The CSS for the `Header` component is already present in the corresponding CSS file so it won’t be covered here. However, it’s advisable to explore the code and experiment with the snippets, which will improve any existing core understanding you have of the concepts.

## React fragments
There’s one limitation with components in React—they allow us to return only one element. If we want to return multiple elements, we need to wrap the elements within an element like `div`. An example of this is provided below.

```
import React from "react";
import "./Header.css";

const Header = () => {
  return (
    <div>
      <header className="appHeader">
        <h1 className="appTitle">My ToDo List 📃</h1>
      </header>
    </div>
  );
};

export default Header;
```
Wrapping multiple elements with `div` adds extra nodes to our DOM, however. To avoid this, a cleaner alternative is to use `React.Fragment`.

```
import React from "react";
import "./Header.css";

const Header = () => {
  return (
    <React.Fragment>
      <header className="appHeader">
        <h1 className="appTitle">My ToDo List 📃</h1>
      </header>
    </React.Fragment>
  );
};

export default Header;
```
This can be helpful while rendering multiple child elements or components in a single parent component.

> **Note:** To learn more about this, check out the Educative Answer post on  [React.Fragment](https://www.educative.io/edpresso/what-are-react-fragments).


Understand the Header component and the use React.Fragment

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

Header Component

Header