React Tutorial: Build a Weather App From Scratch, Part 2

React Tutorial: Build a Weather App From Scratch, Part 2

React Tutorial: Build a Weather App From Scratch, Part 2. Boot-strapping an app with create-react-app. Using React with TypeScript. React Hooks. In this tutorial, we continue the step-by-step guide for creating a weather app using React and TypeScript, including methods to stylize the completed build.

In this tutorial, we continue the step-by-step guide for creating a weather app using React and TypeScript, including methods to stylize the completed build.

Introduction

In this tutorial, we continue the step-by-step guide for creating a weather app using React and TypeScript.


Bill Murray next to completed Weather App from tutorial

Welcome back to this tutorial on using React and TypeScript to build client-side web apps. In Part 1 we covered:

  • Boot-strapping an app with create-react-app
  • Using React with TypeScript
  • React Hooks

In this post we will complete the tutorial by:

  • Integrating the  Open Weather API
  • Using asynchronous communication
  • Applying more hooks

You can find the code on  GitHub.

To get real weather data we will need to talk to a service. For this tutorial we’ll use the  Open Weather service. The service is  free but you will need to register and create a key to use the service and authenticate all  API requests.

react typescript scss typescript tutorial

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React With Typescript, Redux And Thunk - React Javascript Tutorial

Wanted to make a video with redux and redux-thunk using typescript. I found this a bit confusing when I first learned it and hopefully this videos makes the ...

Step 7 - React tutorial- Functional React components in TypeScript

Step 7 in the "React, TypeScript, and TDD" tutorial. React builds UIs as a tree of components. See how to make stateless functional components correctly with TypeScript.

React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Ts

Using the React cloneElement is a better way to build a component API props in ES6 Javascript and Typescript. Here's a tutorial on how to do so.

Complete tutorial - Grid component with React + Typescript + Storybook + SCSS

Grid component with React + Typescript + Storybook + SCSS. You'll learn: Set up create-react-app with typescript template - Create a simple Box component - Create a Reusable Grid Component using Flexbox - Create Grid Ruler using CSS Grid - Handle Responsiveness in Grid Layout - Add dynamic props JustifyContent and AlignItems - Set up storybook - Write Grid Document in storybook - Deploy storybook with Netlify