No Idea About React.Js?

Before we start we assume that , you have a basic about HTML5, CSS , JavaScript and Document Object Model(DOM API) and JSX. Let's Dive into it

React is not a Framework

React is just a library and you need to make all decisions by yourself. It focuses on helping you to build user interfaces using components.

It doesn’t help you with server communication, translations, routing and so on. Some perceive this as a weakness. I agree with one wise man that once said:

“Framework solves the problem of its creators” ~one of my mentors

React is thin and it’s extremely easy to mix it with other 3rd party libraries. Rich JS ecosystem has a library for everything. You can choose your favorite one and plug it in without dealing with the design decisions/limitations of the framework.

Components Everywhere

• React is all about Components
• React follows the concept of Reusable Components.
• Make Some Small Components , then join them and make a bigger Components.
• Make a component and use it everywhere in your project.

Important topic before declare a Component

• The Component name must be starts with a capital Letter. This is required cause Lowercase names are reversed for HTML elements.
• Component can pass and receives a list of attributes. In general , Programmers call it props.
• We can destructuring it in our component.
• Use className instead of class to define a class.

JSX

React.Js introduces special JavaScript code, preprocessor step adding XML-like syntax into JavaScript. It helps to conduct building readable code, to save it in one verified file. Possibility of dropping HTML in render function without concatenating strings is excellent. Through using a particular JSX Transformer HTML is converted into functions:

Server-side Rendering

Mentioned above feature provides creating isomorphic/universal web apps. It accelerates loads of starting page because users do not need to wait for JavaScript loadings before viewing web sites.

One-way Data binding

It is always easily seen changing data place. It helps to monitor, to debug React’s self-contained components fast, especially in large applications.

Virtual DOM

React.js constructs efficient virtual DOM known as Document Object Model or vDOM. It allows to create light DOM tree and save it on server-side. It is one of the benefits working like that:

• While user is interacting with Internet resource, new vDOM is being created.
• Previous and recent versions are compared.
• If mentioned versions have diffs, the vDOM will be rebuilt.

How rendering works

Every setState() call informs React about state changes. Then, React calls render() method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.

I often compare that to a diff mechanism in Git. There are two snapshots of component tree that React compares and just swaps what needs to be swapped.

I was looking for a clever diagram describing the render flow but couldn’t find one. You can read more about it here though.

State

Until now, we discussed only static components with static data passed down the components tree. Often, it’s needed to create a stateful component where the state is changing over time.

Let’s consider an <input> where you can type in a text that will be displayed below.

const InputBox = React.createClass({
  getInitialState () {
    return {
      text: ''
    }
  },

changeText (event) {
    this.setState({text: event.target.value})
  },

Advantages and Disadvantages of React.JS

There are ? benefits of ReactJS?:

• Updates process is optimised and accelerated.
• JSX makes components/blocks code readable. It displays how components are plugged or combined with.
• React’s data binding establishes conditions for creation dynamic applications.
• Prompt rendering. Using comprises methods to minimise number of DOM operations helps to optimise updating process and accelerate it.
• Testable. React’s native tools are offered for testing, debugging code.
• SEO-friendly. React presents the first-load experience by server side rendering and connecting event-handlers on the side of the user:

1. React.renderComponentToString is called on the server.

2. React.renderComponent() is called on the client side.

3. React preserves markup rendered on the server side, attaches event handlers.

• Up to date. Facebook team supports the library. Advice or code samples can be given by Facebook community.
• Using React+ES6/7, application gets high-tech and is suitable for highload systems.

Drawbacks of ReactJS

• Learning curve. Being not full-featured framework it is requered in-depth knowledge for integration user interface free library into MVC framework.
• View-orientedness is one of the cons of ReactJS. It should be found 'Model' and 'Controller' to resolve 'View' problem.
• Not using isomorphic approach to exploit application leads to search engines indexing problems.
• Lots of developers dislike JSX React’s documentation, manuals are difficult for newcomers’ understanding.
• React’s large size library.