What Is Reactjs?
Reactjs is very fast technology that can be trusted for complex tasks and can simply be trusted for quality outcomes.
The List of Major Features as following -
But there are only some syntactical differences and it looks like -
Example looks like -
Reactjs is a fast, open-source, and front-end JavaScript library and It was developed by Facebook in 2011 for building complex, stateful and interactive UI in web as well as mobile Applications.
Reactjs follows the component based approach which helps you to building reusable and interactive web and mobile User Interface (UI) components.
Reactjs has one of the largest communities supporting it.
Reactjs has one of the largest communities supporting it.
The high level component Lifecycle -
At the highest level component Lifecycle, Reactjs components have lifecycle events that are -
1. Initialization
2. State/Property Updates
3. Destruction
When Reactjs released?
March 2013
What Is current stable version of Reactjs?
The Version is - 15.5 and Release on - Apr 07, 2017.
What Is Repository URL of Reactjs?
https://github.com/facebook/react
How Is React different?
Basically, Reactjs is a limited library that is used for building the interactive UI components. Also used for building complex and stateful web as well as mobile apps. But some of the other JavaScript frameworks not perform the same.
Why Reactjs Is used?
Reactjs is used to handle only the View part and not for others web apps as well as mobile apps.
What do you mean by Reactjs?
Reactjs is a fast, open-source, and front-end JavaScript library and I was developed by Facebook in 2011.
The main aim was to build the complex, stateful and interactive user interfaces for web as well as mobile apps.
What Are the features of React?
1. JSX – The JSX is JavaScript Syntax Extension
2. Components - The Reactjs is all about components
3. One Direction Flow (Unidirectional Flux) - The React.js implements one-way data flow, which makes it easy to reason about your apps
The List of Major Features as following -
1. React uses the virtual DOM instead of the real DOM.
2. React uses server-side rendering.
3. React follows unidirectional data-binding.
What Are the Advantages of Reactjs?
The List of Reactjs Advantages as following as -
1. Reactjs uses virtual DOM which will improve performance of the apps.
2. Reactjs is free and Open Source and very fast.
3. Reactjs improves SEO Performance.
4. It can be used for both client and server side.
5. Also it can be used with other frameworks such as Angular, Meteor etc.
6. It is very easy to write UI test cases because the virtual DOM system implemented entirely in JavaScript.
7. It increases the application’s performance
8. Reactjs code readability increases by using the JSX.
What Are the limitations of Reactjs?
Do you think Reactjs has any limitations? If so, tell a few?
Yes! There are some limitations (drawbacks) with this platform. The main drawback of the Reactjs is - size of its library.
It is very complex and creates lots of confusion, takes time to understand to the developers.
List of Limitations of Reactjs-
1. Reactjs is just a library, not a framework
2. The library of Reactjs is - very large
3. Reactjs uses JSX for development.
4. It creates lots of confusion to understand to developers
5. Reactjs coding gets complex as it uses inline templating and JSX
6. Reactjs uses only in view layer of the MVC frameworks.
Does Reactjs use HTML?
No!, Reactjs uses JSX (JavaScript XML) which is very similar to HTML.
What Is the life Cycle of Reactjs components?
1. Initialization /Initial Rendering Phase
2. State/Property Updates
3. Destruction
What Is JSX?
JSX is stands for JavaScript XML.
This is a type of file used by Reactjs and It used in Reactjs as like HTML template syntax. The JSX makes applications robust and boosts its performance. This is simply integrates the HTML templates into the code of JavaScript.
It has become a very popular approach in the present scenario among the developers and browsers are not capable to read the code simply.
Below is an example of JSX -
class yourComponent extends React.Component {
render() {
var prop = this.props;
return (
<div className="mycompo">
<a href={prop.url}>{prop.name}</a>
</div>
);
}
}
Why can’t browsers read JSX?
Its follow the components approach. These components split-up the entire user interface (UI) into small independent and reusable pieces that means it renders each of these components independently without affecting the rest of the other user interface.
What Are the differences in between Real DOM and Virtual DOM?
Real DOM –
1. It updates slow as compare to Virtual DOM
2. We can directly update the HTML on DOM at the run time.
3. Will creates a new DOM, if element updates
4. DOM manipulation is bit expensive
5. There is too much memory wastage
Virtual DOM –
1. It updates faster as compare to Real DOM
2. We can’t directly update the HTML on DOM at the run time.
3. Will need to updates the JSX, if element updates
4. DOM manipulation is easy as compare to the Real DOM.
5. There is no memory wastage
Is it possible to nest JSX elements into other JSX elements?
Yes, it’s possible! The process is very similar to the nesting HTML elements.
What Is a state in Reactjs and how is it used?
The states are the heart and soul of Reactjs components. The states are objects, source of data which determine components rendering and its behavior.
The states are mutable and it used to create dynamic, stateful and interactive web and mobile components by using the - this.state().
What Are the Differentiate between stateful and stateless components?
Stateful Components –
1. The Stateful Components are stores the information about component’s state and have authority to change state.
2. The Stateless components notify them about the requirement of the state change and send to props.
Stateless Component –
1. The Stateless components are used to calculates the internal state and do not have authority to change state.
2. The Stateless components receive the props from the Stateful components and treat them as callback functions.
What Are the purpose of render() in React?
Each React component must have a render () functions and it returns a single Reactjs element, If more than one HTML element needs to be rendered. It must return the same result each time it is invoked.
What Is Props?
In Reactjs, Props are short hand for Properties.
Props are read-only components which must be kept pure. It is immutable.
What Are the difference between pros and state?
Props are short hand for properties and immutable while the state is mutable.
Props are read-only components while states are objects, source of data which determine components rendering and its behavior.
Both of them can update themselves easily.
Is it possible to display props on a parent component?
Yes, it is possible!
The best ways to perform this task is - using spread operator and also it can be done with listing the properties but it is a complex process.
What Are the lifecycle methods of Reactjs components?
The lifecycle methods of the Reactjs are-
1. componentWillMount() – This method executed just before rendering takes place both on the client and server.
2. componentDidMount() – This method executed on the client side only after the first render.
3. componentWillReceiveProps() – This method invoked as soon as the props are received from the parent class and before another render is called.
4. shouldComponentUpdate() – This method returns true or false value based on certain conditions.
5. componentWillUpdate() – This method called just before rendering takes place in the DOM.
6. componentDidUpdate() – This method called immediately after rendering takes place.
7. componentWillUnmount() – This method called after the component is unmounted from the DOM and used to clear the memory spaces.
What Is an event in React?
The events are the triggered reactions and it is very similar to handling events in DOM elements –
1. Mouse Hover
2. Mouse Click
3. Key Press
4. And too many
But there are only some syntactical differences and it looks like -
1. Events are named using camel case instead of just using the lowercase.
2. Events are passed as functions instead of strings.
The event argument contains a set of properties and its behavior that is accessed via its event handler only.
The Example -
// In HTML
<button onclick="clickMe()">Click Me!</button>
//In React
class Display extends React.Component({
show(evt) {
// TODO; your code
},
render() {
// Render the button with event - onClick
return (
<button onClick={this.show}> Click Me!</button>
);
}
});
What Is Synthetic event?
The Synthetic Event is a cross browser wrapper around browser’s native event.
Example looks like -
class DisplayAlert extends Component {
alertMe() {
alert("Hey, I am alert!");
}
render() {
return (
<button onClick={this.alertMe}>show alert </button>
);
}
}
export default DisplayAlert;
What Are the differences between Controlled and Uncontrolled Components?
Controlled Components –
1. The controlled components not maintain their own state.
2. The data is controlled by the parent component.
Uncontrolled Components -
1. The uncontrolled components maintain their own state.
2. The data is controlled by the DOM
What Is Higher Order Components (HOC)?
Higher Order Component (HOC) is patterns, pure, and custom components that is derived from Reactjs compositional nature and provide advanced ways of reusing your components logic.
What can you do with HOC?
Higher Order Component (HOC) can be used for -
1. Code reusability
2. State abstraction and manipulation
3. Bootstrap abstraction
4. Props manipulation
5. Render High jacking
6. And may more
What Is Component in Reactjs?
Components are the heart of Reactjs and components let us split the user interface (UI) into independent, reusable pieces.
Create a new component class using React.createClass. When you create a new components call, you must implement render() function.
The example for the components is -
var HiMsg = React.createClass({
render: function() {
return <div>Hello, My name is - {this.props.name}</div>;
}
});
ReactDOM.render(
<HiMsg name="msg" />,
document.getElementById('container')
);
What Is Controllable Component in Reactjs?
A controlled component is a component where React is in control and takes the value through Props and changes are notified to the parent component through callbacks.
Parent component controls this component either by passing the data and handling the callbacks and managing its own state.
What Is Uncontrollable Component in Reactjs?
Uncontrollable component is a component which stores its own state internally.
What Are Pure Components?
Pure components are the simplest and fastest components which can be written and it can replace any component which only has a render ().
These components increase the performance and code simplicity of the application.
How to update the State of the Component in Reactjs?
In the Reactjs, you can update the State of the components by using the method – setState()
What Are the Component Life Cycle methods in Reactjs?
The list of Component Life Cycle Methods -
1. constructor() method
2. componentWillMount() method
3. componentDidMount() method
4. render() method
5. componentWillUpdate() method
6. componentDidUpdate() method
7. componentWillUnMount() method
What Are the methods called when Component is created or while inserting it to DOM?
The list Methods as following -
1. constructor() method
2. componentWillMount() method
3. render() method
4. componentDidMount() method
What Are the methods called when State or Props of the Component is changed?
The list Methods as following -
1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()
In which lifecycle event do you make AJAX requests and why?
The Ajax requests should go away in the componentDidMount life-cycle event.
What Is React Router?
React Router is a powerful routing library built on top of React, which helps in adding new screens, developing single page application and flows to the application.
React Router keeps the URL in sync with data which displayed on the web page and also maintains a standardized structure and behavior.
React Router has a simple API.
Why do we need a Router in Reactjs?
A Router is used to define multiple routes and when a user types a specific URL.
We need to add a Router library in your apps that allows you to creating multiple routes with each leading to us a unique view.
When would you use a Class Component over a Functional Component?
If your component has state, a lifecycle methods or a class component, you should use a functional component.
What Is difference between setState and forceUpdate () and findDOMNode () in Reactjs?
1. setState() - It is used to update the state of the component. It will only add changes to the original state.
2. forceUpdate() - It is used to forceUpdate the state of the component. It will only update to the original state.
3. findDOMNode() - It is used to forceUpdate the state of the component. It will only update to the original state.
How to use Loop in Reactjs?
let rows = [];
for (var i = 0; i < numrows; i++) {
rows.push(<objectrow key="{i}">);
}
return tbody(rows); </objectrow>
How to set focus in Reactjs?
class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input defaultvalue="Won't focus" />
<input ref="{(input)" /> { this.nameInput = input; }}
defaultValue="will focus"
/>
</div>
);
}
}
What Are the components in Flux architecture?
1. Action
2. Dispatcher
3. Store
4. View
What Are the popular libraries used for Flux?
1. Redux
2. Reflux
3. Alt
What Are refs in React and why are they important?
Refs are used to return the reference to our element and allow you to get direct access to DOM elements.
Refs should be avoided but they are useful when you adding the methods to components.
The example is -
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("My Input Value is -", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input type='text' ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
What Are keys in Reactjs and why are they important?
Reactjs keep track of what items have changed, been added and been removed from a list.
The example looks like -
render () {
return (
<ul>
{
this.state.todoItems.map(({task, uid}) => {
return <li key={uid}>{task}</li>
})}
</ul>
)
.png)