Demo: https://muraliprajapati.github.io/weather/

React Beginner: Part I

Creating a simple responsive weather app using React

If you have not heard of React, Redux, React-Redux, blah-react, blah-blah-react… (and the blah continues) then you are probably living in pre-modern-js framework era but no, you have heard those buzzwords and you also know that there has to be something special there as every JS survey be it StackOverflow developer survey or this article or this HackerRank report tell the same story…React is the new Cool.

One thing I liked about React is that it is all about community. Yes, Facebook has just developed a library for UI but the upbringing and eco-system building are done by the open source community by building powerful libraries like redux, react-router, redux-thunk to name a few.

So, to be a part of this amazing community and to enhance my understanding of web development I learnt React in the last few months and now it is the time to contribute back.

About the App:

In this tutorial series, we are going to build a simple responsive weather app using React from scratch. We will also use OpenWeatherMap API to get weather data and going to deploy it on GitHub pages.

Demo link: https://muraliprajapati.github.io/weather/

Source code: https://github.com/muraliprajapati/weather

Things we will go through:

1. Setting up a React project from scratch

2. React components and lifecycle hooks

3. Event Handling

4. Lifting up the state

5. API call using Axios

6. Deployment on GitHub pages

Prerequisites:

1. Understanding of Node, NPM

2. Fair knowledge of HTML, CSS (Flexbox mainly) and JS

3. I will suggest you get familiar with some ES6 features like Template string, Arrow functions and Object destructuring. Read about them here.

My Setup:

Node version: 8.9.3

NPM version: 5.5.1

IDE: Visual Studio Code on Windows 10

Setting up the project:

Before we begin building our app make sure you have Node and NPM installed. If you have not go here.

Just to make you aware of the fact that there is a CLI tool called ‘create-react-app’ which does the job of creating initial project structure and building it but I’ve decided not to choose it because the tools or libraries this CLI is using are of importance in modern web-development era and many modern frameworks like Angular, React etc. are using them. So it is good to know about those tools.

We will be using Babel and Webpack for compiling and bundling our react app. If these terms are new to you, here is a quick intro to them.

Babel: JS is continuously and rapidly evolving year by year with the new features being added in ECMAScript standard. It is hard for browser/node developers to implement these feature very quickly. That’s where Babel comes into the picture. Babel is a compiler/transpiler which converts new JS/ES6/ES7 written code to ES5 a standard which is supported by all the major browsers and node.

Babel has different presets for different types of compiling like it uses preset env for ES6/ES7 compilation and react for JSX (we will talk about this) compilation.

Webpack: Webpack is very powerful and popular code bundler which does the task of taking all the js/css codes and jpg/svg/ttf files and combining them into a single bundle file. All of the bundling information/configurations are provided in a webpack.config.js file. As like babel, webpack has many loaders and plugins to help it in doing the job.

With this quick intro to Babel and Webpack, Let’s start…

Initializing the app:

npm init –y will create package.json with default configuration values.

Installing dev dependencies:

Here we are going to install dependencies required to compile and build our project.

npm install webpack webpack-cli webpack-dev-server --save-dev

Webpack-dev-server will build and serve the files over HTTP and will watch for any file changes.

npm install babel-loader babel-preset-env babel-preset-react babel-preset-stage-2 --save-dev

As I told you earlier Babel needs plugins/presets to work. Babel env preset will compile ES6 features and react preset will compile JSX syntax. Babel-preset-stage-2 will allow features like class-properties (arrow functions in class).

npm install css-loader style-loader --save-dev

css-loader and style-loader will allow us to import css files in react component’s js file. I know it’s weird.

Installing React:

npm install react react-dom --save

Now open package.json present in project folder and the following code in scripts object.

"start": "webpack-dev-server --colors --mode=development",
"build":"webpack --mode=production"

--colors flag will give colourful logs in terminal and development mode will generate the non-minified bundle.js file. Another value of mode is production, which will generate minified and optimized bundle.js

So now your package.json should look like this,

package.json

Setting up babel and webpack:

Create a .babelrc file in root of your project folder and add following code,

{
"presets":["env","react","stage-2"]
}

.babelrc is a configuration file for babel which tells babel to what presets and plugins to use while transpiling.

Now Create webpack.confiig.js file in project folder and add the following code.

Let’s understand the webpackConfig object.

entry: A file which is an entry point for our app. Webpack will start resolving dependencies using this file. We will create index.js file in src folder very soon.

output: path tells webpack where to put the bundled js file and filename is the name of the bundled file.

module: It holds all the configurations of different loaders we are going to use. A loader is an additional piece of code which allows different files like CSS/SCSS/JS to be imported into JS file using require or import. We will discuss how to use loaders when we will add some.

devServer: This object specifies the folder that will be served by webpack-dev-server.

Now let’s add some loaders.

babel-loader and css-loader:

Add the following code in webpack.config.js

In webpack, transpiling is done using babel-loader. The test is a regular expression against which webpack will match files extensions and transpile them.

In webpack, loaders are used from right to left so the css-loader will read css file imported in js file using import/require statement and style-loader will add this css to a webpage by injecting a <style> tag into it.

As every css file’s content is being added to the single <style> tag, we need to be careful while writing style rules and css classes.

At last, we have exported the config object.

webpack.config.js will look like this after all the configurations.

Creating index.html:

Go ahead and create an index.html in dist folder add the following code.

bundle.js will be generated and placed in dist folder by webpack.

I think it is good time to add the icon libraries to our project. We are going to use FontAwesome for general purpose icons and weather-icons by eric_flowers for icons for different weather conditions.

Add this FontAwesome CDN in head tag of index.html.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

To setup weather icons,

1. Go to http://erikflowers.github.io/weather-icons/ and download the zip file.

2. Extract the zip. Copy css and font folder and paste them in dist folder.

3. Open css folder and then delete every file except weather-icons.min. No changes in font folder.

4. Add link of this css file to index.html.

<link rel="stylesheet" href="./css/weather-icons.min.css">

Creating first React component:

Create an index.js and style.css files in src folder add the following code.

Render method of ReactDOM takes two arguments, first one is the component we want to render and the second one is where do we want our component to be attached which is the root div we created in index.html file in the dist folder.

Congrats. You have created your first React component. WeatherApp is a stateless/functional component which returns a simple markup. We will talk about stateful (Class component) and stateless (Functional) component very soon.

At this point, our project structure would look like this (ignore .vscode and .gitignore).

Project structure

The moment of truth…

Run the following command in the terminal/command prompt:

npm run start

If everything goes well then you will see below screen when you hit http://localhost:8080

If you see this screen that means that our webpack and icon’s setup is working perfectly and we can continue building our weather app.

In next article, we will talk about React components and will create different components for our app.

See you there. React Beginner: Part II.

If you liked this article don’t forget to clap 👏. If you have any suggestion or query feel free to post here in comments or ping me on twitter.