What is React?
React is an open-source JavaScript library created by Facebook for
building complex, interactive UIs in web and mobile applications.
The key point in this answer is that React’s core purpose is to build UI
components; it is often referred to as just the “V” (View) in an “MVC”
architecture. Therefore it has no opinions on the other pieces of your
technology stack and can be seamlessly integrated into any application.
What are the features of React?
Major features of React are listed below:
- It uses the virtual DOM instead of the real DOM.
- It uses server-side rendering.
- It follows uni-directional data flow or data binding.
How is React different?
-
Because React is a small library focused on building UI components, it is necessarily different than a lot of other JavaScript frameworks.
-
By contrast, React focuses exclusively on the creation of components, and has few (if any) opinions about an application’s architecture. This allows a developer an incredible amount of flexibility in choosing the architecture they deem “best” — though it also places the responsibility of choosing (or building) those parts on the developer.
-
It can be conveniently used on the client as well as server side
-
React is easy to integrate with other frameworks like Meteor, Angular, etc
- Using React, writing UI test cases become extremely easy
- Because of JSX, code’s readability increases
What is JSX?
It is called JSX, and it is a syntax extension to JavaScript. JSX produces React “elements” and can be rendered to DOM. This syntax is neither a string nor HTML. It helps to put your markup and login in same file.
React doesn’t require
using JSX, but most people find it helpful as a visual aid when working
with UI inside the JavaScript code. It also allows React to show more
useful error and warning messages.
What is virtual DOM?
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
What is Props?
Props are Read-Only
Whether you declare a component as a function or a class, it must never modify its own props. Consider this
sum function:
function sum(a, b) {
return a + b;
}
Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.
In contrast, this function is impure because it changes its own input:
function withdraw(account, amount) {
account.total -= amount;
}
React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.
What are stateless components?
If React components are essentially state machines that generate UI markup, then what are stateless components?
Stateless components (a flavor of “reusable” components) are nothing
more than pure functions that render DOM based solely on the properties
provided to them.
const StatelessCmp = props => {
return (
<div className="my-stateless-component">
{props.name}: {props.birthday}
</div>
);
};
ReactDOM.render(
<StatelessCmp name="Art" birthday="10/01/1980" />,
document.getElementById('main')
);
What is a state in React and how is it used?
States
are the heart of React components. States are the source of data and
must be kept as simple as possible. Basically, states are the objects
which determine components rendering and behavior. They are mutable
unlike the props and create dynamic and interactive components. They are
accessed via this.state().
How can you update the state of a component?
State of a component can be updated using this.setState().
What is arrow function in React? How is it used?
Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.
Explain the lifecycle methods of React components in detail.
- componentWillMount() – Executed just before rendering takes place both on the client as well as server-side.
- componentDidMount() – Executed on the client side only after the first render.
- componentWillReceiveProps() – Invoked as soon as the props are received from the parent class and before another render is called.
- shouldComponentUpdate() – Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.
- componentWillUpdate() – Called just before rendering takes place in the DOM.
- componentDidUpdate() – Called immediately after rendering takes place.
- componentWillUnmount() – Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.
What are pure functional Components?
Traditional React Components as we have seen thus far are creating a class with
class Example extends React.Component or
React.createClass(). These create stateful components if we ever set the
state (i.e.
this.setState(),
getInitialState(), or
this.state = {} inside a
constructor()).
If we have no intention for a Component to need state, or to need
lifecycle methods, we can actually write Components with a pure
function, hence the term “pure functional Component”:
function Date(props){
let {msg="The date is:"} = props
let now = new Date()
return <div>
<span>{msg}</span>
<time>{now.toLocaleDateString()}</time>
</div>
}
This function that returns a React Element can be used whereever we see fit:
DOM.render(<div><Date msg="Today is"/><div>)
You might notice that
<Date/> also takes a
prop – we can still pass information into the Component.
Explain the purpose of render() in React.
Each React component must have a render() compulsory. If more than one HTML elements needs to be rendered, then they must be grouped together inside one enclosing tag such as
What are Higher Order Components(HOC)?
Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wraps another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.
What can you do with HOC?
HOC can be used for many tasks like:
- Code reuse, logic and bootstrap abstraction
- Render High jacking
- State abstraction and manipulation
- Props manipulation
What is React Router?
React
Router is a powerful routing library built on top of React, which helps
in adding new screens and flows to the application. This keeps the URL
in sync with data that’s being displayed on the web page. It maintains a
standardized structure and behavior and is used for developing single
page web applications. React Router has a simple API.
Why is switch keyword used in React Router v4?
Although
a <div> is used to encapsulate multiple routes inside the Router.
The ‘switch’ keyword is used when you want to display only a single
route to be rendered amongst the several defined routes. The
<switch> tag when in use matches the typed URL with the defined
routes in sequential order. When the first match is found, it renders
the specified route. Thereby bypassing the remaining routes.
What is Redux?
Redux
is one of the hottest libraries for front end development in today’s
marketplace. It is a predictable state container for JavaScript
applications and is used for the entire applications state management.
Applications developed with Redux are easy to test and can run in
different environments showing consistent behavior.
What do you understand by “Single source of truth”?
Redux
uses ‘Store’ for storing the application’s entire state at one place.
So all the component’s state are stored in the Store and they receive
updates from the Store itself. The single state tree makes it easier to
keep track of changes over time and debug or inspect the application.
List down the components of Redux.
Redux is composed of the following components:
Action – It’s an object that describes what happened.
Reducer – It is a place to determine how the state will change.
Store – State/ Object tree of the entire application is saved in the Store.
View – Simply displays the data provided by the Store.
How are Actions defined in Redux?
Actions
in React must have a type property that indicates the type of ACTION
being performed. They must be defined as a String constant and you can
add more properties to it as well. In Redux, actions are created using
the functions called Action Creators.
Below is an example of Action and Action Creator:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
Explain the role of Reducer.
Reducers
are pure functions which specify how the application’s state changes in
response to an ACTION. Reducers work by taking in the previous state
and action, and then it returns a new state. It determines what sort of
update needs to be done based on the type of the action, and then
returns new values. It returns the previous state as it is, if no work
needs to be done.
What is the significance of Store in Redux?
A
store is a JavaScript object which can hold the application’s state and
provide a few helper methods to access the state, dispatch actions and
register listeners. The entire state/ object tree of an application is
saved in a single store. As a result of this, Redux is very simple and
predictable. We can pass middleware to the store to handle processing of
data as well as to keep a log of various actions that change the state
of stores. All the actions return a new state via reducers.
More on the next post .... stay tuned :)
