React Fundamentals

React is a famous JavaScript library. As a beginner, you may question what we will build by react. Basically, react is a declarative, efficient, and flexible JavaScript library used for building user interfaces (UI). What we can see in the web application or the browser is called user interface (UI). In this article, I will discuss the fundamentals of react.

React is not a Framework.

React is not a framework. There are many debates about react. Is it a framework or a library? React is not exactly a framework. The framework is a complete solution. Everything you need to make your application is built-in. A framework usually wants you to code everything a certain way. If you try to defer from that way, the framework usually ends up fighting you about it. But in react, you don’t have everything to build your application. You have to plugin another library to complete your task. Libraries are more flexible to work with.

JSX IN REACT

We can make HTML elements by using Javascript. But it’s quite a hassle to do. React js make it easy for us. You can make HTML elements by using JSX. JSX is basically a syntax extension of regular JavaScript and is used to create React elements. JSX syntax look like HTML syntax. What we write in JSX render in react DOM. Before displaying in the browser, JSX is compiled by a compiler to React. JSX power full then Javascript template string.

• It performs optimizations while translating to regular JavaScript.
• It makes it easier for us to create templates.
• Instead of separating the markup and logic in separated files, React uses components for this purpose.

Component

In react, we describe UI using components that are reusable, composable, and stateful. We can compare components with a simple function. We can call a function with some input, and it returns some output. We can reuse function when we needed and compose a bigger function from smaller ones. React components are the same. Their output is a set of props, and their output is a description of a UI. We can reuse a single component in multiple UI, and components can contain other components.

There are 2 kinds of components:1.functional component, and 2. Class-based component.

Virtual DOM

Virtual DOM is a lightweight copy of actual DOM. It is saved in the memory. When some parts of DOM are changes, react compares the changed DOM with Virtual DOM that is saved in the memory. To compare, it uses the deffer algorithm. The algorithm can identify where changes happened and only update that part of the DOM. Changing or updating the whole DOM in a bit slower. Virtual DOM swiftly changes the DOM.

HOOKS

Hooks are a special kind of function that is used in react components. Some of them can be used to provide a functional component with stateful elements like useState. Othe can be used to managed side effects like useEffect. All hooks function begins with the word “use.” React hook functions can only be used in functional components. You can use them in class components.

State

State is an object that holds some information that may change over the lifetime of the component. A state is an observable object used for holding data and can be changed in the future. State only can use in class-based components. The event handler can change a state.

Props

React allows us to pass information to a Component using something called props (stands for properties). Props are basically kind of global variable or object. We can pass props to any component as we declare attributes for any HTML tag. Props can be used in both class-based and functional components.

React is declarative

We describe UIs with React and tell it what we want. React will take care of how to do whatever we want. It translates our declarative description to UI in the browser. It is a common language between developers and browsers that allows developers to describe UIs and manage their state declaratively.

Optimizing Performance

React uses several techniques to minimize the number of costly DOM operations required to update the UI. Using React will lead to a fast user interface without doing much work to optimize for performance specifically. For optimizing performance, we can use these techniques :

. User the production build.

.Brunch.

.Browsrify.

.Rollup.

.WebPack.

.Profiling components with the dev tools profiler

.Virtulize line list.

Avoid Reconciliation.

Conditional Rendering

In react, we can render components conditionally. Normally we make a conditional statement using if-else. In JSX, we can not use if-else for the conditional statement. But we can use the ternary operator to render conditional components. We can use if-else before the return by helping function.

That is all.

See you on another blog. :)

React Fundamentals (opens in a new tab) was originally published in The Startup (opens in a new tab) on Medium, where people are continuing the conversation by highlighting and responding to this story.

Originally published on Medium (opens in a new tab).