Migrating Weather application to React.js

Before getting started

For 1 weeks and half, I wandered in Github, finding an issue that is interesting to me. There are many people who are looking for contribution to get help, or many company to solve buggy issues. Those are all OK, but this time none of them is actually appealing to me.

SO, this time, I decided to enhance one of my project which I always wanted to be done since deploying the application, Weather App.

How is the weather?

Thanks to Google service, we can know the weather without an weather forecast or actually going outside.

But, when you wonder what the current weather is in a certain city, not your place, and if you want to find it out, Google is not a great option. It is not faster that you expected and it might be a too heavy web service.

Weather Application is a small-size web application to help search weather by a city name.

It uses Darksky API and Mapbox API to get real-time weather information.

What is the issue?

The issue is integrate the program with react.js. Which means, the app is currently only written in Node.js. It only has server-side program, and to render .html page, it relies on handlebars.

It perfectly works, but the problem is, It doesn't support responsive UI. When you view this on mobile-platform, it isn't good. Also, because it has many handlebar files, and render them, it took some time to load the pages.

These problem would be solved if the program is separated to server-side with node.js and front-end with react.js

Install React.js

To get started, we need to first install React.js.
npx create-react-app [app-name] will generate the React app in the directory. If you don't install react on your machine, it will ask for installation first.

After that you will get a sample react.js project.

Make a component structure

The application has mainly 6 parts. --- Header, Navbar, About, Search, Result, Footer ---. So, create a component tree like this.

Main/
|---Header/Navbar/
|---Header/NavBand/
|---Header/NavLink/
|--- Footer/
|--- Search/

And for each folder they have [component_name].jsx file.

Make a migrating a program from handlebars to .jsx

Main folder is a root container which will contain all components. This will use Switch and React.lazy load, and react-router-dom.

import React from "react";
import { Route, Switch } from "react-router-dom";
import "./App.css";
...
const App = () => {
...
  return (
         <div className="App">
          ....
         </div> 
   );
};

1. Search component:

const Search = (props) => {
  ...
  return (
    <div className={styles.main-content}>
      <p>Use this site to get your weather!</p>

      <form >
        <input className={styles.input} placeholder="Location..." />
        <button className={styles.button}>Search</button>
      </form>
    ...
    </div>
  );
};

1. Header Component

const Header = (props) => {
 ...
  return (
    <div className={styles.header}>
        ...
    </div>
  );
}

Like above two components, other component is implemented similarily.

What's the next?

Because of limited time, and so much works to do for this. I separate the issue into 3 more.

1. We need to make a REST API server ----> which will our client axios can get the request from there.

2. Make a different CSS style -----> So far, the program is using the same CSS style for now. Bootstrap and .module.css will be used.

3. Make a redux or hook to handle state and communicate with REST API. -----> this will make the app is fully implemented.

Once the above are all solved, the issue will be continued. I will update gradually once all three issues are done.