Unit - 5

What is MERN?
• MERN is a popular technology stack used for building web applications,
especially single-page applications (SPAs) and full-stack JavaScript
applications.
• MERN is an acronym that stands for:
1. Express.js - A web application framework for Node.js. It simplifies the process of
building server-side logic and handling HTTP requests and responses.
2. React.js - A JavaScript library developed by Facebook for building user interfaces.
React is popular for creating fast and interactive front-end applications with a
component-based structure.
3. Node.js - A runtime environment for executing JavaScript on the server side. It
enables developers to use JavaScript for both client-side and server-side code, which
is efficient and promotes consistency.
4. MongoDB - A NoSQL database that stores data in JSON-like documents. It’s known
for its flexibility, scalability, and ease of integration with JavaScript-based
applications.
• Together, these technologies allow developers to build full-stack applications with
JavaScript from front-end to back-end.
• React allows developers to create large web applications that can
update and render efficiently in response to data changes.
Key Features of ReactJS:
1.Component-Based Architecture:
1. React applications are built with a component-based structure, where each
UI section is encapsulated as a "component."
2. Components are reusable and can manage their state, making it easy to
develop and maintain complex interfaces.
2. Virtual DOM:
• React uses a Virtual DOM, a lightweight copy of the actual DOM. When
changes occur, React updates the Virtual DOM and then calculates the most
efficient way to update the real DOM.
• This approach minimizes direct manipulation of the DOM, resulting in faster
updates and improved performance.
3. JSX (JavaScript XML):
• React uses JSX, a syntax extension for JavaScript that allows you to write
HTML-like code within JavaScript.
• JSX makes it easier to visualize the component structure and understand how
the UI will look.
4. Unidirectional Data Flow:
• Data in React flows in one direction, from parent to child components. This
makes it easier to understand how data moves within an application and
manage state changes.
5. State and Props:
• State: Each component can maintain its own state, which stores data that
may change over time and affect the component's rendering.
• Props: Short for "properties," props are used to pass data from parent to child
components.
 Basic React Applications
• A basic React application usually consists of creating a new React project, building components, and
managing their state.
• Uses React to render a simple page and use Node.js and Express to serve that page from a web server
• Server-Less Hello World
• No surprise, the React library is available as a JavaScript file that we can include in the HTML file using
the <script> tag
• It comes in two parts: the first is the React core module, the one that is responsible for dealing with
React components, their state manipulation, etc.
• The second is the ReactDOM module, which deals with converting React components to a DOM that
a browser can understand.
• These two libraries can be found in unpkg, a Content Delivery Network (CDN) that makes all open-
source JavaScript libraries available online.
 let’s create a <div> that will eventually hold any React elements
that we will create. This can be an empty , but it needs an ID,
say, content, to identify and get a handle in the JavaScript code.

To create the React element, the createElement() function of the React module needs to be called.
•The type can be any HTML tag such as the string 'div', or a React component.
• props is an object containing HTML attributes or custom component properties.
•The last parameter(s) is zero or more children elements, which again are created
using the createElement() function itself.
For the Hello World application,
let’s create a very simple nested element— <div >a with a title attribute (just to show how
attributes work) that contains a heading with the words “Hello World!”

Each of these React elements needs to be transferred to the real DOM for the user interface to be constructed on
screen.
To do this, a series of document.createElement() calls needs to be made corresponding to each of the React
elements
 JSX
• The simple element that we created in the previous section was easy to write using
React.createElement() calls.
• But writing nested hierarchy of elements and components is complex
• Also the actual DOM can’t be easily visualized when using the function calls as it can be
visualized if it were plain HTML.
• To address this, React has a markup language called JSX, which stands for JavaScript XML.
• JSX looks very much like HTML, but there are some differences.
• So, instead of the React.createElement() calls, JSX can be used to construct an element or an
element hierarchy and make it look very much like HTML.
• For the simple Hello World element that we created, in fact, there is no difference between
HTML and JSX.
• So, let’s just write it as HTML and assign it to the element, replacing the React.CreateElement()
calls:
• But browsers’ JavaScript engines don’t understand JSX.
• It has to be transformed into regular JavaScript based React.createElement() calls.
• To do this, a compiler is needed.
• The compiler that does this (and can do a lot more, in fact) is Babel.
• We should ideally pre-compile the code and inject it into the browser, but for
prototyping purposes, Babel provides a standalone compiler that can be used in
the browser.
• This is available as a JavaScript file, as usual, at unpkg. Let’s include this script
within the section of index.html like this:
When you test this set of changes, you
will find no difference in the
appearance of the page, but it could
be a wee bit slower due to the
compilation done by Babel.
React Components
• React classes
• React classes are used to create real components. These classes can then be
reused within other components, handle events, and so much more.
• A class component must include the extends React.Component statement.
• This statement creates an inheritance to React.Component, and gives your
component access to React.Component's functions.
• The component also requires a render() method, this method returns HTML.
• The render() method is required in every React component. It returns
the JSX that defines what should be displayed on the screen.
• continents is an array that holds the names of different continents.
• Array.from() is used here to create a new array.
• It takes two arguments:The first argument is the continents array.
• The second argument is a mapping function c => \Hello ${c}!` which is
applied to each element (c) of the continentsarray.
• This will create a new array where each continent is prefixed
with"Hello "and suffixed with"!"`.
• After this line, the helloContinents array will look like this:

The join(' ') method is used on the helloContinents array to concatenate the greetings into a single string,
with each greeting separated by a space. After this step, the message variable will be:

return (
<div title="Outer div">
<h1>{message}</h1>
</div>
);
The component returns a JSX structure with a <div> that has the title attribute set to "Outer div", and an
<h1> element that displays the message variable.
const element = <HelloWorld />;
ReactDOM.render(element, document.getElementById('contents'));

The HelloWorld component is rendered into the DOM element with the id of "contents".
• When this code is executed, the React component will render the
following HTML structure:
Composing Components
• Component composition is one of the most powerful features of React.
• the UI can be split into smaller independent pieces so that each piece can be coded and
reasoned in isolation, making it easier to build and understand a complex UI.
• A component takes inputs (called properties) and its output is the rendered UI of the
component.
• Larger components should be split into fine-grained components when there is a logical
separation possible between the fine-grained components.
• components can be built which take in different inputs from different callers.
• React’s philosophy prefers component composition in preference to inheritance.
• In general, remember to keep coupling between components to a minimum (coupling is
where one component needs to know about the details of another component,
including parameters or properties passed between them).
• Let’s design the main page of the application to show a list of issues,
with an ability to filter the issues and create a new issue.
• it have three parts: a filter to select which issues to display, the list of
issues, and finally an entry form for adding an issue.
This component is the main container for the other
components. It brings together the IssueFilter,
IssueTable, and IssueAdd components into a
cohesive layout for the issue tracker.

•It wraps everything in a React.Fragment

•It includes a heading (h1) with the title "Issue Tracker".
•Then it renders:The IssueFilter component.
•A horizontal rule (<hr />) for separating sections.
•The IssueTable component.
•Another horizontal rule.
•The IssueAdd component.

element is an instance of the IssueList

component, written using JSX syntax
(which is transformed by React into
React.createElement calls under the
hood).
ReactDOM.render(...) is the method
used to render the IssueList component
into the DOM
Passing Data Using Properties
• It is possible to pass different input data from a parent component to a child
component and make it render differently on different instances.
• In the Issue Tracker application, one such component that can be instantiated
with different inputs is a table-row showing an individual issue.
• Depending on the inputs (an issue), the row can display different data. The new
structure of the UI is shown in Figure
Passing Data Using Children
• There is another way to pass data to other components, using the
contents of the HTML-like node of the component.
• In the child component, this can be accessed using a special field of
this.props called this. props.children.
React State
• React uses a data structure called state in the component.
• The state essentially holds the data, something that can change, as
opposed to the immutable properties in the form of props that you
saw earlier.
• This state needs to be used in the render() method to build the view.
It is only the change of state that can change the view.
• When data or the state changes, React automatically re-renders the
view to show the new changed data.
Initial State
• The state of a component is captured in a variable called this.state in
the component’s class, which should be an object consisting of one or
more key-value pairs, where each key is a state variable name and the
value is the current value of that variable.
• React does not specify what needs to go into the state, but it is useful
to store in the state anything that affects the rendered view and can
change due to any event.
• These are typically events generated due to user interaction.
 Async State Initialization
• The state can only be assigned a value in the constructor.
• After that, the state can be modified, but only via a call to React.Component’s
this.setState() method.
• This method takes in one argument, which is an object containing all the
changed state variables and their values.
• The only state variable that we have is the one called issues, which can be set
to any list of issues in a call to this.setState() like this:
• If there were additional state variables, setting only one variable (issues) will
cause it to get merged with the existing state.
• For example, if we had stored the current page as another state variable, the new
value of the state variable issues will be merged into the state, keeping the value
of the current page unchanged.
• Since at the time of constructing the component, we don’t have the initial data,
we will have to assign an empty array to the issues state variable in the
constructor.

•We will not fetch the data from the server just yet, but to explore the changes to the
state initialization, let’s simulate such a call.
• The key difference between a global array of issues and a call to the server is that
the latter needs an asynchronous call.
Async State Initialization