- JavaScript library for building UI.
- React or React JS
- React is used in building UI for SPA. [Single Page Application]
- React is used in PWA [Progressive Web Application] - Mobile
- PWA are built by using React and React Native [iOS, Android].
Features of React
- Virtual DOM
- Modular
- Component Based
- AOT [JIT]
Using React in Exisiting Web Application
--------------------------------------------------------
1. You can implement react in any page by using "CDN" links
2. You can implement react in any proejct by downloading library.
3. React in any page requires following libraries
a) React Core Library
b) React DOM Library
c) Babel Library
- React Core library enables react in page.
- React DOM library handle Virtual DOM.
- Babel library is compiler for JavaScript in react.
Ex: CDN Links
https://reactjs.org/docs/cdn-links.html => react , react-dom
https://babeljs.io/docs/en/babel-standalone => babel
<head>
<script crossorigin src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
index.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>Document</title>
<script crossorigin src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render("Hello ! from React");
</script>
</head>
<body>
<h1>React-Web-Application Home</h1>
<div id="container"></div>
</body>
</html>
React upto 17
<script type="text/babel">
ReactDOM.render("Welcome to React", document.getElementById("container"));
</script>
React 18+
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("container"));
root.render("Hello ! from React");
</script>