Question: Explain about Architecture of ReactJS.
React elements
JavaScript representation of HTML DOM. React provides an
API, [Link] to create React Element.
JSX
A JavaScript extension to design user interface. JSX is an XML
based, extensible language supporting HTML syntax with little
modification. JSX can be compiled to React Elements and used to
create user interface.
React component
React component is the primary building block of the React
application. It uses React elements and JSX to design its user
interface. React component is basically a JavaScript class (extends
the [Link] class) or pure JavaScript function. React
component has properties, state management, life cycle and event
handler. React component can be able to do simple as well as
advanced logic.
Architecture of the React Application
React library is just UI library and it does not enforce any particular
pattern to write a complex application. Developers are free to
choose the design pattern of their choice. React community
advocates certain design pattern. One of the patterns is Flux
pattern. React library also provides lot of concepts like Higher
Order component, Context, Render props, Refs etc., to write better
code. React Hooks is evolving concept to do state management in
big projects.
• React app starts with a single root component.
• Root component is build using one or more component.
• Each component can be nested with other component to any
level.
• Composition is one of the core concepts of React library. So,
each component is build by composing smaller components
instead of inheriting one component from another
component.
• Most of the components are user interface components.
• React app can include third party component for specific
purpose such as routing, animation, state management, etc.
Question: Write the features of ReactJS.
ReactJS slowly becoming one of the best JavaScript framework
among web developers. It is playing an essential role in the front-
end ecosystem. Following are the important features of ReactJS
• Virtual DOM
• Components
• JSX
• One way data binding
• Scalable
• Flexible
• Modular
Virtual DOM
Virtual DOM is a special DOM created by React. Virtual DOM
represents the real DOM of the current HTML document.
Components
React is build upon the concept of components. All modern front
end framework relies on the component architecture.
JSX
JSX is a JavaScript extension to create arbitrary HTML element
using syntax similar to HTML.
One way data binding
One way data binding prevents the data in a component to flow
backward.
Scalable
React can be used to create application of any size.
Flexible
React only provides only few basic concept to create truly scalable
application.
Modular
React component can be created in a separate JavaScript file and
can be made exportable.
Question: Write the difference between ReactJS and React Native.
• React is a JavaScript library of reusable components designed to
create skeletons of the apps, whereas React Native is designed to
build native mobile apps with reusable components.
• React is used to build the user interface for web applications,
whereas React Native is used for developing a mobile applications
for Android, iOS and Windows.
• React utilizes HTML, CSS, and JavaScript to create interactive user
interfaces, whereas React Native utilizes APIs and native UI
components to build mobile applications.
• [Link] used a virtual DOM to render browser code in React,
whereas React Native uses Native API to render components for
mobile applications.
• React has a steep learning curve as it requires knowledge of
libraries, whereas React Native is easier to understand with basic
knowledge of React and JavaScript.
• React is an open-source JS library for building the UIs for web
applications; besides, React Native is used to build rich mobile UI
from declarative components using only JavaScript.
Question: Explain about the environmental setup or different ways to install
ReactJS (Pre-requisite and React-create app).
Pre-requisite for ReactJS
1. NodeJS and NPM
2. React and React DOM
3. Webpack
4. Babel
Ways to install ReactJS
There are two ways to set up an environment for successful ReactJS application. They
are given below.
1. Using the npm command
2. Using the create-react-app command
1. Using the npm command
Install NodeJS and NPM
NodeJS and NPM are the platforms need to develop any ReactJS application.
Install React and React DOM
Create a root folder with the name reactApp on the desktop or where we want.
Now, you need to create a [Link] file. To create any module, it is required to
generate a [Link] file in the project folder. To do this, you need to run the
following command as shown in the below image.
1. javatpoint@root:~/Desktop/reactApp> npm init -y
After creating a [Link] file, you need to install react and its
DOM packages using the following npm command in the terminal window as shown
in the below image.
1. javatpoint@root:~/Desktop/reactApp>npm install react react-dom --save
Install Webpack
Webpack is used for module packaging, development, and production pipeline
automation. We will use webpack-dev-server during development, webpack to
create production builds, and webpack CLI provides a set of commands. Webpack
compiles these into a single file(bundle). To install webpack use the command shown
in the below image.
1. javatpoint@root:~/Desktop/reactApp>npm install webpack webpack-dev-
server webpack-cli --save
Using the create-react-app command
If we do not want to install react by using webpack and babel, then we can choose
create-react-app to install react. The 'create-react-app' is a tool maintained by
Facebook itself. This is suitable for beginners without manually having to deal with
transpiling tools like webpack and babel.
Install NodeJS and NPM
NodeJS and NPM are the platforms need to develop any ReactJS application.
Install React
we can install React using npm package manager by using the below command. There
is no need to worry about the complexity of React installation. The create-react-app
npm package will take care of it.
1. javatpoint@root:~/>npm install -g create-react-app
Create a new React project
After the installation of React, you can create a new react project using create-react-
app command. Here, I choose jtp-reactapp name for my project.
1. javatpoint@root:~/>create-react-app jtp-reactapp
The above command will install the react and create a new project with the name jtp-
reactapp.
Question: Explain about ReactJS Component ( Class component and Function
Component).
React component is the building block of a React application.
React component accomplish these feature using three concepts
−
• Properties − Enables the component to receive input.
• Events − Enable the component to manage DOM events and
end-user interaction.
• State − Enable the component to stay stateful. Stateful
component updates its UI with respect to its state.
There are two types of components in React. They are −
• Function Components
• Class Components
Function Components
A function component is literally defined as JavaScript functions.
This React component accepts a single object argument and
returns a React element. Note that an element in React is not a
component, but a component is comprised of multiple elements.
Following is the syntax for the function component in React:
function function_name(argument_name) {
function_body;
}
Class Components
Similarly, class components are basic classes that are made of
multiple functions. All class components of React are subclasses
of the [Link] class, hence, a class component must
always extend it. Following is the basic syntax −
class class_name extends [Link] {
render() {
return <h1>Hello, {[Link]}</h1>;
}
}
• Function components are very minimal in nature. Its only
requirement is to return a React element.
function Hello() {
return '<div>Hello</div>'
}
The same functionality can be done using ES6 class component
with little extra coding.
class ExpenseEntryItem extends [Link] {
render() {
return (
<div>Hello</div>
);
}
}
• Class components supports state management out of the
box whereas function components does not support state
management. But, React provides a hook, useState() for the
function components to maintain its state.
• Class component have a life cycle and access to each life
cycle events through dedicated callback apis. Function
component does not have life cycle. Again, React provides a
hook, useEffect() for the function component to access
different stages of the component.
Creating a class component
Let us create a new React component (in our expense-manager
app), ExpenseEntryItem to showcase an expense entry item.
Expense entry item consists of name, amount, date and category.
The object representation of the expense entry item is −
{
'name': 'Mango juice',
'amount': 30.00,
'spend_date': '2020-10-10'
'category': 'Food',
}
Open expense-manager application in your favorite editor.
Next, create a
file, [Link] under src/components folder to style
our component.
Next, create a
file, [Link] under src/components folder by
extending [Link].
import React from 'react';
import './[Link]';
class ExpenseEntryItem extends [Link] {
}
Next, create a method render inside the ExpenseEntryItem class.
class ExpenseEntryItem extends [Link] {
render() {
}
}
Question: Explain about ReactJS Styling.
React allows component to be styled using CSS class through
className attribute.
three important methodology to style our component
• CSS Stylesheet
• Inline Styling
• CSS Modules
CSS Stylesheet
CSS stylesheet is usual, common and time-tested methodology.
Simply create a CSS stylesheet for a component and enter all
your styles for that particular component. Then, in the
component, use className to refer the styles.
Next, open [Link] file and add few styles.
[Link] {
color: brown;
font-size: 14px;
}
Next, open [Link] and add className to the main
container.
import React from 'react';
import './[Link]';
class ExpenseEntryItem extends [Link] {
render() {
return (
<div className="itemStyle">
<div><b>Item:</b> <em>Mango Juice</em></div>
<div><b>Amount:</b> <em>30.00</em></div>
<div><b>Spend Date:</b> <em>2020-10-10</em></div>
<div><b>Category:</b> <em>Food</em></div>
</div>
);
}
}
export default ExpenseEntryItem;
Next, serve the application using npm command.
npm start
Inline Styling
Inline Styling is one of the safest ways to style the React
component. It declares all the styles as JavaScript objects using
DOM based css properties and set it to the component
through style attributes.
Open expense-manager application in your favorite editor and
modify [Link] file in the src folder. Declare a
variable of type object and set the styles.
itemStyle = {
color: 'brown',
fontSize: '14px'
}
Here, fontSize represent the css property, font-size. All css
properties can be used by representing it in camelCase format.
Next, set itemStyle style in the component using curly braces {}
−
render() {
return (
<div style={ [Link] }>
<div><b>Item:</b> <em>Mango Juice</em></div>
<div><b>Amount:</b> <em>30.00</em></div>
<div><b>Spend Date:</b> <em>2020-10-10</em></div>
<div><b>Category:</b> <em>Food</em></div>
</div>
);
}
Question: Explain about ReactJS Properties.
React enables developers to create dynamic and advanced
component using properties. Every component can have
attributes similar to HTML attributes and each attribute's value
can be accessed inside the component using properties (props).
React properties supports attribute's value of different types.
They are as follows,
• String
• Number
• Datetime
• Array
• List
• Objects
Using Props
When we need immutable data in our component, we can just
add props to [Link]() function in [Link] and use it
inside our component.
[Link]
import React from 'react';
class App extends [Link] {
render() {
return (
<div>
<h1>{[Link]}</h1>
<h2>{[Link]}</h2>
</div>
);
}
}
export default App;
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './[Link]';
[Link](<App headerProp = "Header from props..." contentProp =
"Content
from props..."/>, [Link]('app'));
export default App;