React series — Weather App Overview — Part 1
Hi guys, I’m going to start a new serie about React, but instead of to explain in detail what is React, we are going to develop together an application using some interesting libraries and discuss every part of this application, explaining the reasons and given alternatives. Feel free to ask anything about and suggest another way to implement each feature. Let’s have fun!
If you want a basic introduction about React, you can find at the end of this post some good links to start learning.
Let’s get start talking about the application. It’s a basic search engine for weather conditions in a given city.
In this project we are going to start using a basic structure and some naive componentes like redux-promise (I know, I know). The goal is to start with the basics and once the application start to become more complex we can update to use more robust components and libraries more aligned to real world implementation.
The final app will look likes the image bellow:
React itself is a great library, but to be honest, you can’t build a decent application without other libraries help. So, let’s talk about the tools, libraries and components we are going to use in this first version of our app.
We are going to use Visual Studio Code in this project, but you can use any text editor you want.
1 — create-react-app: It’s a boilerplate for jump starting React apps, it is very easy to use.
# Install the package globally with npm
$ npm i -g create-react-app# Use the default script to start
$ create-react-app my-app
In our project, we are going to use it. Of course you can setup your project manually, adding webpack, babel, EsLints, React Dom, creating scripts, etc. But, I prefer do not waste time with this initial setup.
Take a look on these other options:
2 — Axios: It’s a promise based HTTP client. We will use it to do ajax calls to the weather api.
$ npm i axios3 — Lodash: It’s a JavaScript utility library. We will use it to deal with the data from the api, round, sum, etc.
$ npm i lodash4 — Redux-Promise: It’s a small library to deal with promises in our actions creators. This library will be replaced in the future, but for now we are going to use it.
$ npm i redux-promise5 — React-Redux: It’s a predictable state container for React app. You can use Redux with other libraries, but this (react-redux) is specific for React.
$ npm i react-reduxOk, let’s go to the first part of out application. In your prefered editor, create the new app using create-react-app tool. The name of the app will be react-weather-app.
When finish you can access the folder of the generated application and we are ready to start.
In the next part I will explain the basic structure of the project and start to code!
Part 2: https://medium.com/@leonardobrunolima/react-series-weather-app-part-2-1d5e5e2d94b
Thanks!
References:
facebook/create-react-app
create-react-app - Create React apps with no build configuration.
github.com
