React: An Introduction

This is the first of a series where we will go from absolute newbies to building functional applications in react.

React is a JavaScript library for building user interfaces

React is a powerful tool for creating dynamic web applications that are super-responsive and is created and maintained by Facebook.

Thinking in React.

In react, separation of concerns is not talking about separating the structure, style and behavior of the application.

Rather it is separating the application into various single-purpose components that come together to for the entire application. So, when building applications using react, you think of the application as a combination of various single-purpose components. consider the image below:

todo application with various components

The different components of the application are identified with the rectangles.

It is important to note that the number of components you have in your application depends totally on you.

However, it makes it easier to make each component responsible for only one action in your application. This helps to detect bugs easily and gives you the option to reuse each component in other areas of the application.

This post is just to introduce us to the way react allows us to think about our applications. In the next part, we will take a look at how components are created.

Comments (5)

Raghavan alias Saravanan Muthu's photo

Hey, that is a good series. I am all up for learning this. Thank you :-)

I am learning Angular recently and have heard just about React. The way you had explained React is more or less similar to Angular (accordingly to me - as on date) as Angular is also component oriented- except one difference. Here every tiny piece / component / UI control of a page is independent and we are talking at level rather than a section of a page that is driven by a component in Angular. Am I correct ?

Also another analogy, I have from the Java world is the Portlet, which is also similar to the Angular component. I know we need to unlearn for the new learning, but I am trying to use my previous learning only to get the concepts better :)

Show +2 replies
Folajomi Shotunde's photo

Raghavan alias Saravanan Muthu Yes indeed, I plan on creating one or two applications over the course of the series

Raghavan alias Saravanan Muthu's photo

Folajomi Shotunde That is awesome :) I am really, eagerly looking forward for the same. Thank you and Best Wishes!!!