Front End Development using

React
 Day 3 - Topics
• Setting Up using VS Code
• VS Code Extensions for ES6
• Hello World App
• React Essential Features and Syntax
• React Directory Structure
• Overview of Webpack
• Babel
 Continuity…

• React Component Basics

• Create React Component
• Understanding JSX
• Limitation of JSX
• Working with Components
• Reusing Components
 Setting VS Code
• Hope the following is downloaded and installed in your
system
– Node.js
– VS Code

• After installation, check for the version

 VS Code Extensions
• ES7 + React/Redux/React-Native Snippets
– Extensions for React, React-Native and Redux in
JS/TS with ES7+ syntax. Customizable. Built-in
integration with prettier.

• Live Preview
– Hosts a local server in your workspace for you to
preview your webpages on.
 Continuity…
• Live Server
– Launch a development local Server with live reload
feature for static & dynamic pages.

• Prettier – Code Formatter

– Code formatter using prettier

• Simple React Snippets

– Dead simple React snippets you will actually use.
 Hello World App
// src/App.js
import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<h1>Hello, World!</h1>
</header>
</div>
);
}
export default App;
 Continuity…

• The code starts by importing the React library. In a

React application, this is necessary because React
components are defined using the React library.

• It also imports a CSS file named App.css. This file is

likely to contain styles that will be applied to the
component.
– import React from 'react';
– import './App.css';
 Continuity…

• This code defines a functional component named App.

In React, components can be either functional or class-
based. Here, a functional component is used, which is a
simpler way to define components in modern React.

function App() {
// ...
}
 Continuity…

• The App component's main functionality is to render JSX

(JavaScript XML), which is a syntax extension for
JavaScript recommended by React for describing what the
UI should look like.
return (
<div className="App">
<header className="App-header">
<h1>Hello, World!</h1>
</header>
</div>
);
 Continuity…

• Finally, the App component is exported as the default

export of the module. This means that when this
module is imported into another file, the App
component can be imported using the default import
syntax.

export default App;

 React Directory Structure
my-react-app/
|-- node_modules/ # Node.js modules and packages
|-- public/ # Public assets (e.g., index.html, images)
| |-- index.html
| |-- favicon.ico
|-- src/ # Source code
| |-- components/ # Reusable UI components
| | |-- Header/
| | | |-- Header.js
| | | |-- Header.css
| | |-- Footer/
| | |-- Footer.js
| | |-- Footer.css
| |-- pages/ # Components representing entire pages
| | |-- Home/
| | | |-- Home.js
| | | |-- Home.css
| | |-- About/
| | |-- About.js
| | |-- About.css
| |-- App.js # Main application component
| |-- index.js # Entry point for the application
|-- .gitignore # Git ignore file
|-- package.json # Node.js package file
|-- README.md # Project documentation
|-- .eslint.js # ESLint configuration file
|-- .prettierrc # Prettier configuration file
|-- .babelrc # Babel configuration file
|-- webpack.config.js # Webpack configuration file (if used)
 Continuity…

• node_modules: It contains the React library and any

other third party libraries needed.

• public: It holds the public assets of the application. It

contains the index.html where React will mount the
application by default on the <div id="root"></div>
element.
 Continuity…

• src: It contains the App.css, App.js, App.test.js,

index.css, index.js, and serviceWorker.js files. Here, the
App.js file always responsible for displaying the output
screen in React.

• package-lock.json: It is generated automatically for

any operations where npm package modifies either the
node_modules tree or package.json. It cannot be
published. It will be ignored if it finds any other place
rather than the top-level package.
 Continuity…

• package.json: It holds various metadata required for

the project. It gives information to npm, which allows
to identify the project as well as handle the projects
dependencies.

• README.md: It provides the documentation to read

about React topics.
 Webpack
• Webpack is a popular open-source JavaScript module
bundler that takes your code, assets, and resources, and
bundles them together in a way that's optimized for the
web.

• It is widely used in modern web development to

manage dependencies, optimize assets, and streamline
the development workflow.
 Continuity…

• Webpack is a module bundler we can use to minify

multiple files in a JavaScript project and increase the
overall efficiency.

• A module bundler takes in all the assets and comes up

with a single output file.

• This artifact can be imported into our HTML, making it

a more lightweight project.
Continuity…
 Babel
