Component Based
Architecture
*
Component based Architecture
break out your application into multiple
small parts and it can be composed together at the final stage.
*
Components are reusable
code.so,we can reuse the component anywhere in your application.
Single Page vs Multipage
Application
*
Multipage applications
work in the traditional way where every change,like displaying the data or
submitting data back to the server,renders new pages from the server.
*
Single page application
we only get back single page html file by the server.The Server loads entire
page.
*
Later on , responding
to the each request,only the necessary data is transferred in the form of JSON
files and its rendered inside html elements.so,there is no required to reload
the page
*
React JS doesn’t
refresh the page.
Add React to website within 1
min
*
Without installing node
or npm modules you can add React to your Website within 1 min using the below
script.
<script src=https://unpkg.com/react@18/umd/react.development.js crossorigin></script>
<script src=https://unpkg.com/react-dom@18/umd/react-dom.development.js
crossorigin></script>
Paste the above code in
body tag
File name save as
.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>React Js</title>
</head>
<body>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="a"></div>
<script src="reactjs.js"></script>
</body>
</html>
File name save as
.js
const v="Hello World"
ReactDOM.render(v,document.getElementById('a'))
Open vs code
Open Terminal=>
new terminal
>npx create-react-app
projectname
>cd projectname
>node –version
In windows 7 download node js
16
*
Download
node js 16
*
Extract in c
–node 32
*
Open command
prompt to run
*
Choose your
folder which folder to download your app
>npm
install – - global yarn
>yarn - - version
>yarn
create react-app my-app
>cd
my-app
>yarn
start
No comments:
Post a Comment