Key points of Reactjs?

A brief description of react js important topics.

Here we have described important topics of react js briefly so that you can get an overview of building blocks of react js.


Components are user interface and these can be nested, one component can exist into another component.

There is a root component in React js and all other component lies under this root component and make up

a complete web page. You can say a component is a building bloacks of any react application.

In React js, there are two types of components. 
  1) Functional Component 
  2) Class Component

Functional Component:
Functional component is a simple javascript function which accepts input of properties and returns

HTML/JSX which display in browser. I maintains a state to display UI.

Class Component:
 A class component is a regular ES6 class which extends a react component class.

This must contain a render method which returns a html/JSX. It also optionally maintains a private state/information internally.

javascript XML is an extension of the javascript language syntax which

is used to write xml like code for elements and components.

JSX tags have a tag name, attributes and children.
JSX is not necessary to write react applications.
JSX makes your react code simpler and elegant.
JSX ultimately transpiles to pure javascript which is understood by the browsers.

  It is an optional argument a component can accept. It also helps to make a component dynamic.

State is same like props but it is mutable within component and component has

ful control on state. It also responsible to generate ui dynamically.

State VS Props:

Props get passed to component but state is managed within component.
props are immutable but state is mutable.
props can be accessed in functional component using props object while

state can be accessed using this keyword inside class component.

Never try to modify state value directly instead use setState() in class component.

If you try to update state value it will not re-render the component ui.

If you want to execute some code just after state is updated, place that code in

the callback function which is the second argument to the setState method.

When you have to update state based on previous state value, pass in a

function as an argument instead of the regular object. 

In javascript we can define a function within function.

Check the concept of this keyword in javascript.

Methods as props:
if child component want to communicate with parent then method is used as props.

Conditional Rendering:
If else statement doesn't work within JSX.

Lists and Keys:
  A "key" is special string attribute you need to include when creating lists of elements.
  Keys give the element a stable identity.
  Keys help react identify which item have changed, are added or removed.
  Help in efficient update of the user interface.

When to use index as a key:
  The items in your list do not have a unique id.
  The list is a static list and will not change.
  The list will never be reordered or filtered.

Styling React Component:
  CSS stylesheets
  Inline Styling 
  CSS Modules
  CSS in JS libraries

Basics of Form handling:
  Controlled component uses state to manage form fields.

Lifecycle Methods of Component:
Mounting:- When an instance of a component is being created and inserted into the DOM.

Updating:- When a component is being re-rendered as a result of changes to either

its props or state.

Unmounting:- When a component is being removed from the DOM.

Error Handling:- When there is an error during rendering, in a lifecycle method,

or in the constructor of any child component.

Let you group a list of elements without adding an extra node into the DOM. React.Fragment 

Pure Components:
  A React component can be considered pure if it renders the same output for the same

state and props. For class components like this, React provides the PureComponent

base class. Class components that extend the React. PureComponent class are treated

as pure components.

Memo Component:
  A memo component is used with functional component instead of class component.

It uses React.memo method while exporting component.

  Using ref we can access the DOM element directly and there are two methods we can

use to acheive that is React.createRef() method and other is using callback ref method.

Like focussing a form input element on page load.

Refs with class component:
  This can be acheived by getting reference of child class component and get access

of all child component methods and call focus method of child component.

Forwarding Refs:
  Ref forwarding is something to automatically passing refs to one of its children.

Using React.forwardRef() method.

  React provide a way to render a child component into a DOM node which

exists outside of the parent DOM heirarchy.

Error Handling Phase Methods:
  Error boundaries are react components that catch javascript error in their

child component tree, log those errors, and display a fallback UI.

A class component becomes an error boundary by defining either or both

of the lifecycle methods.

The placement of the error boundary also matters as it controls if the

entire app should have the fallback UI or just the component causing the problem.

Provide a way to gracefully handle error in application.

Higher Order components (HOC):
  To share common functionality between components.

HOC accepts a component and returns a new component with new

feature including into original component.

Render Props:

The term "render prop" refers to a technique for sharing code between

react components using prop whose value is a function.

  Context provides a way to pass data through the component tree without

having to pass props down manually at every level.