What is React? Why to use React? When to use React?

What is React?

React.js often referred to as React or ReactJS is a JavaScript library responsible for building a hierarchy of UI components or in other words, React.js is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps(React Native). React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook.

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. There are also Javascript frameworks such as Angular, Vue, Nodejs, Ember.js, Blackbone.js and etc…

Also, I want to talk about Components. What are the Components?

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

In the below image consist of some components, for example FindFriendsComponent, FindFriendsListComponent, ButtonComponent.

Your first component

const Greeting = () => <h1>Hello World!</h1>;

This is a functional component (called Greeting) written using ES6’s arrow function syntax that takes no props and returns an H1 tag with the text “Hello World today!”

Components come in two types, Class components and Function components.

Functional (Stateless) Component

These components are purely presentational and are simply represented by a function that optionally takes props and returns a React element to be rendered to the page.

Generally, it is preferred to use functional components whenever possible because of their predictability and conciseness. Since, they are purely presentational, their output is always the same given the same props.

You may find functional components referred to as stateless, dumb or presentational in other literature. All these names are derived from the simple nature that functional components take on.

==> Functional because they are basically functions

==> Stateless because they do not hold and/or manage state

==> Presentational because all they do is output UI elements

A functional component in it’s simplest form looks something like this:

const Greeting = () => <h1>Hi, I’m Functional component!</h1>;

Class (Stateful) Component

These components are created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state and other capabilities.

As you explore other resources, you might find class components referred to as smart, container or stateful components.

==> Class because they are basically classes

==> Smart because they can contain logic

==> Stateful because they can hold and/or manage local state

A class component in its simplest form:

class Greeting extends React.Component {
  render(){
    return <h1>Hi, I’m a Class component!</h1>;
  }
}

How do I choose which component type to use?

Use a class component if you:

==> need to manage local state

==> need to add lifecycle methods to your component

==> need to add logic for event handlers

Otherwise, always use a functional component.

In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:

-JSX

-Virtual DOM

Firstly, let’s talk about JSX. What is JSX?

What is JSX?

JSX (short for JavaScript eXtension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And — since React JS browser support extends to all modern web browsers — JSX is compatible with any browser platform you might be working with. You are not required to use JSX, but JSX makes it easier to write React applications.

Let us demonstrate with two examples, the first uses JSX and the second does not:

Example 1->JSX:

const myelement = <h1>JSX is very good!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

Example 2->Without JSX:

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

As you can see in the first example, JSX allows us to write HTML directly within the JavaScript code.So,we can say JSX is easily and understanding than without JSX.

Another Example: JSX:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Secondly, let’s talk about Virtual DOM.

What is Virtual DOM?

If you’re not using React JS (and JSX), your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).

However, if a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM. The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button).

Which companies use React?

There are many big companies which use React, for instance Facebok, İnstagram, Netflix, Pinterest, Uber, Udemy, Shopify and etc……

Why to use React?

Now, the main question arises in front of us is why one should use React. There are so many open-source platforms for making the front-end web application development easier, like Angular. Let us take a quick look on the benefits of React over other competitive technologies or frameworks.

1. Easy to learn

Anyone with a basic previous knowledge in programming can easily understand than other framework or libraries. To react, you just need basic knowledge of CSS and HTML.

2. Simplicity

React is easy for developer because when you use JSX.I have talked about JSX above.

3. Performance

React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.

4. Testability

ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

When to use React?

React excels because it’s pure JavaScript. If you have a team of JavaScript developers that know the ins and outs of the language, then it’s a great fit.

JavaScript developers will be able to:

• Embrace JS
• Build components with pure JavaScript
• Understand styling with CSS-in-JS

Where else should you use Reactjs?

Of course, we can’t cover each-and-every use-case of Reactjs in a single article. The list is endless, but here’s a taste of some example web apps where you can use Reactjs:

• Blogs (Gatsby)
• Business websites
• Portfolios
• Forums
• Rating websites
• Membership sites
• eLearning modules
• Galleries
• Personal websites for self-promotion
• Job boards
• Business directories
• Q&A websites like Quora
• Non-profit websites for collecting donations
• Wikis and knowledge bases
• Media-centric sites like YouTube
• Auction and coupon sites

Conclusion

Reactjs is an excellent addition to the projects that need component reusability, impressive user interactions, or crazy animations. That said, it’s a robust UI library to build projects that cater to small, medium, and even large-scale organizations. That’s why so many companies rely heavily on React for their long-term business goals.

Hope you have enjoyed this article. In the next article, I will discuss the differences between React JS, Angular and Vue and will analyze which one is better and why.

Thanks to Everyone.