- Download and Install React and Babel library for your project
>npm install react --save
>npm install react-dom --save
>npm install @babel/standalone --save
- All library files are copied into "node_modules"
- Link the files to your HTML page
react.developement.js
react-dom.development.js
babel.js
Ex: Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/react/umd/react.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/@babel/standalone/babel.js"></script>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render("Welcome to React Home");
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Note: "render()" of virtual DOM can render plain text content [RC Data Type]
or a component.
Component can be a class or a function that renders Layout.
Component Rule
- It can be a function or class
- It must return markup
Syntax:
function Login()
{
return ( <markup> </markup> )
}
- You can render any component into Virtual DOM
root.render(<Login />);
Ex: Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/react/umd/react.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/@babel/standalone/babel.js"></script>
<script type="text/babel">
function Login(){
return (
<div>
<h2>User Login</h2>
<dl>
<dt>User Name</dt>
<dd><input type="text" /></dd>
<dt>Password</dt>
<dd><input type="password"/></dd>
</dl>
<button>Login</button>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Login/>);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/react/umd/react.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/../node_modules/@babel/standalone/babel.js"></script>
<script type="text/babel">
const Login = () => (
<div>
<h2>User Login</h2>
<dl>
<dt>User Name</dt>
<dd><input type="text" /></dd>
<dt>Password</dt>
<dd><input type="password"/></dd>
</dl>
<button>Login</button>
</div>
)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Login></Login>);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Create a new React Application
1. Open any location on your PC in command prompt
E:\>npx create-react-app shopping-react
2. Open your project folder in VS code.
3. Application File System comprises of following files and folder
File / Folder Description
--------------------------------------------------------------------------
node_modules It comprises all library files.
public It comprises of static resources [html, images, text..]
src It comprises of dynamic resources [js, ts, css, scss..]
.gitignore It configures the resources, which are intended not
to include into GIT.
package.json It comprises of project meta data.
package-lock.json It is used by installer to install the packages locally.
readme.md It is help document
- Open Terminal
>npm start
http://localhost:3000