Fundamentals of React.js

1. What is React:

React is defined as a JavaScript library for building user interfaces. It can handle complex UI made from small pieces of code called components.

2. Components:

Components are the building blocks of react app. Components are like JavaScript functions that accept inputs, properties(props) and return a react element that describes how a part of UI will look like.

3. Props:

Props is a keyword in react which stands for properties. It is used to pass data from one component to another. But the important thing is data flow through props is uni-directional, which means it can be used for passing data from parent to child components.

4. JSX:

JSX stands for JavaScript XML. In react, JSX is an extension that allows writing JavaScript that looks like HTML. In other words, we can write HTML-like syntax inside of a JavaScript function.

5. Default Props:

defaultProps is a property of react component used to set the default values for the props property. It will automatically change if the props property is being passed. It gives us a way to set default values for props in both class components and functional components.

6. State:

The state is used with React Component Classes to make them dynamic. It enables the component to keep track of changing information in between renders. More specifically, the state of a component is an object that holds information that may change over the lifetime of the component.

7. State vs Props:

Props are an object which holds information to control a component's behavior. This sounds very similar to the state, but let's see how they differ:

• Props are immutable. That means once set they cannot be changed.
• State is observable. It can hold data that can change over time.
• Props can be used in both functional and class components.
• State only used in class components.
• Props are set by the parent component.
• State is updated by event handlers.

8. Lifecycle:

In general, we might define a lifecycle as birth, growth & death. And our React components follow this cycle as well: they’re created (mounted on the DOM), they experience growth (by updating) and they die (unmounted from the DOM). This is the component lifecycle!

Within the lifecycle of a component, there are different phases. These phases each have their own lifecycle methods.

9. The Lifecycle Methods:

A component’s lifecycle can be broken down into four parts:

• Initialization
• Mounting
• Updating
• Unmounting

10. Fragments:

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. It looks like empty tags.