Weather App with React

React is one of the most popular JavaScript libraries used to create interactive UIs. Simply design views for each state in your application and React will efficiently update and render just the right components when your data changes.

In this tutorial we’ll learn how to build a weather application that shows the weather conditions of a particular city when you supply the city using React.

You don’t need much for this project, you’ll need the basic web dev tools (editor, internet connection, Dev Machine) and React version 16 or later.

Open command prompt and create a root folder to create your project files.

Then change directory into the created directory and install the create-react-app package:

The installation process will start immediately and once completed, you’ll have your react project successfully setup and launched on your browser in localhost:3000. Next, open the project folder in your preferred editor and start coding.

So first open App.css file and clear the data inside since we intend to add our own custom styles. Also, open App.js file and clear the contained data, we’ll build from scratch. Finally, delete the logo.svg file since we’ll not need the React logo showing up in our project.

This will be the major file that we’ll be working with. It’ll be a class based (if you don't know the difference between class and functional first go and check it out) component as it’ll basically serve as the wrapper component for every other component we’ll be creating coming next:

Given the nature of the app we are building, we’ll be needing three more components:

So let’s go ahead and create these other components and equally set them up accordingly. First, we create a new folder under src called components and inside this folder, we create three new files (title.js, UserInput.js, and weather.js).

You can visit my Github repo to check my code

Title.js
import React from "react";

UserInput.js

Weather.js

Include All this component in your app component with necessary imports.Next you can start your server and can check.

We’ve now seen how readable the codebase gets when we work with functional components, this is only just a simple project and it features get even better with more complex codes, hope you’ve learned something from here.

Visit my Github repo for the same

Also read my blog for Personal Portfolio Using Angular and Bootstrap here:

https://medium.com/javascript-in-plain-english/personal-portfolio-using-angular-8-and-bootstrap-5dde6fc7cf9b

Related posts:

There are a lot of options out there for students to do with their free time. Video games are one of such activities and for some, there may still be a stigma that gaming is for those who don’t go…

The cornerstone of great leadership is effective communication, but it’s not as simple as memorizing a few strategies and putting them into practice. Connecting with your team, inspiring your direct…

When women want something, they immediately talk about it. Men are more reserved in this regard, they are not used to talking openly about their desires. Because society requires them to be strong…