Demand for React developers is skyrocketing, which means that having knowledge of this library is definitely going to be worth it! Some of the popular websites built using ReactJS include Dropbox, Netflix, and Instacart – and the list goes on.
Now, the common question that comes to everyone's mind is do we really need a JavaScript library, just for creating user interfaces? We can do the same using just HTML and CSS, right?
So what makes React so popular rather than just using vanilla HTML, CSS, and JavaScript? For that, let's first look at the 2 main features of React:
- Declarative Views
- Component Based Approach
Of course there is more to React than this, but we'll focus on these two features here. Before moving on and learning more about these features, we must clearly understand the browser DOM.
What is the DOM?
The DOM (Document Object Model) represents the web page as a tree structure. Any piece of HTML that we write is added as a node, to this tree.
With JavaScript, we can access any of these nodes (HTML elements) and update their styles, attributes, and so on. This means that the DOM enables JavaScript to access and modify the web page easily.
Now, any tree must have a root node, right? Here, the root node is document. Are you wondering where this document node came from? Well, it's part of the browser. Any HTML tag you write is going to be a direct or indirect child of the root node document.
The below image shows the equivalent conceptual tree structure of the DOM:
Now hopefully you have a clear understanding of the browser DOM. So let's dive into the two main features of ReactJS that we're gonna discuss today, namely its component-based approach and declarative views.
Component-Based Approach
Everything in React is a component. A web page is a collection of components.
Think of a component like a regular function in any programming language. What are the main advantages of functions? Reusability, abstraction, and avoiding redundant code, right?
Same with components in React. Don't get confused with the code in the below images, as we are using a mix of HTML and JavaScript. Hang in there, we will come to that in a second.
The above image represents a component called Card (since the function name is Card). As mentioned earlier, functions or components can be reused any number of times. That is exactly what we are doing in the below image. We are reusing the Card component (<Card />) four times. Keep in mind that, writing <Card /> is equivalent to <Card></Card>. (Stick to the former notation, since it's more common).
Congrats if you thought of this! The four <Card /> components are written inside another component called Home (since the function name is Home, <Home />). Congrats again if you thought of this!
Of course you can reuse the <Home /> component, which in turn is a collection of many <Card /> components. That is, we can nest any number of components inside other components.
Now comes a big question: if components are going to be nested like we mentioned, what is the topmost component? It's the <App /> component (provided by React). Any custom component that you write is going to be a direct or indirect child of the App component in React.
On a high level, the whole component structure looks like a tree with the root node as App.
Also keep in mind that component names have their first letter capitalized. This convention is used to distinguish between a React component and a regular HTML tag.
What happens if you don't capitalize the first letter of a component name? There will be an ambiguity, whether it is an HTML tag or a React component.
In the below image, the Navbar, Carousal, Services and so on are all components. Components altogether form the home page or Home component of a website. Neat, isn't it?
Components are laid out in the order in which they should appear in the page. Here, the Navbar comes first, at the top, then the Carousal comes below the Navbar, so on and so forth.
If you carefully observe the above images, we are using a mix of both JavaScript and HTML. This is known as JSX (Javscript XML). This is just a nice way to write React.
In the above image, we are assigning HTML to a variable named element, just like we assign values to variables in JavaScript. Of course, you can now reuse this variable (element) anywhere in your code like this:
