Adventures in React

Hi everyone!

Long time no see! In all of this time a lot of things happened in my life and I was a little disconected from this blog. But now Im back and I have the intention of helping the audience in choose the appropiate technologies to work in the beautiful world of choices that we have now to create things in the IT industry.

Today Im going to talk about React, as by destiny forces I required to be prepared in this technology for a potential client as the main reason and also because it is the new trendy stuff around.

React Logo by Facebook

 

…So what is React by the way?

React is a Javascript library created by Facebook, which provides a rich api for give structure to the content inside the view layer of any web application through a component oriented architecture.

So then… what is a component oriented architecture? The main idea of this concept is that you build your whole application by sectioning it into small pieces of functionality called components, in which each one of them has its own behavior and comunicates across other components in favor of reusability and organization.

First Challenge. Getting Started

The first issue that I ran into was that there were a lot of ways to start a React project and I took some time to decide which one to choose.

Some of the concepts then started to popup like JSX ,gulp,babel and ES6 topics,webpack,hot-dev servers,etc along the blogs and the resources that I was reading.

I was kind of paralized of the whole technologies around working for react so I went through my friendly scaffolder friend Yeoman.


Yeoman Logo

I went for a search on yeoman to find a template that could help me in startup quickly and I found two interesting ones: React-fullstack and React-Webpack.

Choosing the best option

At first I went through React-fullstack which actually looked very promising, as it provided a good separation of components and injections of SASS styles, along with Javascript classes and imports via Babel and a setup of already preconfigured settings of webpack which I required to understand in some part.

After digging the whole structure of this template and making changes of it, I saw that there was some functionality plugged for me in the back that were not totally at my control and that I didnt understood very well(or maybe yes but I didnt want to spend much time in this).


React Starter Kit Landing Page

 

Then I looked at React-Webpack and it seemed to be a more basic template, which I was not pretty confident at all as I thought that some pieces that I wanted from the first template wont be present on this one.

But after reviewing through all of the parts composed in the template, I was taking more preference on this one as I had more control over it thanks to its simplicity.

I then started to integrate some bits from React-fullstack like having styles in each component and some other webpack and babel configurations to have extra features.


Component Organization in my project.

This is the babel config settings that I have in place.THe lower the stage,the more experimental status and “do at your own risk” features you have.So in stage-1 you get extra ES6 features like fat arrow object context and property initializers.

1
2
3
4
5
6
7
{
"presets": [
"es2015",
"react",
"stage-1"
]
}

I will place some more cblog posts on my way to learn React.Stay tuned!

Share