Scribd
Upload
61 views

28slides React Crash Course

Uploaded by

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

28slides React Crash Course

Uploaded by

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

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)

You might also like