Why no code
There are many tutorials on getting started with React on the internet, examples like to-do lists and hello world projects in React. However, I found the concept of what exactly React is and how it works to be is still quite confusing for many. That is why, in this post, I will be focusing on what React components are, and technology does. What this post won’t do is show any code samples, discuss how React it works under the hood or why it is better or worse than other solutions. It will be just a teaser.
What is React
First, to explain what React is. I could go into the details of it being a library, or JSX or whatever but I won’t. Just think of it as a tool used to build web applications.
This tool combines three programming languages that often work together: JavaScript, JSX (XML like language) and CSS.
What are the languages used for?
Second, before going further into the details on how React works, let’s look at each of those three languages are used for?
Every React component does some work. This can be loading data, doing some calculation or something else. This work is done by JavaScript.
In order to display our components, we need to define how they are structured for the display. Is it a list or a table, which elements are grouped together, and which are separated? For this we use JSX. JSX is an XML like markup language that we use to define the structure for our display.
The last part is CSS. When we have structure and logic, our components need to look pretty. This is where CSS comes in. It is used to define how our application looks and feels. We can define what style of font is used, background color, border and many other design decisions that we want to implement.
React component
By this stage I have already used the term React component multiple times. Before I continue with anything else, it is important to understand what a component is. A component is a building block combining JavaScript, JSX and CSS. Once it is all glued together, components give us a final output for our browser to display.
Now how it works in an application?
It would be possible to create a whole application in a single component. But that would not be the best choice for several different reasons. Large components are not reusable, they are hard to modify, difficult to test and more functionality usually means more points of failure. Therefore, we usually split applications into many small components.
To connect this way of organization with real-life example, think of each component as a Lego blocks. A single block doesn’t do much. And having one large block wouldn’t be that useful as it would not be very flexible. However, having many small blocks, we can build many different things. Components can be combined with other components, and each component can contain separate components.
As another example of splitting components, we can look at a car. Cars have many functionalities and can be viewed as a single complete unit. But when we look deeper into it, we can see many smaller pieces, each doing its own work. There is an engine, seats, breaks, mirrors and many more. Each of those pieces are a combination of smaller ones that have their own functionality. Take a wheel for example. It has a metal hub that attaches to the axle, there is an inner tube, a tire and a rim.
We can look at a React applications in the same way. We build many small pieces that when combined work as a complete application. I have already mentioned that each component gives us an output result to display in our browser. If we think of our Facebook web page, it is built using different components. One of the components is a chat window, another is a list of contacts, the timeline is again another component and each post on it is also a component. When we combine the outputs of all those components, we get a complete web application solution.
Wrap up
There are many other important things to understand in React. How to write components, lifecycle, state and many others. But I do hope this article explained what a component is, what is its purpose and how it all fits together. In the next post, I will be focusing more on data component works with, both passed and internal.
Top comments (0)