• Babel is a popular JavaScript compiler that allows
developers to write code using the latest ECMAScript
(ES) standards and features, even if those features are
not yet supported by all browsers.

• It achieves this by transforming (transpiling) modern

JavaScript code into an older version that is widely
compatible with browsers and environments.
Continuity…
 Transpiler
• It is a tool that is used to convert source code into
another source code that is of the same level.

• That is why it is also known as a source-to-source

compiler.

• Both the codes are equivalent in nature, considering

the fact that one works with the specific version of the
browser and one doesn’t.
 Example
// Input code (ES6+)
const square = (x) => x * x;

// Transpiled output (ES5)

var square = function square(x) {
return x * x;
};
Continuity…
 React Component Basics
• Earlier, the developers write more than thousands of
lines of code for developing a single page application.

• These applications follow the traditional DOM

structure, and making changes in them was a very
challenging task.
 Continuity…

• If any mistake found, it manually searches the entire

application and update accordingly.

• The component-based approach was introduced to

overcome an issue. In this approach, the entire
application is divided into a small logical group of
code, which is known as components.
 Continuity…

• A Component is considered as the core building

blocks of a React application.

• It makes the task of building UIs much easier.

• Each component exists in the same space, but they

work independently from one another and merge all in
a parent component, which will be the final UI of your
application.
 Continuity…

• Components are the building blocks of a user interface.

They are reusable, self-contained pieces of code that
encapsulate a specific functionality or part of the UI.

• Every React component have their own structure,

methods as well as APIs.
Continuity…
Continuity…
 Create React Component
• Creating a React component involves defining a
JavaScript function or class that represents the UI or
behavior you want to encapsulate.

• Component can contain:

– Template
– Logic

• Types of Components
– Functional Component
– Class Component
 Functional Component
• A functional component in React is a JavaScript function
that returns React elements (typically JSX) to describe
the user interface.

• Functional components are a simpler and more concise

way to define components, and they were traditionally
stateless.

• However, with the introduction of React Hooks in React

16.8, functional components can now manage state and
use other React features that were previously exclusive to
class components.
 Key Characteristics of Functional
Component
• Simplicity: Functional components are more
lightweight and concise compared to class components.
They are easier to read and write.

• No Lifecycle Methods: Initially, functional

components were stateless and didn't have access to
lifecycle methods. However, with the introduction of
hooks, functional components can now use lifecycle-
equivalent hooks such as useEffect.
 Continuity…
• Use of Hooks: With the introduction of hooks,
functional components can now manage state using
useState, handle side effects with useEffect, and more.
This makes them a powerful alternative to class
components.

• Reusability: Functional components encourage the

creation of small, reusable pieces of code. They
promote the idea of writing modular and composable
components.

• Arrow Functions: Functional components are often

defined using arrow functions, which further
contributes to their concise syntax.
 Steps to Create Functional Component

• Create a New Functional Component File

– In the src directory of your React app, create a new
file for your functional component. For example,
you can create a file named
“FunctionalComponent.js”
• Import React
– In your FunctionalComponent.js file, start by
importing React:
• import React from 'react';
 Continuity…
• Define the Functional Component
– Define your functional component using an arrow
function. This function will return the JSX
representing the component:

const FunctionalComponent = ( ) => {

return (
<div>
<h1>Hello from Functional Component!</h1>
</div>
);
};
 Continuity…

• Export the Functional Component

– Export your functional component to make it
available for use in other files:

export default FunctionalComponent;

 Continuity…

• Use the Functional Component in Another File

– In a file where you want to use your functional
component (e.g., App.js), import it and use it like
any other React component.
 Continuity…
import React from 'react';
import FunctionalComponent from './FunctionalComponent';

const App = () => {

return (
<div>
<h1>My React App</h1>
<FunctionalComponent />
</div>
);
};

export default App;

 Class Component
• A class component is a JavaScript class that extends the
React.Component base class.

• Class components were the primary way of creating

components in React before the introduction of hooks
in React 16.8.

• They have additional features such as state and

lifecycle methods that functional components lacked
until the introduction of hooks.
Key Characteristics of Class Component

• Class Syntax:

– Class components are defined using the ES6 class

syntax and extend the React.Component class.

– The class component includes a render method,

which returns the React elements to be rendered.
 Continuity…

• State:
– Class components can hold and manage local state
using the this.state object.

