React
Uploaded by
musicpeymanReact
Uploaded by
musicpeymanReact!
React creates a VIRTUAL DOM in memory.
Instead of manipulating the browser's DOM directly, React creates a virtual
DOM in memory, where it does all the necessary manipulating, before
making the changes in the browser DOM.
React only changes what needs to be changed!
Setting up a React Environment
make sure you have [Link] installed
node -v
To install the latest version, from your project folder run the following from
the terminal:
npm i react@latest react-dom@latest
We will use the Vite build tool in this tutorial:
npm install -g create-vite
Run this command to create a React application named my-react-app:
npm create vite@latest my-react-app -- --template react
Navigate to your new react application directory:
cd my-react-app
Run this command to install dependencies:
npm install
Run this command to run the React application my-react-app:
npm run dev
Inside the src folder there is a file called [Link]
React Render HTML
React renders HTML to the web page via a container, and a function
called createRoot().
React uses a container to render HTML in a web page.
Typically, this container is a <div id="root"></div> element in
the [Link] file.
You should have a file called [Link] in the root directory of your project:
<!doctype html>
<html lang="en">
<body>
<div id="root"></div>
<script type="module" src="/src/[Link]"></script>
</body>
</html>
The createRoot Function
The createRoot function is located in the [Link] file in the src folder, and is a
built-in function that is used to create a root node for a React application.
JSX allows you to write HTML tags inside the JavaScript code
[Link]
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './[Link]'
import App from './[Link]'
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
createRoot([Link]('root')).render(
<StrictMode>
<App />
</StrictMode>
The Root Node
The root node is the HTML element where you want to display the result.
[Link] → [Link] → [Link]
[Link]
React JSX
JSX stands for JavaScript XML.
JSX allows us to write HTML elements in JavaScript and place them in the
DOM without any createElement() and/or appendChild() methods.
With JSX you can write expressions inside curly braces { }.
The HTML code must be wrapped in ONE top level element.
use a "fragment" to wrap multiple lines. This will prevent unnecessarily
adding extra nodes to the DOM.
A fragment looks like an empty HTML tag: <></>.
Use attribute className instead of class in JSX
Comments in JSX are written with {/* */}
Insert variables or function or Object Properties in JSX by wrapping it in curly
braces { }.
//[Link]
// 1. Create a root
import { createRoot } from "react-dom/client"
const root = createRoot([Link]('root'))
[Link](htmlCode)