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 yaabed.com. Also, I have my publication at medium blog.yaabed.com.

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.

Liquid error: internal

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

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

• The Beginner’s Guide to React — Kent C. Dodds.
• React For Beginners — Wes Bos.
• Complete Intro to React — Brian Holt.

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.

• 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.

Components

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.

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.

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.

Programming Wisdom

@codewisdom

"The central enemy of reliability is complexity." - Geer et al.

16:29 PM - 03 Jun 2018

Components contain two primary weapons

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

Props

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.

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:

• Type checking With PropTypes
• Components and Props
• Presentational and Container Components — Dan Abramov

State

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.

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.

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.

Conclusion

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.