What is React?
React is a front-end JavaScript library developed by Facebook in 2011. It follows the component-based approach which helps in building reusable UI components. It is used for developing complex and interactive web (and mobile, with React Native) UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
Differences between the Real DOM and Virtual DOM
Real DOM | Virtual DOM |
---|---|
It updates slower | It updates faster |
Can directly update HTML | Cannot update HTML directly |
Creates a new DOM if element updates | Updates the JSX if element updates. |
DOM manipulation is very expensive. | DOM manipulation is very easy. |
Too much memory wastage | No memory wastage. |
List some of the features of React along with its major advantages.
Big features of React are listed below:
- It leverages the virtual DOM instead of the real DOM, enhancing performance.
- You can use both client-side rendering and server-side rendering, depending on need.
- It follows uni-directional data flow or data binding, making it easier to debug.
Some of the major advantages of React are:
- It increases the application’s perceived performance by not re-rendering the entire HTML page.
- It can be conveniently used on the client (as well as server-side) to support multiple use cases and be used alongside other frameworks.
- Because of JSX, code’s readability increases.
- React is easy to integrate alongside backend libraries like Rails, Node, Django, and even other frontend frameworks like Meteor, Angular, etc. if necessary.
- Using React, writing UI test cases becomes easier since components are isolated and decoupled.
What are the limitations of React?
Limitations of React are listed below:
- React is just a library, not a full-blown framework. You'll need to use plugins to get the full functionality others provide.
- Its API library is very large and can take time to understand.
- It can be a little difficult for novice programmers to understand, as you need to grok multiple concepts like composition, uni-directional data flow, JSX, etc.
- Coding gets complex as it uses inline templating and JSX.
What is JSX?
JSX
is shorthand for JavaScript XML
. This is a type of file used by React which employs the expressiveness of JavaScript with HTML-like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.
The below snippet is an example of JSX:
1render(){
2 return(
3 <div>
4 <h1> Hello World from World!!</h1>
5 </div>
6 );
7}
What do you know about the Virtual DOM? Explain how it works?
The virtual DOM
is a lightweight JavaScript object which originally is just a shallow copy of the real DOM. It forms a node tree that lists the elements, their attributes, and content as JS Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.
This Virtual DOM works in three simple steps.
- Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
Then the difference between the previous DOM representation and the new one is calculated
Once the calculations are done, the real DOM will be updated with only the things that have actually changed.
How different is React’s ES6 syntax when compared to ES5?
1// Syntax has changed from ES5 to ES6 in the following aspects:
2// 1. require vs import
3// ES5
4var React = require('react');
5
6// ES6
7import React from 'react';
8
9// 2. export vs exports
10// ES5
11module.exports = Component;
12
13// ES6
14export default Component;
15
16// 3. component and function
17
18// ES5
19var MyComponent = React.createClass({
20
21 render() {
22 return <h3>Hello World!</h3>;
23 }
24});
25
26// ES6
27class MyComponent extends React.Component {
28
29 render() {
30 return <h3>Hello World!</h3>;
31 }
32}
33
34// 4. props
35
36// ES5
37var App = React.createClass({
38 propTypes: { name: React.PropTypes.string },
39 render: function() {
40 return <h3>Hello, {this.props.name}!</h3>;}
41});
42
43// ES6
44class App extends React.Component {
45render() {
46 return <h3>Hello, {this.props.name}!</h3>;
47 }
48}
49
50// 5. state
51// ES5
52var App = React.createClass({
53 getInitialState: function() {
54 return { name: 'world' };
55 },
56 render() {
57 return <h3>Hello, {this.state.name}!</h3>;
58 }
59});
60
61
62
63
64// ES6
65class App extends React.Component {
66 constructor() {
67 super();
68 this.state = { name: 'world' };
69 }
70 render() {
71 return <h3>Hello, {this.state.name}!</h3>;
72 }
73}
How is React different from Angular?
Characteristics | React | Angular |
---|---|---|
ARCHITECTURE | Only the View of MVC | Complete MVC |
RENDERING | Client-side/Server-side rendering | Client-side rendering |
DOM | Uses virtual DOM | Uses real DOM |
DATA BINDING | One-way data binding | Two-way data binding |
DEBUGGING | Compile-time debugging | Runtime debugging |
AUTHOR |
Build your intuition. Click the correct answer from the options.
Everything in React is a _.
Click the option that best answers the question.
- Module
- Component
- Package
- Class
What is state
in React and how is it used?
State
objects are the heart of React components. States are the source of data that feeds into the various views, and are encouraged to be kept as simple as possible. Basically, states are the objects and properties which determine components rendering and behavior (the final values that users see on their screen). They are mutable unlike the props and create dynamic and interactive components, and are accessed via this.state()
or as variables with the useState
hook.
How can you update the state of a component?
1// State of a component can be updated using this.setState().
2class MyComponent extends React.Component {
3 constructor() {
4 super();
5 this.state = {
6 name: 'Maxx',
7 id: '101'
8 }
9 }
10 render()
11 {
12 setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
13 return (<div>
14 <h1>Hello {this.state.name}</h1>
15 <h2>Your Id is {this.state.id}</h2>
16 </div>);
17 }
18}
19
20ReactDOM.render(
21 <MyComponent/>, document.getElementById('content')
22);
Build your intuition. Click the correct answer from the options.
In which directory React Components are saved?
Click the option that best answers the question.
- Inside js/components/
- Inside vendor/components/
- Inside external/components/
- Inside vendor/
Build your intuition. Click the correct answer from the options.
How many elements does a react component return?
Click the option that best answers the question.
- 2 Elements
- 1 Element
- Multiple Elements
- None of These
Differentiate between states and props.
Conditions | State | Props |
---|---|---|
1. Receive initial value from the parent component | Yes | Yes |
2. Parent component can change the value | No | Yes |
3. Set default values inside the component | Yes | Yes |
4. Changes inside the component | Yes | No |
5. Set the initial value for child components | Yes | Yes |
6. Changes inside child components | No | Yes |
Are you sure you're getting this? Click the correct answer from the options.
What is a state in React?
Click the option that best answers the question.
- Persistent storage
- An internal data store (object) of a component
- None
- Both
How can you embed two or more components into one?
1// We can embed components into one in the following way:
2class MyComponent extends React.Component{
3 render(){
4 return( <div>
5 <h1>Hello</h1>
6 <Header/>
7 </div>);
8 }
9}
10
11class Header extends React.Component{
12 render(){
13 return
14 <h1>Header Component</h1>
15 };
16}
17
18ReactDOM.render(
19 <MyComponent/>, document.getElementById('content')
20);
Are you sure you're getting this? Click the correct answer from the options.
What is Babel?
Click the option that best answers the question.
- A transpiler
- An interpreter
- A Compiler
- Both Compiler and Transpilar
Are you sure you're getting this? Click the correct answer from the options.
What does the "webpack" command do?
Click the option that best answers the question.
- Transpiles all the Javascript down into one file
- Runs react local development server
- Runs a module bundler
- All of the above
Are you sure you're getting this? Click the correct answer from the options.
What port is the default where the webpack-dev-server will run?
Click the option that best answers the question.
- 3000
- 8080
- 3306
What is the arrow function in React? How is it used?
Arrow functions is a convenient use of brief syntax for writing a function expression. They are also called fat arrow‘ (referring to the
=>`) functions. These functions are bound to the context of their components, important to note since in ES6 auto binding is not available by default. Arrow functions are most useful while working with higher-order functions.
1// General way
2render() {
3 return(
4 <MyInput onChange={this.handleChange.bind(this) } />
5 );
6}
7// With Arrow Function
8render() {
9 return(
10 <MyInput onChange={ (e) => this.handleOnChange(e) } />
11 );
12}
Let's test your knowledge. Click the correct answer from the options.
What is ReactJS?
Click the option that best answers the question.
- Server-side Framework
- User-interface framework
- A Library for building interaction interfaces
- None of These
Let's test your knowledge. Click the correct answer from the options.
What are the two ways that data gets handled in React?
Click the option that best answers the question.
- state & props
- services & components
- Both
- None
Are you sure you're getting this? Click the correct answer from the options.
In React what is used to pass data to a component from outside?
Click the option that best answers the question.
- setState
- render with arguments
- props
- PropTypes
Why can’t browsers read JSX?
Browsers can only read JavaScript objects. JSX is not a regular JavaScript object. Thus, to enable a browser to read JSX, first, we need to transform the JSX file into the JavaScript object using JSX transformers like Babel and then pass it to the browser.
“In React, everything is a component.” Explain.
Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces.
It renders each of these components independent of each other without affecting the rest of the UI.
What is the purpose of render() in React.
Each React component must have a render()
method. It returns a single React element-- the representation of the native DOM element. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as: form, group, div, etc. This function must be kept pure i.e., it must return the same result each time it is invoked.
What are Props?
Props is the shorthand for Properties in React. They are read-only components that must be kept pure (i.e. immutable
). They are always passed down from the parent to the child components throughout the application.
A child component can never send a prop back to the parent component. This helps in maintaining the unidirectional data flow and is generally used to render the dynamically generated data.
What is flux?
Flux is an application design paradigm used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React. The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:
One Pager Cheat Sheet
- React is a
component-based
JavaScript library developed by Facebook in 2011 used to create complex and interactive web and mobile UIs. - The Real DOM updates slower but can directly update HTML, whereas the
Virtual DOM
updates faster but cannot update HTML directly, so it updates theJSX
instead with no memory wastage. - React
increases perceived performance
, making iteasy to integrate
with other libraries,JSX increases readability
, andUI test cases are easier
to write. - React has a large API library and requires the use of multiple concepts and plugins to achieve full functionality, which may be
challenging
fornovice programmers
. - JSX is
JavaScript XML
that provides an easy-to-understand syntax for React applications to boost performance. - The
Virtual DOM
works by re-rendering the entire UI in its representation, calculating the difference between the previous and new DOM, and updating the real DOM with only the changes. - React's ES6 syntax has drastically changed from ES5 in terms of
require vs import
,export vs exports
,component and function
,props
, andstate
. React
uses a One-way data bindingvirtual DOM
, whileAngular
uses a Two-way data bindingreal DOM
, and was created byGoogle
andFacebook
respectively.- React
components
are the building blocks of a React application, allowing for a more modular structure with built-in control of behavior and state to make the development process smoother and more organized. - React components use
state
objects to create dynamic and interactive elements by accessing them viathis.state()
or theuseState
hook. - The state of a component can be updated using
this.setState()
. - React Components are typically saved in the
js/components/
directory because they are written in JavaScript, making the structure convenient to keep the code organized and reducing setup when creating new projects. - A React component is a
function
orclass
that producesReact Elements
wheninvoked
, potentially containing multiple or nested elements. - State is an object that keeps track of changing data within a component, and are managed within the component, while Props are used to pass data and event handlers from one component to another, and are managed by the parent component.
- A React component's
state
is an internal object that holds data used to determine how the component renders and behaves, set with a default value and updated manually or when itsprops
are changed. - We can embed multiple components into one using
ReactDOM.render()
and aparent component
. - Babel is a
JavaScript Compiler
(also known as a Transpiler) that can transform ES6+ JavaScript code into older ES5 code supported by most browsers, enabling developers to use modern language features. webpack
bundles multiple individual JavaScript files, including those written with ES6 syntax, into a single file, while Babel compiles modern JavaScript code down to backward-compatible versions for browsers.- The
webpack-dev-server
bundles your source code and serves it to a local development environment accessible via theURL
http://localhost:8080, running by default on port8080
. - Arrow functions are a concise
syntax
of function expression referred to as 'fat arrow', which bind to the context of their React components and are most useful with higher-order functions. - ReactJS is a
JavaScript library
developed by Facebook in 2013, used for building dynamic, reusable user interfaces for single page applications that can change data without reloading the page through itsVirtual DOM
. - ReactJS is a JavaScript library used for building user interfaces and web applications, which relies on
state
andprops
to track and pass data, respectively. - In React,
props
arepassed
to a component from outside to provide dynamic data. - Browsers can only read JavaScript objects, so
JSX
must be transformed into a JavaScript object usingJSX transformers
likeBabel
before being passed to the browser. - In React,
components
are used to divide the UI into small, independent, reusable pieces which are then rendered independently without affecting the rest of the application. - The
render()
method of React components must return a single React element which groups together other HTML elements, and must be keptpure
. - Props are read-only
immutable
components that are passed down from the parent to the child components in React, helping to maintain a unidirectional data flow and render dynamic data. Flux
is a application design paradigm based on Unidirectional Data Flow, used to replace the traditionalMVC
pattern and is used by Facebook internally when working with React.