JavaScript library
for building web
user interface
React
https://react.dev/
React UI components
How does React Work?
React Directly in HTML
https://unpkg.com/react@18/umd/react.development.js
https://unpkg.com/react-dom@18/umd/react-dom.development.js
https://unpkg.com/@babel/standalone/babel.min.js
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>
React Getting Started
https://nodejs.org/en/download
Setting up a React Environment
https://create-react-app.dev/docs/getting-started
https://github.com/facebook/create-react-app
move to the my-react-app directory:
create-react-app
create-react-app (cont.)
http://localhost:3000
How to Fix npx Create-react-app error
https://www.youtube.com/watch?v=el6379gVCaU
Modify the React Application
Modify App.js
Index.js in React
React Render HTML
React Render HTML (cont.)
index.html file
Example: Display a paragraph inside an
element with the id of "root"
React JSX
With and Without JSX
React DOM
React DOM (cont.)
https://react.dev/reference/react/hooks
https://react.dev/reference/react/components
https://react.dev/reference/react/apis
React components
Rules of React
JSX rules
React Fragments (<>...</>)
<PostTitle />
<PostBody />
JSX file extensions
JSX syntax
Evaluating JS expressions in JSX
Where to use curly braces { }
https://react.dev/learn/javascript-in-jsx-with-curly-
braces
Using “double curlies”: CSS and other
objects in JSX
Example: inline css styles using {{ }}
