What you need to know about React!

I wanted to write this article to provide new developers a resource to know what React.js is and to have a clear understanding of what goes on when the React library. If interviewers ask you any question on the basics of react this article should help provide the insight you are looking for.

What will be covered

• What is React?
• What can I do with React?
• Features of React
• Virtual DOM vs DOM
• Advantages/ Disadvantages
• What is JSX?
• Understanding Controlled and Uncontrolled Components.
• Key differences between React and Angular

What is React?

React is a JavaScript library created by Jordan Walke, a Facebook Engineer in 2011.

• React follows the component based approach which provides help in building reusable UI components.
• React is used to develop complex and interactive web and mobile UI apps.
• React has one of the largest communities supporting it.

"In React, everything is a component"

What can I do with React?

React can be used with the MVC (Model-View-Controller) architecture design. React is the V in the MVC, which means, that you can use React to create all the user interface of you application.

Who uses React?

• Facebook, Instagram, WhatsApp (owned by fb)
• Instagram
• Dropbox
• Netflix
• The New York Times

Benefits of learning React is that if you gain experience in this innovative technology you can eventually gain the experience necessary to find employment with companies that have huge brand value.

Features of React

React uses a virtual DOM instead of the real DOM. It uses server-side rendering and it follows a uni-directional data flow or data binding.

• Server-side rendering provides the ability to create isomorphic/universal web apps. It accelerates the load time of initial page renders since users do not need to wait for JavaScript to load before viewing websites.
• One-way data binding allows to easily see the changes in data. It provides assistance to monitor and debug React's self-contained components fast, especially in large applications. Data is passed down from components to their children. Here, we would see data being passed down as props.

Virtual Dom vs DOM

DOM stands for Document Object Model and is an abstraction of a structure text. In regards to the web, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM. Since HTML is a text, the DOM is an in-memory representation of said text.

React has some major advantages as well as some disadvantages. The list below is quick overview of the differences.

What is JSX?

React uses JSX as it's compile to exploit complex solutions. JSX is short for JavaScript XML. It provides the syntactic sugar for the React.createElement(component, props, ...children) function.

JSX allows for

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

to compile into:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Or if you are just using a self-closing tag it allows for

<div className="sidebar" />

to compile into:

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

Understanding Controlled and Uncontrolled Components.

A controlled component is the recommended way to implement any type of form. Within a controlled component form data is handled by a React component while an uncontrolled component the form data is handled by the DOM.

Controlled Component

1. They do not maintain their own state.
2. Data is controlled by the parent component.
3. The use function that to govern the data that is being processed using the onChange event.
4. They take in the current values through props and then notify the changes via callbacks.

Uncontrolled Component

class Form extends Component {
  render() {
    return (
      <div>
        <input type="text" />
      </div>
    );
  }
}

1. Uncontrolled components keep their source of truth in the DOM.
2. The do maintain their own state.
3. Refs are used to get their current values

React vs. Angular

Below you will find the a quick comparison of React and Angular.

Hope this helps you out!!!

Check out my other articles

• Explaining React Lifecycle Methods
• All Articles

Let's Connect!!!

• Connect with me on LinkedIn if you haven't already.
• Follow me or check out my latest projects on Github.
• Email me about employment or project opportunities.
• Twitter

Resources

• React Docs
• Un/Controlled components
• Un/Controlled components input