Scribd
Upload
52 views

React

Uploaded by

niroobana rajagobal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
52 views

React

Uploaded by

niroobana rajagobal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

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-fr
amework-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/

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy