What Is React.js?
Creating New React Project
Various optimizations should be
React code includes syntax that’s
applied before deploying React
not browser compatible!
websites
More complex project setup required
Projects with tools for improving developer experience &
transforming / optimizing the code
Input & Output
Browser Code
Developer Code
(simpli ed)
function App() { const el = document.createElement('h1')
return <h1>Hello World!</h1> el.textContent = ‘Hello World!'
} body.append(el)
React Project
Converts your developer-friendly code to
browser-compatible code
fi
Understanding Components
React, Client-Side & Backends
Frontend Backend
HTTP Requests
Built with any language &
React.js & Responses
framework
A Single-Page Interacts with server-side
Application (SPA) les, databases etc.
fi
Adding Routing
React App
/ /products /products/p-1
Landing Page Products Page Product Details Page
Loads & displays details
A generic (marketing) Loads & displays a list of
for the product with the
landing page products
selected id (p-1)
Adding Routing
React App
React Apps are SPAs!
Solution: React Router
/ /products /products/p-1
Landing Page Products Page Product Details Page
Loads & displays details
A generic (marketing) Loads & displays a list of
for the product with the
landing page products
selected id (p-1)
