Components — The Building Blocks of a React.js Application
To get a good idea of how flex works try flex layout editor on this page.
In software compartmentalizing code is generally known as modular programming. This is true especially if you are coming from traditional programming background.
However, React components consist of multiple parts.
React.js Components as Individual Bundles of Layout and Code
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.
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.
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.
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
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…
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!