Summary React Concepts Part II

In this session, you learned the following concepts of React:

1.      Props
Props help you to pass values from a parent component to a child component so that they can be accessed within the child component.

2.     Event Handling
An event handler is a method to be called when an event occurs.

• An event name should follow camelCase.
• It is a good practice to prefix event handlers with on, such as ‘onSubmitOrder’, or suffix them with handler, such as ‘submitOrderHandler’. This is done so as to make clear what these handlers do and what events they are attached to.

3.      State
State is something that is controlled within a component, unlike props, which are controlled by a parent component. Also, a change in state calls the render() method again.
 

• State can be maintained inside a class component only.
• State is always initialised inside the class constructor.
• In case you define the constructor of a class, you need to call the super() method in the first statement of the constructor definition. This method calls the constructor of the parent class.
• To set the state, you must always use the setState() method and must never directly manipulate the application’s state. However, setState() should never be called inside the constructor.
• Whenever state is changed, the render() method of the class is called again.

4.       Component Lifecycle
 

• The component lifecycle in React varies from one process to another, and there are a total of three process — Mounting, Updating, and Unmounting.
• Inside Mounting process, a component’s lifecycle is defined by the following methods, which are called in the given order:
  constructor()
  render()
  componentDidMount()

5.       Smart Components and Dumb Components

• A dumb (aka presentational) component only presents data on the DOM. On the other hand, a smart (aka container) component provides data and logic to the dumb components.
• Dumb components describe how things look, whereas smart components describe how things work.
   

6.       Routing

• Routing is the process that helps in loading partial content, making it a dire need for building SPAs. Based on the URL that a user visits, specific content is loaded on the page, which helps in displaying different content to the users without any need for the page refresh. This is when the users get to see the entire application in the form of a single page though it consists of multiple pages.
• While learning all these concepts, you also completed your beautiful Phone Directory application, which has the functionalities of showing all subscribers, adding a subscriber and deleting a subscriber.