ReactJS(React):
-------
*ReactJS (React) is a popular JavaScript library for building user interfaces,
*Especially for single-page web applications (SPAs).
*It was developed by Facebook(now Meta)Software Engineer Jordan Walke.
React.JS History:-
-----------------
*Initial release to the Public (version 0.3.0) was in July 2013.
*Latest version of React.JS is 19.2.
*React.JS was first used in 2011 for Facebook's Newsfeed feature.
Features:-
--------
*React is a front-end JavaScript library.
*React was developed by the Facebook
*React is also known as React.js or ReactJS.
*React is a tool for building UI components.
*Reusable UI Components
Advantages:
----------
*Fast and efficient UI updates
*Reusable components
*Easy to maintain large applications
*Large developer community
*Rich ecosystem of libraries
*Suitable for responsive and interactive web applications
ReactJS is commonly used for:
---------------------------
*E-commerce websites
*Social media applications
*Dashboards
*Single-page applications
*Online learning platforms
*Web portals
*Interactive forms and interfaces
*ReactJS helps developers build fast, interactive, and reusable user interfaces using JavaScript components.
How to create ReactJS and Run:-
-----------------------
step1: Install Node.js(select chocolatey(npm(Node Package Manager) ,VSStudio))
step2: (open Command Prompt and check Version)
node -v
npm -v
step2: create a React Project
1. open Command Prompt
2. npm create vite@latest my-react-app
3. Choose:
a. Framework: React
b. Variant: JavaScript
c. Linter: ESLint (javascript code)
4. Then:
a. cd my-react-app
b. npm install
step3: Start React
1. npm run dev
2. You will see something similar to:
Local: http://localhost:5173/
3. Open that address in your browser.
----------------------
(open already existing Reactjs):-
----------------------
Step1: Open command prompt
Step2: dir (check your react project)
Step3 : cd path-to-your-react-project
step4 : npm install
step5 : npm run dev
1. You will see something similar to:
Local: http://localhost:5173/
2. Open that address in your browser.
************************************************
JSX:-
---
*JSX stands for JavaScript XML.
*JSX allows us to write HTML in React.
*JSX makes it easier to write and add HTML in React.
Ex1: (open your project in Vscode)
---
step1 : Open App.jsx and type the following code
-----
App.jsx:-
-------
function App() {
return (
<div>
<marquee><h1>Welcome to My React Program</h1></marquee>
<p>My first React application</p>
</div>
);
}
export default App;
Step2:
-----
main.jsx:-
-------
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
Step3:
-----
index.html:-
----------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Step4: Open that address in your browser.
http://localhost:5173/
----------------------------------------
No comments:
Post a Comment