React Weather App

First, create a new React project.

Before implementation of any React project, 

    Spend some time and think about the parts (components) of the application that you can divide into. As an example, I divide this weather app into three components.

1. Header
2. Weather Card List
3. Weather Card

Project File Structure

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

app.js

import './App.css';

import Header from './components/header';

import WeatherCards from './components/weather-cards';

function App() {

  return (

    <div className="App">

      <Header />

      <WeatherCards />

    </div>

  );

}

export default App;

header.js

import React from 'react';

export default function Header() {

    return (

        <h1 className="header">Weather App</h1>

    );

}

weather-cards.js

import React from 'react';

import Data from '../data/weather-data';

import Card from './card';

class WeatherCards extends React.Component {

    state = {

        hideMoreDetails: true

    }

    render() {

        return (

            <div >

                <div className="weather-cards">

                    {Data.map(weather => {

                        return (

                            <Card key={weather.id} weather={weather} hide={this.state.hideMoreDetails} />

                        )

                    })}

                </div>

            </div>

        );

    }

}

export default WeatherCards;

card.js

import React from 'react';

export default function Card(props) {

    function handleClick() {

        alert(props.weather.moreDetails);

    }

    return (

        <div className="card">

            <h3>{props.weather.weekDay}</h3>

            <small>{props.weather.date} {props.weather.year}</small>

            <img src={props.weather.url} alt="weather-image" />

            <h6>{props.weather.temperature} F</h6>

            <small>{props.weather.tempInWords}</small>

            <h5 onClick={handleClick} style={{ cursor: "pointer" }}>More Details</h5>

        </div>

    );

}

React Weather App Code (Github) - https://cb.run/fmaH

React Weather App Video - https://cb.run/jZ0Z

Related:-

React Todo App Video - https://cb.run/2YdN