React series — Weather App — Part 2

Photo by Fabian Grohs on Unsplash

Hi, in the first part of this serie we talked about the application we are building. In this part we are going to do the initial setup of our application, adding some libraries and components and discuss a bit about them.

I’ll update the github repo for this project as soon as I release each part of this serie. You can follow or clone here:

lblima/react-weather-app

If you don’t feel comfortable with git, you can see the documentation and watch some awesome videos: link1, link2.

Ok, the initial structure of the project should look like this:

The first components we will install are redux and react-redux.

$ npm i redux react-redux

After install, let’s make some changes on index.js:

You can now start the application and open on browser: http://localhost:3000

$ npm start

The next step is change the project structure to make it ready to use redux. Let’s delete some files: App.css, App.js and App.test.js. Now let’s create new folders: actions, components, middlewares and reducers.

For now the application won’t work anymore, but let’s create a new app.js file inside components folder just to make it work again.

Now let’s change the index.js to use the new app.js component:

And finally let’s add new bootstrap 4 to our project.

Ok, let’s try again: npm start

Good, the app is now working again after structural changes. In the next part we will start to build other components and use redux.

Part 3: https://medium.com/@leonardobrunolima/react-series-weather-app-part-3-f33182fc6c8e

Thanks!

lblima/react-weather-app