React is a front-end JavaScript library for building user interfaces. It is an open-source Framework. It is one of the most important JavaScript frameworks that any JS aspirant must know about.it was created by Jordan Walke. It was developed by Facebook in 2011. Some features of React are: DOM stands for Document Object Model, and it is a mechanism for programs to access and update the structure, style, and contents of a document. JSX is a contraction of the JavaScript XML. It uses the expressiveness of JavaScript for making the HTML code easily understandable. JSX files make applications robust while boosting their performance. No, Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. to make a browser read a JSX file, it has to be transformed to a JavaScript object using JSX transformers, and only then it can be fed into the browser for further use in the pipeline. In React, each component must have a render() function. It returns a single React element, which is, in fact, the representation of the native DOM component. When there is a need for more than one HTML element to be rendered, we group them in one enclosing tag, which can be,or some other tag. There is a need for the render() function to return the same result each time it is invoked i.e. it needs to be kept pure. The lifecycle of the component is divided into four phases. Each phase contains some lifecycle methods that are specific to the particular phase. States in react acts as a source of data and are kept simple so that the objects which determine component rendering and behaviour become mutable other than props and develop a dynamic and interactive component. Key is used to identify which items have changed, updated, or deleted from the Lists. It is useful when we dynamically created components or when the users alter the lists. It also helps to determine which components in a collection needs to be re-rendered instead of re-rendering the entire set of components every time. It increases application performance. Prop is a contraction for Properties in React. Props is referred to the properties in React, including immutable, child components, parent component, etc. These read-only components need to be kept immutable i.e. pure. Throughout the application, props are passed down from the parent components to the child components. In order to maintain the unidirectional data flow, a child component is restricted from sending a prop back to its parent component. This also helps in rendering the dynamically generated data. An event is an action which triggers as a result of the user action or system generated event like a mouse click, loading of a web page, pressing a key, window resizes, etc. In React, the event handling system is very similar to handling events in DOM elements. The React event handling system is known as Synthetic Event, which is a cross-browser wrapper of the browser’s native event. Handling events with React have some syntactical differences, which are: The Synthetic Events in React are the objects in React, which acts as a cross-browser wrapper around the browser’s native event. The main purpose is to combine the different browsers on the API so that the event shows various properties. HOC stands for Higher-Order Component. It is an advanced way of reusing the component logic, which wraps another component along with it. You can do many tasks with HOC, some of them are given below: ‘Refs’ is short for references in React. Refs are used to store a reference to a single React element or a React component. This is later returned using the render function. The Ref in React is used in the following cases: Component is one of the core building blocks of React. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Function components. Class Components: Function Components: React Props are like function arguments in JavaScript and attributes in HTML, they passes components via HTML attributes. Primary purpose of props in React We can use can use an arrow function We can create refs by two approaches Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components whereas Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs. Controlled component is a way that you can handle the form input value using the state and to change the input value there is only one way to change it is using setState or useState Example Writing all names in Upper Case Uncontrolled component is like traditional HTML, they are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. Example using react hooks (useRef): The comments in React/JSX are wrapped in curly braces. Single-line comments: Multi-line comments: pass the function itself without parenthesis: class is a keyword in JavaScript, and JSX is an extension of JavaScript. That’s the principal reason why React uses className instead of class. React Router is a standard routing library system built on top of the React. It is used to create Routing in the React application using React Router Package. It helps you to define multiple routes in the app. It provides the synchronous URL on the browser with data that will be displayed on the web page. It maintains the standard structure and behaviour of the application and mainly used for developing single page web applications. We need a Router to React so that we could define the multiple routes whenever the user types a particular URL. This way, the application of a particular router can be made when the URL matches the path defined inside the router. Advantages of React Router: We can style React Component in mainly four ways Keys are used in React to check all items and to track changes actively. They are used to directly check if an item has been added or removed from a list. Controlled component: it is a component over which React has complete control. It is the singular point of data for the forms. Uncontrolled component: It is one where the form data gets handled by DOM and not the React component. This is usually done using refs in React. cloneElement is primarily used to clone an element and pass it to new props directly. Whereas, createElement is the entity that JSX gets compiled into. This is also used to create elements in React. Top companies are using React. There are Pros: Cons: What is React and What are the features of React?
What is the difference between real DOM and virtual DOM?
Can you explain JSX?
A code example of JSX is:
class App extends React.Component {
render() {
return(
<div>
<h1>Hello Everyone</h1>
</div>
)
}
}
Can browsers read a JSX file and Why?
Why do we use render() in React?
For Example: If you need to display a heading, you can do this as below.
import React from 'react'
class App extends React.Component {
render (){
return (
<h1>Hello World !</h1>
)
}
}
export default App
What are the various lifecycle methods of React components?
What are states in React?
What is the significance of keys in React?
What do you know about Props in React?
Explain, how does the state differ from props in React?
How will you distinguish Redux from Flux?
Can you explain event in React?
Can you explain Synthetic Events in React?
In the given example, e is a Synthetic event.
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('You had clicked a Link.');
}
return (
<a href="#" onClick={handleClick}>
Click_Me
</a>
);
}
Can you explain HOC?
Can you define Refs in React?
What is the use of Refs?
What do you know about components in React?
Can you provide example for Class components and Function components?
class Greeting extends React.Component {
render() {
return <h1>{`Hello, ${this.props.message}`}</h1>
}
}
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
What are the primary purpose of props in React?
How will you pass a parameter to an event handler?
<button onClick={() => this.handleClick(id)} />
How will you create refs?
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef} />
}
}
class SearchBar extends Component {
constructor(props) {
super(props);
this.txtSearch = null;
this.state = { term: '' };
this.setInputSearchRef = e => {
this.txtSearch = e;
}
}
onInputChange(event) {
this.setState({ term: this.txtSearch.value });
}
render() {
return (
<input
value={this.state.term}
onChange={this.onInputChange.bind(this)}
ref={this.setInputSearchRef} />
);
}
}
Can you explain the difference between Shadow DOM and Virtual DOM?
What do you know about controlled components?
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()})
}
What do you know about uncontrolled components?
import React, { useRef } from "react";
export default function App() {
const inputRef = useRef(null);
const handleSubmitButton = () => {
alert(inputRef.current.value);
};
return (
<div className="App">
<input type="text" ref={inputRef} />
<input type="submit" value="submit" onClick={handleSubmitButton} />
</div>
);
}
How will you write comments in React
<div>
{/* Single-line comments */}
{`Welcome ${user}, let's play React`}
</div>
<div>
{/* First line
Second line */}
{`Welcome ${user}, let's play React`}
</div>
How will call function when the component renders?
render() {
return <button onClick={this.handleClick}>{'Click Me'}</button>
}
Why should we use className over class attribute in React?
What is React Router and Why do we need a Router in React?
What are the advantages of React Router?
What is various style in the React Component?
What are keys in React? What is the syntax of Keys?
Consider the following syntax:
function List ({ todos }) {
return (
<ul>
{todos.map(({ task, id} ) => <li key={id}>{task}</li>}
</ul>
)
}
What is the difference between controlled and uncontrolled components?
What is the difference between cloneElement and createElement in React?
Who uses React?
What are the Pros and Cons of React?
What is React and What are the features of React?
What is the difference between real DOM and virtual DOM?
Can browsers read a JSX file and Why?
Why do we use render() in React?
What are the various lifecycle methods of React components?
What is the significance of keys in React?
What do you know about Props in React?
Explain, how does the state differ from props in React?
How will you distinguish Redux from Flux?
Can you explain event in React?
Can you explain Synthetic Events in React?
What do you know about components in React?
Can you provide example for Class components and Function components?
What are the primary purpose of props in React?
How will you pass a parameter to an event handler?
Can you explain the difference between Shadow DOM and Virtual DOM?
What do you know about controlled components?
What do you know about uncontrolled components?
How will you write comments in React
How will call function when the component renders?
Why should we use className over class attribute in React?
What is React Router and Why do we need a Router in React?
What are the advantages of React Router?
What is various style in the React Component?
What are keys in React? What is the syntax of Keys?
What is the difference between controlled and uncontrolled components?
What is the difference between cloneElement and createElement in React?
What are the Pros and Cons of React?