– State is mutable and can be updated using the

this.setState method.
 Continuity…

• Lifecycle Methods:
– Class components have lifecycle methods that are
invoked at different stages of a component's life.

– Common lifecycle methods include

componentDidMount, componentDidUpdate, and
componentWillUnmount.
 Steps to Create Class Component
• Create a New Class Component File
– In the src directory of your React app, create a new
file for your class component. For example, you can
create a file named ClassComponent.js.
• Import React and Component
– In your ClassComponent.js file, start by importing
React and the Component class from the 'react'
library:
• import React, { Component }
from 'react';
• Define the Class Component Continuity…
– Define your class component by extending the
Component class. You can add a constructor to
initialize state or perform other setup.

class ClassComponent extends Component {

render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
);
}
 Continuity…
• Export the Class Component
– Export your class component to make it available for
use in other files:
• export default ClassComponent;
 Continuity…

• Use the Class Component in Another File

– In a file where you want to use your class
component (e.g., App.js), import it and use it like
any other React component
 Continuity…
import React from 'react';
import ClassComponent from './ClassComponent';

const App = () => {

return (
<div>
<h1>My React App</h1>
<ClassComponent />
</div>
);
};

export default App;

 Understanding JSX
• JSX, or JavaScript XML, is a syntax extension for
JavaScript commonly used with React to describe the
structure of user interfaces.

• JSX provides a more concise and readable way to write

React components compared to using pure JavaScript
or creating elements using React.createElement.
 Continuity…

• Syntax Resembling HTML:

– JSX syntax looks similar to HTML, making it more
readable and familiar to developers.

– Example:
const element = <h1>Hello, JSX!</h1>;
 Continuity…

• Embedding JavaScript Expressions:

– JSX allows embedding JavaScript expressions using
curly braces {}.
– This enables dynamic content and expressions
within the markup.
– Example:
• const name = 'John';
• const element = <h1>Hello, {name}!</h1>;
 Continuity…

• Attributes in JSX:
– JSX uses camelCase for attribute names, similar to
JavaScript object property names. For example,
class in HTML becomes className in JSX.

– const element = <div

className="container">Content</div>;
 Continuity…

• Rendering JSX Elements:

– JSX elements can be rendered directly in the render
method of React components.
– They can also be assigned to variables, passed as
props, or used in various ways within a React
application.

– ReactDOM.render(<App />,
document.getElementById('root'));
 Continuity…

• Nested JSX Elements:

– JSX supports nesting of elements, just like HTML.
This makes it easy to represent the component tree
structure.
const element = (
<div>
<h1>Hello, JSX!</h1>
<p>This is a paragraph.</p>
</div>
);
 Continuity…

• JavaScript Expressions and Statements:

– JSX allows the use of JavaScript expressions within
curly braces, such as conditional statements, loops,
and function calls.

– const isLoggedIn = true;

– const element = isLoggedIn ? <p>User is logged
in</p> : <p>User is not logged in</p>;
 Continuity…

• JSX is Transpiled:
– JSX is not directly understood by browsers, so it
needs to be transpiled into standard JavaScript.

– Tools like Babel are commonly used for this

purpose.
 Limitations of JSX

• Learning Curve:
– JSX might introduce a learning curve for developers
who are new to React or modern frontend
development. The syntax resembles XML/HTML,
which may be unfamiliar to some developers.
• Build Tool Dependency:
– JSX requires a build tool like Babel to transpile it
into standard JavaScript that browsers can
understand. This introduces an additional step in the
development process.
 Continuity…

• No Direct HTML Support:

– JSX is similar to HTML, but it's not exactly the
same. Some HTML attributes and features might not
be directly translatable to JSX. For example, the
class attribute in HTML is className in JSX.
• Verbose Syntax:
– In some cases, JSX might be considered more
verbose than the equivalent JavaScript using
React.createElement. This verbosity can be a matter
of personal preference.
 Continuity…

• Limited Expressiveness:
– JSX is primarily designed for expressing UI
components. It might not be the best choice for
expressing more complex logic or non-UI-related
code.
• JavaScript Expressions Only:
– JSX allows embedding JavaScript expressions, but
they must be enclosed in curly braces. Statements
(such as if statements or loops) are not directly
allowed within JSX. Instead, you typically use
ternary expressions or map functions.
Thank You