Components — The Building Blocks of a React.js Application


With only 10 days left to preorder my react.js tutorial book, I’d like to share an excerpt from it. It is the source of today’s free tutorial about components, which are considered the building blocks of a React application.

In software compartmentalizing code is generally known as modular programming. This is true especially if you are coming from traditional programming background.

And usually modules pertain to describing collections of pre-written, reusable code that serves a particular purpose. One module generally consists of one JavaScript file, for example object.js

However, React components consist of multiple parts.

React.js Components as Individual Bundles of Layout and Code

Because React focuses so much on the application view, React components can be thought of as visual blocks that your web application is composed of. In React, components are bundles of HTML, CSS and JavaScript code which identify one particular block of your application.

For example, here is my Twitter page @gregsidelnikov looked at from the vantage point of React components. React components follow in the foot tracks of nested HTML tags. They have parent and children, and the parent can also be a child of another component up the hierarchy chain.

Think of component design as the blue print of your entire application. Before you start writing the first line of code in your reactive application, it’s a great idea to map it all out on a piece of paper. It’s just a different way of thinking about your page design as a web application with unique elements.

In my new tutorial book: React Gems you will learn a lot more about this. This is just a starting point. This post is based on one of the chapters, it’s just a small excerpt.

Just like the first time you were learning about regular JavaScript DOM and realized that each HTML element (such as P, DIV, TABLE and others) is actually an object in a long tree-like chain of the Object Model, think of react components as visual areas that are also tied to some sort of software function. This time, this functionality will be custom-determined by you and the requirements of your application.

You can now see why Facebook and Instagram love using React. It helps break down feed-like elements into software blocks composed of components which are just bundles of CSS, HTML and JavaScript code. This design model is a lot more in touch with app-like behavior rather than just informational websites that use table-like layouts.

Bandwidth Salvation

React makes us think thoroughly about what each element will represent, because each component is tied to some sort of software function that will, in real time, update the data in each component without updating the entire layout. And that’s what makes React programming distinct from traditional web page design approach. You don’t have to reload the entire page like on traditional HTML websites.

This makes your application feel different, more responsive, and it also saves bandwidth. The non-reactive websites we’ve been building until 2017 is really just a lazy man’s design idea. Reloading everything just to see if there is a new alert isn’t exactly the best application design. Yet, this is how websites like Facebook have been working all of this time. And bit by bit, it’s starting to change.

But Reactive programming isn’t just a bunch of ajax calls that pull the data and replace an HTML element. It’s much more sophisticated.

Virtual DOM

Because fast access to only relevant components is usually the key to good application design here, this is where Virtual DOM comes in. Virtual DOM is really a quirky way to provide a fast way of modifying the DOM, while abandoning slower old-fashioned alternatives.

The Virtual DOM is hands down one of the greatest advantages of choosing to write your application with the React library. In fact, when you add react library to your web project, it behooves you to also add react-dom library. The two are just inseparable. All reactive JavaScript applications by default also include React DOM library.

This is where React’s Virtual DOM makes a big difference on the usability of your application. It’s what allows websites have that native application feel, where each element responds instantly to a touch event. We’re still building the app from familiar HTML elements, but the response rate to each event is brought about by a DOM that is significantly faster than even jQuery’s implementation.

Writing Your First React Component

Below you are seeing an example of what the very first React component you might write would look like. It simply renders the generic Hello World message into a DIV element. Some of this code will appear a bit peculiar if you’re a JavaScript programmer.

See, in React we write HTML inside JavaScript. This is the reversal of the traditional “JavaScript inside HTML” idea, where we write JavaScript inside HTML’s attribute tags (like onclick = “this.style.color=’red’;”) for example.

In React, writing HTML within JavaScript is achieved by JSX. It simply compiles HTML back to JavaScript. This might seem really strange at first, but it’s like JavaScript now has its own internal HTML processor. It does have limitations and not entirely pure HTML you’d expect. And that might throw you off at first.

But bear with this example, and eventually it will sink in. I struggled with it for a while myself, but when I realized what the purpose was, I thought it made things a lot easier. It definitely challenges you to think in a new way about designing some parts of your application.

Having said that… let’s move onto the first React component example:

Here, we first include the aforementioned React and ReactDOM libraries. You will be doing that a lot when starting a new reactive application from scratch. Next, we create a new instance of React class, using the React.createClass method. This isn’t the only way to initialize a React app and in my book React Gems we will take a look at this in more detail.

Finally, we call ReactDOM’s own method .render. And <HelloWorld/> here is the variable name HelloWorld we assigned the dinosauric React code to.

Basically, the React’s render method takes two arguments. You simply pass what you want to render as the first argument and where you want to render it as the second (in this case it’s the HTML element whose ID is “app”.) So from now on Whatever we assigned to HelloWorld variable will be rendered in an element like <div id = “app”>

And this is really the basic idea behind React programming. You build components and make them do things within specific HTML elements. Virtual DOM automatically takes care of fast rendering in the front view of your application.

But there is one more thing…

The HTML code highlighted in red is the part that will be written into the component’s rendering area. Yes, you simply type HTML direct into JavaScript statement. Again, this functionality is enabled by installing the JSX plugin from your node.js via babel. The process of setting this up is a bit complicated. But this is shown in more detail in my free YouTube tutorial from last week and also in the book.

Well it looks like we’ve come to the end of this tutorial. Congratulations on creating your first React component! I wanted to keep it simple and not overwhelm you with too much stuff that still needs to take place to set up React. But in my future newsletter episodes we’ll do something practical with React components.

My upcoming book React Gems you can preorder it here has been the source of this brief tutorial about reactive programming.

As the holidays are approaching us, I think this could be a great gift:) I am editing the book to the last minute, because I am sort of a perfectionist. But until then I will continue writing brief excerpts just like the one you just read, to get you a better idea of what the book is like.

Thanks for everyone for your support!