6. Intro To Web Development
Narula Institute of Technology
â Web Development usually refers to developing the website for the
Internet (World Wide Web) or for an Internet (Private network).
â Also known as Web Programming. It is the creation of Dynamic Web
Applications
â Examples of Web Applications are Social networking sites like Facebook
or E-commerce sites like Amazon, Flipkart, etc.
â There are two broad division of Web Development -
Front-end Development (also called Client-side Development)
Back-end Development (also called Server-side Development).
7. Frontend development is the subset
of Web Development where we
focus on creating the UI of our
website. This is the part of our
application that our users can see
and interact with.
Frontend Development
8. Technologies used
Have you ever had the wish to create a cool web application, or perhaps
wondered how all the websites that you visit are created? Well, we have
got the answers. In frontend development, we use these three
technologies at the very base:
â HTML (The skeleton of the website)
â CSS (The design of the website)
â JavaScript (The functionality of the website)
12. Document
Object
Model
DOM or Document Object Model,
is a programming interface that allows developers to
manipulate the content and structure of a web page
in real-time using programming languages like
JavaScript.
Node
13. Disadvantage of Real DOM
â There is too much of memory wastage
â Every element of the UI has to be re-rendered for every
UI update
â DOM manipulation is very expensive
â It updates slow
14. Virtual DOM to the rescue
â No memory wastage
â It updates fast
â Only update the elements that have been
changed and not the whole
15. What is React?
React is a powerful tool that
enables developers to build more
dynamic and interactive user
interfaces for web applications by
breaking down web pages into
reusable and modular components.
17. We would need a few tools at our disposal before we get
started
â A laptop (of course)
â Internet connection
â Get Node.js
â Setup node, npm and npx
â See if everything works
â Good to go!
Tools of the trade
18. What is Node.js
Node.js is a cross-platform
JavaScript runtime environment used
for building web applications, APIs,
and server-side tools. It uses an
event-driven, non-blocking I/O model,
is built on the Chrome V8 JavaScript
engine, and has a large community and
ecosystem of third-party libraries
and tools.
19. What is a webpack
Webpack is a module bundler for
JavaScript applications. It takes
different files and bundles them
into a single optimized file. It
automates tasks such as code
splitting, bundling, and
minification. It simplifies the
complexity of modern web
development.
21. Why webpack ?
â Front end development involves many
repetitive tasks
â Production SPAs require a lot of code per
page
â Scalable web apps require efficient static
content delivery
22. We can use a few tools to get started with
our React project
â create-react-app
â Vite.JS
Different flavours of
React
23. What is JSX?
â JSX stands for JavaScript XML.
â JSX allows us to write HTML in
React.
â JSX makes it easier to write and
add HTML in React.
24. Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM
without any createElement() and/or appendChild() methods
Example
Using JSX:
const myElement = <h2>Hello there</h2>
Without JSX:
const myElement = React.createElement(âh1â, {},
âHello thereâ);
25. Hooks, hooks and more hooks
â useState
â useEffect
â useCallback
â useRef
â And much moreâŠ
Just like JSX, hooks too are an integral part of React.