React Js Building blocks

In my last post, we talked about React Js a new front end technology for building dynamic web applications. Also we discussed on setting up the development environment for building React Js applications. We also built our first simple application using the create-react-app component. In this article we will discuss about, the building blocks of React Js applications. React Js as a framework for developing front end web applications is composed of various building blocks, which when interweave with each other, leads to the development of full fledged front end web applications. Let’s take a look into the building blocks of React Js web applications from a beginners point of view.

React Js web application framework is made up of the following building blocks.

  • Components
  • Elements
  • Views
  • Virtual DOM

Components

Components are most important building blocks of React Js. In fact, if we consider a React Js application as a brick wall, each individual visible brick is a component. Each component will generate some output that is something visible to the user, so that the output of the entire set of components will make the React Js application as a whole. This can be demonstrated by the diagram below.

 



React js component

React js component

When looking in terms of code, all React Js components are JavaScript class that extends then from the React.Component class. Each component class will have a render method that will produce the HTML content that is rendered to the screen in place of this component. The generated html contents may contain plain HTML and also may contain other React Js elements which in turn produce different HTML content based on their own render method logic.

This is demonstrated in the following diagram

React js element

React Js Element



The following code block shows a simple React Js component.

class DemoComponent extends React.Component {

    constructor() {
        this.state = {
            isActive: true
        }
    }

    render() {
        return (
            <h1>Hello {this.props.username}!</h1>
        )
    }
}

ReactDOM.render(<DemoComponent username="karthic" />, document.getElementById('root'))

The above code shows a simple React Js component that shows a basic message to the user. The message is passed to the component via props and then the component also has a basic dummy state. We will explore the code level details further in future posts.

Elements

React Js elements are the one that we will get, if we further split the component into smaller parts. From a beginner point of view, React elements look the same as HTML tags, but will produce some further content in the final output rather than displaying as such. This further content ranges from basic HTML code to other custom React elements. React elements makes possible to make a regular HTML developer reuse components that have it’s own set of business logic by doing coding in a HTML based style. React Js elements appear just like HTML tags during development. This enables a front end developer to assemble a dynamic web application from pre developed components by coding and including them with little effort.

Views

In simple terms a view can be considered as a portion of your web page, that can be logically grouped into a single entity. A view may contain a single component or a group of components as illustrated in the above block diagram. The whole application is in fact divided into a set of views. Each view represent a single entity in terms of logical functionality. This logical entity in turn contains list of components and elements.



VirtualDOM

I am not sure of whether the VirtualDOM can be considered as one of the building blocks of React Js. But it the main entity behind the success of React. The VirtualDOM concept solved almost all the discrepancies and performance implications related to DOM manipulation in normal web applications. Virtual DOM represents an object that is almost similar as that of normal DOM and makes the DOM related changes in memory and makes the final and optimized changes to the real DOM. This reduces a lot of load on the rendering process in front end web applications. Hence React Js always served as the most preferred technology for front end web applications, with lot of data manipulation in front-end.

Conclusion

Apart from these above said building blocks, there are two more concepts in React Js where all the developers have to come around. They are Props and State. Props are the means by which data is passed to a component for its processing and based on this data, the corresponding content is rendered to the output. State is an object that is contained in a component, that maintains the current state of the component. A component renders specific content for each state and re renders itself when the current state is changed. We will go into further details of state and props in one of our future posts. I hope this post gave a base level detail of React Js building blocks. Lets get into further details later, one small step at a time.




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *