React all Flashcards
What is React?
React is a declarative, efficient, flexible open source front-end JavaScript library developed by Facebook in 2011. It follows the component-based approach for building reusable UI components, - for single page application. Used for developing interactive view layer of web and mobile apps.
What are the features of React?
JSX
Components
One-way Data Binding
Virtual DOM
Simplicity
Performance
What are advantages of using React?
-React is easy to learn and use - easy for any developer to switch from JavaScript background to React .
-React follows the MVC architecture - is the V (view part) in the MVC (Model-View-Controller) architecture model.
-React uses Virtual DOM to improve efficiency.The virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser.
-Creating dynamic web applications is easy, less coding and gives more functionality. It uses JSX (JavaScript Extension), which is a particular syntax letting HTML quotes and HTML tag syntax to render particular subcomponents.
-React is SEO-friendly.
React facilitates a developer to develop an engaging user interface that can be easily navigated in various search engines. It also allows server-side rendering.
-React allows reusable components.Multiple components where each component has its logic and controls. These components provide a small, reusable piece of HTML code as an output that can be reused wherever you need them.
-Support of handy tools- that can make the task of the developers understandable and easier.
-React has a rich set of libraries.
-Scope for testing the codes
What are the limitations of React?
React is just a library. It is not a complete framework.
It has a huge library which takes time to understand.
It may be difficult for the new programmers to understand and code.
React uses inline templating and JSX, which may be difficult and act as a barrier. It also makes the coding complex.
What is JSX?
JSX stands for JavaScript XML. It is a React extension which allows writing JavaScript code that looks similar to HTML. React application robust and boosts its performance. JSX provides you to write XML-like syntax in the same file where you write JavaScript code, and then preprocessor (i.e., transpilers like Babel) transform these expressions into actual JavaScript code.
Why can’t browsers read JSX?
Browsers cannot read JSX directly because they can only understand JavaScript objects, and JSX is not a regular JavaScript object. Thus, we need to transform the JSX file into a JavaScript object using transpilers like Babel and then pass it to the browser.
Why we use JSX
It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.
Putting markup and logic in separate files, React uses components that contain both.
t is type-safe, and most of the errors can be found at compilation time.
It makes easier to create templates.
What is Virtual DOM?
A Virtual DOM is a JavaScript object which is an in-memory representation of real DOM. It is step between the render function being called and the displaying of elements on the screen. It is similar to a node tree which lists the elements, their attributes, and content as objects and their properties. The render function creates a node tree of the React components and then updates this node tree in response to the mutations in the data model caused by various actions done by the user or by the system.
How working of Virtual DOM?
Virtual DOM works in three steps:
- Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation. Difference between the previous DOM representation and the new DOM is calculated. 3. When calculations are completed, the real DOM updated with only those things which are changed.
React’s ES6 syntax is different from ES5 syntax - require vs. Import?
// ES5
var React = require(‘react’);
// ES6
import React from ‘react’;
React’s ES6 syntax is different from ES5 syntax - exports vs. export?
// ES5
module.exports = Component;
// ES6
export default Component;
React’s ES6 syntax is different from ES5 syntax - component and function?
// ES5
var MyComponent = React.createClass({
render: function() {
return(
<h3>Hello JavaTpoint</h3>
);
}
});
// ES6
class MyComponent extends React.Component {
render() {
return(
<h3>Hello Javatpoint</h3>
);
}
}
React’s ES6 syntax is different from ES5 syntax - props?
// ES5
var App = React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return(
<h3>Hello, {this.props.name}!</h3>
);
}
});
// ES6
class App extends React.Component {
render() {
return(
<h3>Hello, {this.props.name}!</h3>
);
}
}
React’s ES6 syntax is different from ES5 syntax - state?
// ES5
var App = React.createClass({
getInitialState: function() {
return { name: ‘world’ };
},
render: function() {
return(
<h3>Hello, {this.state.name}!</h3>
);
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state = { name: ‘world’ };
}
render() {
return(
<h3>Hello, {this.state.name}!</h3>
);
}
}
ReactJS
1 Initial release in 2013.
2 It is used for developing web applications.
3 It can be executed on all platforms.
4 It uses a JavaScript library and CSS for animations.
5 It uses React-router for navigating web pages.
6 It uses HTML tags.
7 In this, the Virtual DOM renders the browser code.
