How to Convert any HTML website to React JS
---------------------------------------------------------------
https://www.youtube.com/watch?v=NSyCRfUzMb0
https://www.youtube.com/playlist?list=PLXIf5ibIbJuz_e3m6M2WMKrLUFIY2y23A
When (start) Create first React JS program need to install some software
1- node js download & install (nodejs.org)
2- Visual studio editor download & install
3- set location where want to create project eg-> D drive:/ -> Create folder->reactsample (go to under folder and press shift + right click mouse= open powershell windo here)-> selecting path-> and just write cmd and press enter
4- and write react app creation type command->npx create-react-app firstapp
5- selecting path-> and just write cmd and press enter-> type command->code space dot(code .)-> then open all project folders & files in visual studio
6- now go to terminal-> new terminal and type here-> npm start -> now start development server -> default url localhost:3000
7- now go to FirstApp->src->App.js and edit code after the logo to check code is working
8- go PowerShell type->go to project folder-> cd my-app(folder name)
go PowerShell run project->npm start
go run the project using vs code-> view-> Terminal
Local - http://localhost:3000
On Your Network - http://192.168.1.10:3000
Points covered :
- Download Html website template
- Create React application from create-react-app
- Add all folders from html website template to react project
- Add Html code into reactjs app
- Correct all comments , Images , In put fields , Hr , Br tags.
- Finally run the reactjs app.
***************************************************************
React First demo App (How to Setup ReactJS Project using CDN Links)
------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>React Demo</title>
<meta charset="UTF-8">
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!--<script src="assests/babel.min.js"></script>-->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!--<script src="assests/react.development.js"></script>-->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!--<script src="assests/react-dom.development.js"></script>-->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
<h1> Hello React JS Demo</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
*****************************************************
REACT TRANING
https://onedrive.live.com/redir?resid=288165385EEB6B14%21131&authkey=%21AL98gGTAABIAWnI&page=View&wd=target%28React.one%7C6be36bff-da06-4846-943f-b37ed1804c7e%2FReact%20Notes%7C512a80bf-da2f-466b-bf60-b955f483e32f%2F%29&wdorigin=NavigationUrl
******************************************
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Web Components aims to solve such problems — it consists of three main technologies
1. Custom elements- A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
2. Shadow DOM- A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
3. HTML templates The template and slot elements enable you to write markup templates that are not displayed on the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
-------------------------------------------------------------------------------
Create New React Component
------------------------------
Step 1- Go to project folder -> my-firstapp-> src
Step 2- under src folder create Lalit.js component same as App.js
-----lalit.js-------
import './App.css';
function Lalit() {
return (
<div className="Lalit">
<header className="Lalit-header">
<h1>React Heading lalit </h1>
<p>React testing description</p>
</header>
</div>
);
}
export default Lalit;
-------------------------------------
Step 3- go to index.js and import component
import Lalit from './Lalit';
and call component syntax
<Lalit />
********************************************
