[EN] Let’s Write – new hope

React, Redux and Router finally work :) Previous post was something terrible. But I spent all my free time and after 2 days I understood how it should be done. All I owe this page: https://css-tricks.com/learning-react-router/. They sad me how to run React with Redux.

Officially assume that the application starts at this moment. What has so far I tried to add let it be forgotten :P

I added new gulpfile, I added Webpack and I started using imports from ES6 (EcmaScript6, newest standard of Javascript). You can see the current code in the repository: https://github.com/zajacmarekcom/letswrite.

Delving into the topic I felt again the most wonderful feeling in programming – when you are swimming in the tone of issues and suddenly occurs the moement when it all in your head connects into a whole. Every time I have the impression that it serves to this such a small switch, which, after appropriate sentence in a article switches. From chaos formed vision :D

Changes

I introduced in the project new elements, with which from now I’ll work.

Webpack

Webpack allows change modules to final assets for application. As I wrote above, I started using imports and Webpack allows me create final js file from many small files. I didn’t configure it for SASS files yet but I’ll deal with it. I added Webpack following the example given by my site CSS-Tricks. I have to get to know it better.

Redux

Redux is the library which is using to manage state of the application. It is independent of framework but is most often used with React. I was able to add it to my project. Moreover, I already know something how it works. Redux is used to store application state in one place. Components which changing state can’t do that directly, they must sent action to Redux. Action consists of type (name) and data. Every action is processed by reducers. Reducer is a function which process actions and modify application state. We will see if in the process of adding new features will I comfortable working with this.

Router

Router is the library used to managing components for URLs. Thanks to Router we can easy add ability to passing between subpages i SPA (Single Page Application). It manage browser history so that the user thinks he is going between different pages having really just a changed components which are displayed.

Let’s do it correct

What now is display doesn’t look appealing:

But this is very important to me.

First of all, this page has been running with Router so when you click displayed links content will be changed. Second,  this page is good foundation for the home page. We’ll add new components and styles only. Third, look at the address in the browser – I ran it through the HTTP server so it is true website now :)

A lot of things I do by copying from others and modifying it. So far while learning new things it worked so I hope that in this project it will also work :P

Future

I must rethink using Bootstrap. It may, however, be better to add it.

At this time I will focus on the main page. Firstly because it’ll not require downloading data from the server. Second, it’ll be simple, and when I’ll do layout for it I can use it for the entire application.

Enter the fray

I know that for a lot of people who work with React or with frontend this what I do can be trivial. But I’m still learning. I needed 2 weeks to reach the point where I can say that I understand what I do. I’m sure that in next posts we’ll see big progress. Always is the hardest to get started.

Writing in two languages (Polish and English) takes me a lot of time but I’ll not give this up. I’ll not stop adding posts in Polish because my English is poor, and if someone from Poland will have any doubt while reading my text in English he can verify what I mean.

Tell me about every wrong in what I do. I want to gather feedback and learn well this environment because so far I worked mainly with backend.