Let’s Start the journey with React fundamental Concept

Today I am discussing the most popular JavaScript library ReactJS. I have not much knowledge about React. Still, I am learning this library, So, that I am sharing my little bit of knowledge with all of you.

Introduction:

React is the most popular JavaScript library for building a user interface. It is not exactly a “ Framework”. It is used for single-page applications. It is very fast, flexible, and smooth also it has a strong community online that has to help you always. When you working with the framework, they already made for you a much awesome design decision, that has helpful for you. React is used for most popular social media Facebook. Facebook is the owner of react js. After successful the building application they used to react in many web applications like Twitter, Instagram, Netflix, Airbnb, Yahoo! Mail, WhatsApp, Dropbox, and so many application.

It is Not a FrameWork:

JavaScript another framework like Angular or Ember where some decision is made for you. But, React is just a library and you need to make all of the decisions by yourself. It only focuses on helping you build a user interface by using components. It doesn’t help you with server communication, routing so on.

DOM:

In React, the most important thing is DOM “ Document Object Model”, it has looked like a tree structure. It can be used to change the document style, content, and structure. Before React, developers directly manipulated DOM elements which are updated every time that’s has browser again recalculated that is lots of time-consuming. After React DOM it is easier for the developer and it’s less time-consuming.

ReactDOM:

ReactDOM is a package that provides a specific DOM method, and it can be used in the top-level web application to enable an efficient way of managing the DOM element on a web page. ReactDOM provides the developer following method, that’s is helpful …

a) render()

b) findDOMNode()

c) unmountComponentAtNode()

d) hydrate()

e) createPortal()

To use React Dom any web app first install their package and then import the ReactDOM, here is the following code — -

JSX:

We already tell that React is a library for building a very fast, scalable, efficient user interface. JSX allows us to write HTML elements without any CreateElement() or AppendChild() methods in JavaScript. So that it makes it easier for us to write HTML tags for React applications. One reason for this is that JSX stands for JavaScript XML.

In the above example, you can see that JSX allows us to write HTML code in JavaScript code.

Virtual DOM:

In React, the virtual DOM which is like a lightweight copy of the actual DOM. Manipulating DOM is Slow but manipulating Virtual DOM is much fast as nothing gets to draw on the screen. Each time we change something in our JSX file, all the object that is in the Virtual DOM gets updated. Though it may sound that is ineffective but the cost is not much significant as update the virtual DOM does not take much time. React maintain two virtual Dom at each time. One is just a pre-updated version and an updated version. React find out actually which is exactly change then it updated only those objects. This improvement performance Developers love this Virtual DOM.

Props Method:

ReactJS is a front-end javaScript building for the user interface. We all know that ReactJs is a component and it passes in data to these components, in this here props are used. For example, we can not pass data or communicate directly in child components without parent’s components. If you want to send a variable not a string then you can put a variable inside the curly brackets.

React.PropTypes:

Previously we discuss props, we see that how to pass data to any type of component using props methods. If we want to pass different types of data like strings, array, integer, etc, as props to components, then we can not pass data using props, this time we need to create a defultProps or directly pass attribute to the components. We can use prop Type to validate any data receiving from props. Before using propTypes we need to import propsType in the index.js file for we can install the propTypes package via NPM. After import PropTypes then we are ready to pass any data in components.

How Render Works:

Rendering is the process of React asking your components to describe what they want their section of the UI to look like, now, based on the current combination of props and state.

Every setState() call informs React about state change .Then react call render method to update the representation of the components in memory and compare it with what rendered in the browser. If there is a change, React does the smallest possible update to DOM.

Keys:

A “ key” is a special string attribute that you need to include when creating a list of elements in React. Keys are always used in Rect to identify which item in the list and update, deleted, and changed. In other words, we can say that keys are used to identify the element in the list. This key assign to the array elements should be unique. But that means not this key globally unique. All elements in a particular array should have unique keys.

Optimizing Performance :

Internally, React uses many clever techniques to minimize the number of costly DOM operations required to update the UI. While this will lead to a faster user interface without specifically optimizing for performance for many cases, there are ways where you can still speed up your React application. This article will go over some useful techniques you can use to improve your React code.

· Using Immutable Data Structures

· Functional Components and React.PureComponent

· Multiple Chunk Files

· Invoke high order components

· Using Production Mode Flag in Webpack

· Use React.Fragments to Avoid Additional HTML Element Wrappers

· Avoid Inline Function Definition in the Render Function.

· Throttling and Debouncing Event Action in JavaScript

· Avoid using Index as Key for map

· Avoiding Props in the Initial States

· Spreading props on DOM elements

· Use Reselect in Redux to Avoid Frequent Re-render

· Avoiding Async Initialization in componentWillMount()

· Memoize React Components

· CSS Animations Instead of JS Animations

· Server-side Rendering

· Using a CDN

· Take out unnecessary source code.

· Use constant and inline elements

· Invoke high order components.

That’s all today, next time I will share other important topic .

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store