Scribd
Upload
9 views32 pages

Introduction to React: Building UIs with JavaScript

Uploaded by

trzong-ming.teoh
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
9 views32 pages

Introduction to React: Building UIs with JavaScript

Uploaded by

trzong-ming.teoh
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

JavaScript library

for building web


user interface
React

[Link]
React UI components
How does React Work?
React Directly in HTML

[Link]
[Link]

[Link]
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
crossorigin></script>
<script src="[Link]
crossorigin></script>
<script src="[Link]
</head>
<body>

<div id="mydiv"></div>

<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}

const container = [Link]('mydiv');


const root = [Link](container);
[Link](<Hello />)
</script>

</body>
</html>
React Getting Started

[Link]
Setting up a React Environment

[Link]
[Link]
move to the my-react-app directory:

create-react-app
create-react-app (cont.)
[Link]
How to Fix npx Create-react-app error

[Link]
Modify the React Application
Modify [Link]
[Link] in React
React Render HTML
React Render HTML (cont.)
[Link] file
Example: Display a paragraph inside an
element with the id of "root"
React JSX
With and Without JSX
React DOM
React DOM (cont.)
[Link]
[Link]
[Link]
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 { }

[Link]
braces
Using “double curlies”: CSS and other
objects in JSX
Example: inline css styles using {{ }}

You might also like