How and Why learn React? This great JavaScript library?

It isn't easy to talk about frontend development without mentioning React. This famous JavaScript library is one essential item for any web developer's tools belt.

Let's talk about the React advantages, how to use your component system, and understand all this success.

What React is?
Why is so popular?
Why do I have to use it?
Virtual DOM vs real DOM
Learning curve.
The setup to learn React.
Creating React App.
React Components.
JSX
State
Props
Conclusion.

What React is?

React is a JavaScript library for building user interfaces. The Facebook development team created the library to create a reusable interface.

React uses one component system to help encapsulates code and state. We can use these components to build scalable and more complex interfaces.

Why is so popular?

React JS is the most popular among the frontend frameworks and libraries as you can see on StackOverflow annual Survey.

I believe that having a combination of facts to React Js have this success.

- It's less complex than other alternatives. When React was announced in 2013, Angular 1.x e Ember.Js was the most used at that time. But React came to market been an easy tool to integrate on already working projects. This fact makes the community put its eyes on the React possibilities.
- At this time, Angular 2.x was announced, bringing a lot of changes and incompatibilities. To de the transition from Angular 1.x to 2.x was the same than change to another framework. With this scenario, React kept attention as a good alternative.
- We can't forget that React JS have Facebook maintaining the main project of the library. Not only that, but the fact of being used by other big company as Netflix, Airbnb, Walmart, etc., could prove the efficiency of the library on big projects.

Why do I have to use it?

One good reason is that React is easy to learn. With a simple API we have to basically learn 4 main concepts:

Components;
JSX;
State;
Props.

It is fast and scalable.

The JSX delivers easy code to write and read.

Easy to integrate with other JavaScript structures.

Use the virtual DOM.

Virtual DOM vs real DOM.

DOM means Document Object Model, and it is a multiplatform interface that represents and interacts with objects.

This interface interprets these documents as a tree structure, and each branch is an object that represents one document part.

Reactjs use a virtual DOM, and it is a representation of the real DOM, making this faster and lighter.

React Components.

A component is an isolated interface piece. Example: On one blog page, we can have a component to a header, one to the post list, another to the sidebar bar menu, etc.

It makes development in React much simple.

It is how one component looks like:

const BlogPost = () => {
 return (
<div>
     <h1>Title</h1>
     <p>Content</p>
</div>
)
}
import React, { Component } from 'react';

class BlogPost extends Component {
  render () {
  return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
)}}

Recently we only used class components, But after Hooks came this changed, and now our functional components are much more powerful, and we have more minor cases of class components.

It is a JavaScriptXML abbreviation. It is a way to create elements to be used as a React applications template. The pieces created with JSX looking like HTML gave developers a simple way to create and read the components of one application.

const element = <h1>Hello, World!</h1>

We declare an h1 using JSX, It looks like a mix of JavaScript and HTML, but it is only JavaScript.

Have much more about JSX to talk about, and we will have one post only for it. For now, it's enough to go through.

State.

In React, a State of one component has a simple function. It is a property where we add some data that, when we change, has to cause a new rendering.

Ass a JSX, State need one exclusive post to explain and show the use examples.

Props.

Props are how we pass our component's properties, starting with the main component to do a son component that will receive the properties from the parent.

It must be passed in one function component, using the reserved word props as a function argument.

class BlogPost = props => {
  render () {
  return (
  <div>
    <h1>{props.title}</h1>
    <p>{props.content}</p>
  </div>
)}}

Conclusion.

Learning Reactjs can need some effort to study and create projects to understand all in the best way. Reactjs keep one of the best options to work on the frontend of web applications even with some complexity.

Thank you for reading.

FL4V.IO