React JS Short Notes

React Short Notes

1-What is Rest Api?

• REST stands for Representational State Transfer. 
• It’s a software architectural style for implementing web services. 
• Web services implemented using the REST architectural style are known as the RESTful web services.
• A REST API is an API implementation that adheres to the REST architectural constraints. 
• It acts as an interface. 
• The communication between the client and the server happens over HTTP. 
• A REST API takes advantage of the HTTP methodologies to establish communication between the client and the server. 
• REST also enables servers to cache the response that improves the application’s performance.

2:-API Gateway:

• An API stands for Application Program Interface. 
• It is a set of instructions, protocols, and tools for building software applications. 
• It specifies how software components should interact.
• The API Gateway is a server. It is a single entry point into a system. 
• API Gateway encapsulates the internal system architecture. It provides an API that is tailored to each client. 
• It also has other responsibilities such as authentication, monitoring, load balancing, caching, request shaping and management, and static response handling.

3:-Advantages of API Gateway:-

• The most important advantage of API Gateway is that it encapsulates the internal structure of the application.
• Rather than invoking the specific service, the client directly talks to the API Gateway.
• It reduces the number of round trips between client and application.
• It simplifies the client code.
• It reduces coding efforts, makes the application more efficient, decreases errors all at the same time.
• It provides each kind of client with a specific API.

4:-Disadvantages:-

• It requires routing rules.
• There is a possibility of a single point of failure.
• Risk of complexity due to all the API rules are in one place.

5:Eureka Server:-

• Eureka Server is an application that holds the information about all client-service applications. 
• Every Micro service will register into the Eureka server and Eureka server knows all the client applications running on each port and IP address. 
• Eureka Server is also known as Discovery Server

REACT JS

1:-What is JSX?

• JSX stands for JavaScript XML.
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React.

2:-React Components?

• Components are like functions that return HTML elements.
• Components are independent and reusable bits of code. 
• They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
• Components come in two types, Class components and Function components.

Class Component

• A class component must include the extends React.
• Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.
• The component also requires a render() method, this method returns HTML.

Function Component

• A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand.

3:-React Props?

• props stands for properties.
• Props are arguments passed into React components.
• Props are passed to components via HTML attributes.
• React Props are like function arguments in JavaScript and attributes in HTML.

4:-React Events

• Just like HTML DOM events, React can perform actions based on user events.
• React has the same events as HTML: click, change, mouseover etc.

• Adding Events
• React events are written in camelCase syntax:
• onClick instead of onclick.

5:-React Forms

Just like in HTML, React uses forms to allow users to interact with the web page.

6:-React Hooks

• Hooks allow function components to have access to state and other React features. 
• Because of this, class components are generally no longer needed.

7:-React useState Hook

• The React useState Hook allows us to track state in a function component.
• State generally refers to data or properties that need to be tracking in an application.

8:-React useEffect Hooks

• The useEffect Hook allows you to perform side effects in your components.
• Some examples of side effects are: fetching data, directly updating the DOM, and timers.
• useEffect accepts two arguments. The second argument is optional.
• useEffect(<function>, <dependency>)

9:React Lifecycle

• Lifecycle of Components
• Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.
• The three phases are: Mounting, Updating, and Unmounting.

 Mounting:-

• Mounting means putting elements into the DOM.
• React has four built-in methods that gets called, in this order, when mounting a component:

• constructor()
• getDerivedStateFromProps()
• render()
• componentDidMount()

Updating:-

• The next phase in the lifecycle is when a component is updated.
• A component is updated whenever there is a change in the component's state or props.
• React has five built-in methods that gets called, in this order, when a component is updated:

• getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting:-

• The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
• React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()