Introduction to React

React is a JavaScript library for building user interfaces. It was voted the most loved in the “Frameworks, Libraries, and Other Technologies” category of Stack Overflow’s 2017 Developer Survey.

React is a JavaScript library and React applications built on it run in the browser, NOT on the server. Applications of this kind only communicate with the server when necessary, which makes them very fast compared to traditional websites that force the user to wait for the server to re-render entire pages and send them to the browser.

React is used for building user interfaces - what the user sees on their screen and interacts with to use your web app. This interface is split up into components, instead of having one huge page you break it up into smaller pieces known as components. In more general terms, this approach is called Modularity.

• It’s declarative: React uses a declarative paradigm that makes it easier to reason about your application.
• It’s efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date.
• And it’s flexible: React works with the libraries and frameworks that you already know.

 

Why learn React?

React involves Composition, that is lots of components wrapping up the functionalities into an encapsulated container.

Many popular websites use React implementing the MVC architectural pattern. Facebook (Partially), Instagram (Completely), Khan Academy (Partially), New York Times (Partially), Yahoo Mail (Completely), Dropbox’s new photo and video gallery app Carousel (Completely) are the popular websites known to be using React.

const Component2 = () => {

  return <div></div>;

};

const Component3 = () => {

  return <div></div>;

};

const Component1 = () => {

  return (

    <div>

      <Component2 />

      <Component3 />

    </div>

  );

};

ReactDOM.render(

    <Component1 />,

    document.getElementById("app")

);

React is Declarative, for the most part, which means we are concerned more with what to do rather than how to do a specific task.

Imperative code approach instructs JavaScript on how it should perform each step. With declarative code approach, we tell JavaScript what we want to be done, and let JavaScript take care of performing the steps.

Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. Declarative programming comes with certain advantages such as reduced side effects (occurs when we modify any state or mutate something or make an API request), minimized mutability (as a lot of it is abstracted), enhanced readability, and fewer bugs.

React also has unidirectional dataflow. UI in React is actually the function of the state. This means that as the state updates it updates the UI as well. So our UI progresses as the state changes.

Features of ReactJS

JSX : JSX is an extension to javascript. Though it is not mandatory to use JSX in react, it is one of the good features and easy to use.

Components: Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code. We can use components as functions and components as classes. Components also have a state, props which makes life easy. Inside a class, the state of each of the props is maintained.

Virtual DOM: React creates a virtual dom, i.e., in-memory data -structure cache. Only the final changes of DOM has later updated in the browsers DOM.

Javascript Expressions: JS expressions can be used in the jsx files using curly brackets, for example {}.

Advantages of ReactJS

Here, are important pros/benefits of using ReactJS:

• ReactJS uses virtual dom that makes use of in-memory data-structure cache, and only the final changes are updated in browsers dom. This makes the app faster.
• You can create components of your choice by using the react component feature. The components can be reused and also helpful in code maintenance.
• Reactjs is an open-source javascript library, so it is easy to start with.
• ReactJS has become very popular in a short span and maintained by Facebook and Instagram. It is used by many famous companies like Apple, Netflix, etc.
• Facebook maintains ReactJS, the library, so it is well maintained and kept updated.
• ReactJS can be used to develop rich UI for both desktop and mobile apps.
• Easy to debug and test as most of the coding is done in Javascript rather than on Html.

Disadvantages of ReactJS

Here, are cons/ drawbacks of using ReactJS:

• Most of the code is written in JSX, i.e., Html and css are part of javascript, it can be quite confusing as most other frameworks prefer keeping Html separate from the javascript code.
• The file size of ReactJS is large. 

How does React works - (Virtual DOM)

React’s magic comes from its interpretation of the DOM and its strategy for creating UIs.

While building client-side apps, a team at Facebook developers realized that the DOM is slow (The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.). So, to make it faster, React implements a virtual DOM that is basically a DOM tree representation in Javascript. So when it needs to read or write to the DOM, it will use the virtual representation of it. Then the virtual DOM will try to find the most efficient way to update the browser’s DOM.

Unlike browser DOM elements, React elements are plain objects and are cheap to create. React DOM takes care of updating the DOM to match the React elements. The reason for this is that JavaScript is very fast and it’s worth keeping a DOM tree in it to speed up its manipulation.

Although React was conceived to be used in the browser, because of its design it can also be used in the server with Node.js.

Important Points

1.    Component First Letter will be Capital

2.    Component contain own Template and Logic

3.    Template is the HTML to be return

4.    Logic is the JavaScript Statements

5.  App(root component) is the main component of React and its render in root Element of the index.html by index.js file.

6.    App component contain a function which return something which look like an HTML Template.

7.    This is not an HTML. This is what we called JSX.

8.    With JSX, we can easily create these components.

9.    Babel convert JSX to HTML file and also render into the HTML Dom.

10. This conversion is all done in Background

11. For Example. In JSX instead class attribute we use className which is having Camel case character. and when this executed its converted into class as HTML attributes.

12. In version 17, we don't need to import react. (Check your React Version)

13. You can pass the dynamic values to React Components.

14. But you can not pass object to the component Directly.

15. For Objects you can use states.

16. Install Simple React VS Code Extension

17. Install React Dev tools Chrome Extension for Testing/Debugging React App