Getting Started with React JS

System configuration

React application can be created using create-react-app or using the command npx create-react-app my-app. To run the application, navigate to the application folder and run the command npm start.

Customer Service Portal

Customer Service Portal is an application built using React Functionalities.

Login – The customer can log in by entering the credentials. Purchased Items – Displays the various products bought by the customer. Feedback – The customer can provide feedback on the products they purchased.

---

Why Components?

What is a React Component?

How to create a React component?

---

Demo: React Components

Highlights:

1.Creation of component 2.Rendering a component

---

Interview Questions:

What is a Pure Component in React, and how does it differ from a regular component?

A pure component only re-renders if the props or state change. It seperates the state management from the React Component.To create Pure Components, Class Components can extend React.PureComponent , while functional components can be wrapped within React.memo.

What is the benefit of using PureComponents?

The benefit of using PureComponents is that they can improve the performance of your React application by reducing unnecessary re-renders.

What are controlled and uncontrolled components in React?

Controlled components are components where the value of the form element is controlled by React state. Uncontrolled components are components where the value of the form element is controlled by the DOM.

Give example of controlled component in React, and why would you want to use one?

An example of a controlled component in React is a text input field where the value is controlled by React state. You would want to use a controlled component when you need to handle user input and update the state of your application.

How do you handle user input in a controlled component?

You handle user input in a controlled component by adding an onChange() event handler that updates the state of your application with the new value of the input field.

How do you create a stateless functional component in React, and when would you use one?

You create a stateless functional component in React by writing a function that returns JSX. You would use a stateless functional component when you don't need to manage state or use lifecycle methods.

Can you explain the difference between a presentational component and a container component in React?

A presentational component is a component that only handles rendering and has no business logic. A container component is a component that manages the state of the application and passes data down to presentational components.

What is advantage of using component based structure in building react application?

The advantage of using a component-based structure in building a React application is that it allows for modularity and reusability of code. It also makes it easier to manage and maintain large applications.

Can you explain the difference between static and dynamic rendering of components in React?

Static rendering is when a component is rendered once and doesn't change. Dynamic rendering is when a component can be re-rendered based on changes in state or props.

How do you conditionally render components in React?

You conditionally render components in React by using conditional statements, such as if/else or ternary operators, short circuiting, in your JSX.

How do you handle nested components in React, and what are some best practices for organizing and managing complex component hierarchies?

You handle nested components in React by breaking down the UI into smaller, reusable components and passing down data as props. Some best practices for organizing and managing complex component hierarchies include using presentational and container components, avoiding deeply nested components, and using a state management library like Redux.

Can you explain the concept of JSX in React, and how it allows you to write HTML-like syntax in your JavaScript code?

JSX is a syntax extension for JavaScript that allows you to write HTML-like syntax in your JavaScript code. It is used to describe the structure of the UI in React components, and is transformed into JavaScript at build time. It makes it easier to write and reason about UI code.

---

React Components : summary

1. React allows developers to create 2 types of components a. Class components b. Functional components
2. Functional components are javascript functions which return HTML elements using React.createElement method.
3. The component can be rendered to the DOM using the ReactDOM.render method.