Understanding base repo

[AlexisTercero55]

Understanding base repo edehlol/weather.

• [ ] HTML
• [ ] CSS
• [ ] React
• [ ] Redux
• [ ] API/data
• [x] Running base app.

[AlexisTercero55]

Wheater app design

[AlexisTercero55]

Base repo review

Repo cloned in local machine and successfully running in localhost.

Environment differences

This app use create-react-app as bundler and plain Redux for state management:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "gh-pages": "^3.1.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.2",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

[AlexisTercero55]

Files review

src/index.js

Centralized state handler supported by plain redux

{ createStore, applyMiddleware } from 'redux'

<Provider store={createStore(reducers, applyMiddleware(thunk))}>
    <App />
</Provider>

image from freecodecamp.org

Async operatipos supported by

thunk from 'redux-thunk'

Implemented reducers on

reducers from './reducers'

Top level componet from

App from './components/App'

[AlexisTercero55]

Files review

src/components/App.js

Weather app component from

Weather from './Weather'

Weather app container styles from

Bootstrap Fluid containers

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div className="container-fluid">
   <Weather />
</div>

To change

Consider use <Container fluid /> react-bootstrap component instead .container-fluid CSS Bootstrap class

import Container from 'react-bootstrap/Container';
import Weather from './Weather';

<Container fluid>
   <Weather />
</Container>

[AlexisTercero55]

Files review

src/components/Weather.js

Actions

{ fetchWeatherAndLocation } from src/actions/index.js

export const fetchWeatherAndLocation = (city) => 
{
  return async (dispatch, getState) => 
  {
    await dispatch(fetchLocation(city));
    const coords = getState().location.coord;
    await dispatch(fetchWeather(coords.lat, coords.lon));
  };
}

Components

import Header from './Header';
import CurrentWeather from './CurrentWeather';
import HourlyWeather from './HourlyWeather';
import DailyWeather from './DailyWeather';
import WeatherDescription from './WeatherDescription';