Is Learning ReactJS For You?

Yazan Aabed
Jun 4, 2018 · 8 min read

ReactJS is an impressive library to create things and build a user interface. Team form Facebook made it for us.

You can follow me on twitter or check my latest articles on my site Also, I have my publication at medium

Before I learn to React, I don’t know why people love working with it that much, and companies ask about it every frontend interview. Moreover, people told me that writing HTML in a separate file is the best practice for your project, now React team write the template on another way inside your JavaScript file.

There is too many questions come to your mind before you learn React. However, I decided to start learning React. After I learn React, I understand why we write the template in that way. It shows to me that React is the future for the web development, it changes how I think about developing web applications.

You can learn to React by yourself. I recommend every front-end engineer to learn it. React extends your knowledge, especially how you think about your design, your components, your user interface, your application architecture.

In this article, I give an overview what I know about ReactJS and what I learn about it. I hope you enjoy reading this.

Watch this video to know five things about React. — Dan Abramov & Burke H✪lland

#FiveThings About React

Before I start to discuss the building items for any React project, I recommend people to watch these courses:

I discuss the elements of any React application and where is the starting point for any application with React. Also, I give an overview steps to build any React application.

Image for post
Image for post
This is my first React application 🔥✨
  • We need to import React writing React application.
  • We need to import the render function from react-dom.
  • We need to define where to render our application using render method.

Root Element

Any React application need a root container to start from it. render function give us the ability to render any React component to HTML DOM. The most thing I like about this render function is that you can test your application easy and render your application to fake DOM element with your testing library.

Image for post
Image for post


The component is a View in MVC. You divide your application as you see the application design. For example Header, SideBar, Button.

Also, a component could be a page or a container like Home, Login, Dashboard.

React application divided into multiple React components, and every component contains a render method which is the entry point for your component.

Image for post
Image for post
Paragraph component

React library use the render method to know what to render when you use the Paragraph component. And this is how we use our components inside our project.

Image for post
Image for post
Use Paragraph component

I recommend you try to build component by yourself or try to divide any design you got in your job to component and think why you divide it like that.

Make sure to understand this quote before you divide your application into components.

“A component should, ideally, only be responsible for one piece of functionality.” — Fullstack React, Sophia Shoemaker & Nate Murray.

Components contain two primary weapons

You can use these two weapons to make your component more reusable and more flexible.


Props are the inputs for your component, owned by the component parent and passed from there. Any component use props more reusable than other components hide its values inside it.

Image for post
Image for post

Props are the primary weapon for reusability because if we define the blogs array inside the Blogs component, can’t use in other places in the app or with other blogs values other places in our application needs.

These type of component that works only with props called stateless components. Every time you give the same component same input, it renders the same output or the same DOM.

Things to check when start working with props:


The component itself owns a state, a state can be modified using the component itself, or can be initialized using the props from outside.

The one place the state initialized is inside the constructor, after that you need to use a setState method from React.Component object to modify the state for your component.

Image for post
Image for post
Login component contains its state and manages its state.

These two weapons could be your enemy if you don’t use them wisely, mainly when you use the setState method in wrong places and trigger re-render without any need. So, please think twice before you design your components and what to use. If the component doesn’t take a state and get the values from outside, it is more reusable this called stateless components if the component manages its state this called stateful components.

Image for post
Image for post
Photo by Leon Rojas on Unsplash

Virtual DOM

React team modify things for us it doesn’t allow us to work with the browser DOM is built for us something called the virtual dom. React team take care of the changes with the DOM in an optimized way.

The problem with manual change for DOM:

  • Hard to keep track for every change.
  • It is slow for some cases to change the DOM using the JavaScript.
  • The Facebook team gave a talk and said that JavaScript is very fast but modify the DOM is too slow.
  • React team said that your component has to return the HTML you wish to see and react team take the responsibility from you to update the view for you.

The main reason that React team doesn’t take the state from the DOM because the DOM is too slow, so they decide to make the state change from their side.

Why would we want to do that our component’s state from its DOM representation? There are two good reasons:

1) It’s faster, 2) It’s less complicated.— REACT, REDUX AND JAVASCRIPT ARCHITECTURE


Steps to build react project

First thing for React application is to divide your UI into components and make sure that every component do one thing and responsible for one thing.

When you build the application components, try to build the components with static values and make sure it works fine without any server or any BE.

Think which component of your application contains a state. Add static state for your component and try to change it. Add events trigger to move data around the component. After this add the server to your components.

Timeline for React component

You can read more about React life cycle here.

  • The constructor for the component is run, and the initial state now did.
  • Then render method is called then call render for children to make sure to render the component.
  • The initial render now run.
  • The componentDidMount lifecycle is triggered.

Routing with React

The user request the index.html page and then the server doesn’t care what the user does.

When you build the user router at the browser, this called a single page application.

React router: The app wrap with router provider when the route changed all component listen for the change and check if the path for is it renders else return null.


Finally, I recommend every frontend engineer to give ReactJS a try; it is a fantastic library to build amazing applications. Don’t be afraid of these new things you can do it. Try to build things by yourself. Here is an article for ideas to learn to React using open source media APIS.

I am writing at If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.

Image for post
Image for post

Hi my name is Yazan Aabed. Grown up in Palestine. My major was in computer science. I am a Frontend Engineer & JavaScript lover 💫👨‍💻. Mostly working with Frontend frameworks like (AngularJs, ReactJS). You can call me #Geek 🤓. Also, I Like to share my knowledge with other people and learn from them 💥🔥🌪. You can find me on GitHub, Medium, Twitter.

My latest tweets

Javascript is all that we need.

Yazan Aabed

Written by

A fullstack engineer and javascript lover, you can call me #Geek 🤓💥🔥🌪, like to write, learn, read, music, programming, challenges. -

Javascript is all that we need. Blogs and articles on Angular, React, JavaScript, front-end development and math. Hi my name is Yazan Aabed. I Like to share my knowledge with other people and learn from them 💥🔥🌪.

Yazan Aabed

Written by

A fullstack engineer and javascript lover, you can call me #Geek 🤓💥🔥🌪, like to write, learn, read, music, programming, challenges. -

Javascript is all that we need. Blogs and articles on Angular, React, JavaScript, front-end development and math. Hi my name is Yazan Aabed. I Like to share my knowledge with other people and learn from them 💥🔥🌪.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app