Learning objectives

o Explore React and JSX

o Install React and create a project

o Create a React component and dynamically display data

o Apply style to a React component

Prerequisites

o Knowledge of HTML, CSS, and Git

o JavaScript & ES6

o Knowledge of package management with Node.js and npm

o node.js and npm locally installed

o A code editor, such as Visual Studio Code

Tech Stacks
A Technology stack is simply a collection of technologies used to build a software
product.
JavaScript is an amazing ,flexible language that dominates web development and is
perfectly viable for producing full stack software and web & mobile applications.
 Setup the Environment
To begin, you’ll need Node.js and npm installed on your computer.

Node.js : Node.js is an open-source, cross-platform JavaScript runtime environment.

npm : npm is the default package manager for the JavaScript runtime
environment Node.js

Installation : Download and Install Node.js from node.js/org.

npm included with node.js

Check installation : Open your terminal and run these commands to verify the
installations

node –v
npm –v
What is React.js?

React is a popular JavaScript Library for building

user interfaces. It allows you to create dynamic
and interactive UI Components in web
Application
What is React.js?

o Frontend Library developed by Facebook.

o Used for handling view layer for web and mobile apps.
o Uses Model-View-Controller pattern
o Allows us to create reusable UI components.
o Strong foundation and large community behind it.
o React uses virtual DOM which is JavaScript object.
o Component and Data patterns improve readability which helps to
maintain larger apps.
o React can be used with other frameworks.
Example : Redux -State Management and React-router - Handling
the routes
Library
A Library is a cluster of pre-written code snippets that can imported and used to perform
common functionalities easily.

This promotes the reusability of code and thus faster work flow

Examples : jQuery , React

Framework
Framework is an abstraction in which software providing generic functionality can be
selectively changed by additional user-written code, thus providing application-specific
software

Examples : Angular and Vue.js

Key different between Library and Framework is iOc (inversion of control)

Virtual DOM
What is DOM?
• The Document Object Model (DOM) is a programming interface for web documents.
• It represents the HTML structure of a web page, which can be accessed and manipulated by JavaScript.
• When a web page is loaded, the browser creates a DOM tree that consists of all the HTML elements on
the page.

What is Virtual DOM?

• The Virtual DOM is a crucial concept utilized in modern frameworks such as React, which significantly
improves the performance of updating the real DOM.
• When a state change occurs in a React component, instead of updating the actual DOM directly, React
creates a lightweight replica of the DOM known as the Virtual DOM.
• React then compares the updated Virtual DOM with the previous one to identify the changes that need to
be applied to the real DOM.
• Once the changes are determined, React updates the real DOM in an optimized and efficient manner,
thereby reducing unnecessary re-renders and improving overall performance.
JSX
• JavaScript Syntax Extension — JSX is a syntax extension to
JavaScript.
• JSX allows HTML (XML) and JavaScript to be combined in one file
• With the help of JSX, we can write HTML code in the same file
that contains JavaScript code.
• JSX follows XML rules
• All elements must be placed inside one parent element
• All elements must be closed
JSX Syntax Rules
• Element tags
JSX Uses angle brackets (<>) to define elements, similar to HTML
• Components
Use components like (<header/>)
• Self closing tags
<img/> <input/>
• JavaScript Expressions
embed JavaScript expression within curly braces {}
JSX and HTML Differences
• class vs className
<div className=“my-class”></div>

• Inline styles
<div style ={{color:`color`}}></div>

• Self closing tags

<img src=“image.jpg” alt=“my image” />
Create Your First React App
React app using the official
• Create a new app
npx create-react-app my-first-app

• Navigate to the App and Move into your new app’s directory
cd my-first-app

• To Run in Browser
npm start

For Knowledge : Vite is a next-generation, front-end tool that focuses on speed and performance.
npm create vite@latest
npm run dev
Can browser read JSX Directly?

Browsers do not natively support JSX

• JSX must be converted to HTML and JavaScript through the build

process (Regular JavaScript Object)

• Several tools exist for managing this process including Vite, babel
(Next generation compiler),Webpack and Snowpack
Components

• React Components are reusable ,self-contained units that encapsulate a

specific piece of the user interface.
• they can be thought of as custom HTML elements with their own logic
and rendering capabilities
• Topics we will discuss in this carousel are: functional Component Class
Component
Components
Function Components

• Functional components are a simpler way to define components using

JavaScript Functions.
• Stateless components
• Use of Hooks for state management

Class Components
• Class components are the older way of defining components.
• Behavior through lifecycle methods
• Internal State management using this.state
• Can handle more complex logic
Why React ?
• Complex user interfaces • Performance
• SEO friendly • Powers of react native
• Strong community support • React increase productivity
• Code stability • React makes testing easy
• Fast rendering • Code reusability
• Virtual DOM • Create ecommerce application
• Apps using react js • Data binding
• Mobile app development • Ease of learning
• Flexibility • Easiest learning curve
• Has useful developer toolset • Easy debugging
• Independently deployable • Faster development
components • Improved developer productivity
• Improved SEO
References
• https://nodejs.org/en
• https://www.npmjs.com/
• https://react.dev/learn
• https://www.w3schools.com/REACT/DEFAULT.AS
• https://www.freecodecamp.org/news/the-difference-between-a-
framework-and-a-library-bd133054023f/
• https://code.visualstudio.com/
• https://www.youtube.com/watch?v=jwRAdGLUarw
• https://www.codecademy.com/learn/react-101
• https://vitejs.dev/guide/