Why React is incredibly mind-blowing [React JS].
“Hey Dante! I know HTML, CSS and Vanilla Javascript so damn well, so what’s the use of learning React ?”
Thinking React is a whole new world for you to figure out?
Are you thinking you have to learn extremely difficult concepts in React?
Or are you feeling reluctant to jump into React?
Worry no more because this article will give you the momentum you need to dive right into it with pleasure.
By the way guys, I am Agbejule Kehinde Favour.
Without further ado guys, let’s headbutt this stuff !
Coding with React feels like coding with Javascript on steroids. Want to know why? Lets find out!
- React is a Javascript library for building fast and interactive user interfaces.
- It was developed by Facebook in 2011.
- Companies like Facebook , Instagram, Airbnb, Netflix etc. use React for their apps
- It is the most popular Javascript library for building UIs.
The other two competitors are Angular and Vue.
Here is the trend chart:
So if you are looking to expand your job opportunities as a frontend developer, you should have React on your resume.
First, lets talk about components.
#COMPONENTS
A react app is made up of a bunch of independent reusable components.
These components are composed to make complex UIs.
Components are the engine of your UI.
Every React app has at least one component .This component is the root component of the app. It represents the entire app and contains children components.
In other words, React apps are essentially a tree of components.
Components can also be made reusable.
For instance, if you want to use a nav bar component in different parts of your app but you want to change a title, you can customise that nav component using “title” as a props ( it will be explained in the article below) which makes that nav bar component reuseable.
App is the root component
Then you have the children components which are:
- The nav bar component
- The main container component; contains other children components like the ToDoCardcontainer component , and CreateCard component and so on.
Think of an app like Facebook.
The app is the root component containing the;
- Nav bar component
- Profile component
- Feed component
The Feed component also contains children components which are the comment component, Like component, Unlike component.
In terms of implementation, the components are implemented as a Javascript classes with a state and a render method or Javascript functions which acts as components (This will be discussed in further in another article).
# DOM element
You no longer have to manually update your DOM element. React takes care of that. How?
Every component in your app has a React element (virtual DOM) which keeps a lightweight memory of the DOM element (real DOM).
React takes a look at the virtual DOM and real DOM (DOM element) of your app, looks for changes in the virtual DOM and updates your real DOM if the virtual Dom is different from the real DOM.
Therefore, React helps to keep the virtual DOM and the real DOM in sync.
You no longer have to write queries and code to manipulate the DOM element (real DOM) unlike vanilla Javascript.
So the bottom line is that React reacts to state changes in your app.
“Now you know why it is called React!”
# Comparison quest
So you may ask;
“Why React instead of Angular or Vue”
Vue and Angular are Javascript frameworks. In other words, they are heavyweight.
React is a library. It only takes care of rendering the view and keeps the view in sync with the state and therefore lightweight and would be much more easier to learn .
Excited to jump into the awesome world of React ?
If so, JUMP RIGHT IN HERE!
Huge thanks guys!
You can drop in your thoughts on this in the comment section and don’t forget to hit the clap button if you liked this article.
Agbejule kehinde Favour.
Until next time!
Peace y’all.
