React.js- You must know before starting React

Conditional Rendering:

Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false. In React, it allows us to render different elements or components based.

defaultProps:

defaultProps is a property in React component used to set default values for the props argument. It will be changed if the prop property is passed.

JSX:

JSX is a syntax extension for JavaScript. It was written to be used by React and looks a lot like HTML. But given JSX is not valid JavaScript, web browsers can’t read it directly. JSX tag mainly determines the type of the React element & also sometimes JSX tag is referring to a React component.

DOM:

The DOM represents a document with a logical tree. The react-dom package provides DOM-specific methods that can be used at the top level of our app.

Components vs Elements:

An element is defined as something basic that isn’t made up of constituent parts that it could be further broken down into. A component simply means a part of something, and could be an element or could be something more complex. A React Component is a template. A blueprint. A global definition. This can be either a function or a class.

State:

React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Hooks:

A hook in a React component is a call to a special function. It allows us to use state and other React features without writing a class. React Hooks are a complete and better replacement for Classes. As Hooks are regular javascript functions, thus you can use the built-in Hooks and create your own custom one.

Functions vs classes:

Functions do specific things, classes are specific things. Classes often have methods, which are functions that are associated with a particular class, and do things associated with the thing that the class is but if all we want is to do something, a function is all we need.

Nesting React elements:

In React, we can nest components inside within one another. This helps in creating more complex User Interfaces. The components that are nested inside parent components are called child components. Import and Export keywords facilitate the nesting of the components.

React.createElement :

Instead of working with strings to represent DOM elements in React, we represent DOM elements with objects using calls to the React.createElement method.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

How to build your own React-Router with new React Context Api

Creating a Custom Pipe for your Angular app

My Experience when I was a beginner to the Angular

Easiest Way for Next.JS to Fetch External API for Displaying Data

An inspired second project

Vue Single Page Application with ASP.NET Core — No Node Js

After Installing Arch Linux

Binding event to all elements except specific element and all its contents.

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