Migrating Weather application to React.js
Published: 2020-11-18 19:23:53

###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](https://kimin-weather-app.herokuapp.com/weather).
   
###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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwweag2qhdjft6dqupku.PNG)

[Weather Application](https://kimin-weather-app.herokuapp.com/weather) 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](https://github.com/klee214/Weather.app/issues/1) 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>
  );
};
```
2. 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](https://github.com/klee214/Weather.app/issues/3) ----> which will our client `axios` can get the request from there.

2. [Make a different CSS style](https://github.com/klee214/Weather.app/issues/4) -----> 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.](https://github.com/klee214/Weather.app/issues/4) -----> 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.