Web Technologies Overview
1. Basics of WWW (World Wide Web)
The WWW is a system of interlinked hypertext documents accessed via the internet. Users
can view web pages containing text, images, videos, and other multimedia through web
browsers.
- **URL (Uniform Resource Locator):** Address of a web resource.
- **HTTP (HyperText Transfer Protocol):** Communication protocol.
- **HTML (HyperText Markup Language):** Standard language for web pages.
2. HTTP Protocol Methods and Headers
- **HTTP Methods:** Define the action to be performed on resources:
- `GET`: Retrieve data.
- `POST`: Send data to a server.
- `PUT`: Update a resource.
- `DELETE`: Remove a resource.
- `HEAD`, `OPTIONS`, `PATCH`, etc., serve specific purposes.
- **HTTP Headers:** Provide metadata about the request or response.
- **Request Headers:** `Host`, `User-Agent`, `Accept`, `Authorization`.
- **Response Headers:** `Content-Type`, `Set-Cookie`, `Cache-Control`, `Content-Length`.
3. HTTP Request and Response
- **HTTP Request:** Sent by the client to request resources. Includes a method, URL,
headers, and optional body (for `POST`, `PUT`).
- **HTTP Response:** Sent by the server with the requested resource or error message.
Includes a status code (e.g., `200 OK`, `404 Not Found`), headers, and a body (optional).
4. Architecture of Web Browser
Web browsers are client-side applications designed to fetch, render, and display web
content.
- **User Interface:** Toolbar, address bar, etc.
- **Browser Engine:** Manages interactions between UI and rendering engine.
- **Rendering Engine:** Parses HTML, CSS, and displays content.
- **Networking:** Handles HTTP requests and responses.
- **JavaScript Engine:** Executes JavaScript code.
- **Data Storage:** Local storage for cookies, cache, etc.
5. Web Server Installation and Configuration
- **Web Server:** Software that hosts websites and delivers content (e.g., Apache, Nginx).
- **Installation:**
1. Download server software (e.g., Apache, Nginx).
2. Install using package managers (`apt`, `yum`) or binaries.
- **Configuration:**
- Edit configuration files (`httpd.conf`, `nginx.conf`).
- Set document root, server name, and port.
- Enable security features (SSL, firewalls).
6. Web Security
Protecting websites and users from threats like:
- **Common vulnerabilities:**
- Cross-Site Scripting (XSS).
- SQL Injection.
- CSRF (Cross-Site Request Forgery).
- **Practices:**
- Use HTTPS for encrypted communication.
- Sanitize user inputs.
- Regularly update software.
7. CORS (Cross-Origin Resource Sharing)
- **CORS:** Mechanism to allow or restrict resource sharing between different origins.
- **Why needed?** By default, browsers block requests from one origin to another for
security.
- **Implementation:** Controlled using HTTP headers like `Access-Control-Allow-Origin`.
8. Understanding SEO (Search Engine Optimization)
SEO improves the visibility of web pages on search engines.
- **On-Page SEO:** Optimizing content, title tags, meta descriptions, and URL structure.
- **Off-Page SEO:** Building backlinks and increasing site authority.
- **Technical SEO:** Enhancing site speed, mobile responsiveness, and crawlability.
## HTML & CSS Overview
### **HTML**
#### **1. HTML Page Structure**
- HTML pages are divided into two main sections: head and body.
- The **head** contains metadata, such as the title, links to external resources, and meta
tags.
- The **body** contains the visible content displayed on the browser.
- Proper structure ensures the webpage is well-organized and functional.
**Example:**
```html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a sample HTML page.</p>
</body>
</html>
```
#### **2. Formatting Tags in HTML**
- Formatting tags are used to style text elements for better readability and emphasis.
- `<b>` for bold text.
- `<i>` for italicized text.
- `<u>` for underlined text.
- `<mark>` for highlighting text.
**Example:**
```html
<p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <mark>Highlighted</mark> text.</p>
```
#### **3. Tables**
- Tables organize data in rows and columns.
- `<table>`: Main table tag.
- `<tr>`: Defines a row.
- `<td>`: Defines a cell.
- `<th>`: Defines a header cell.
- Common attributes include `border`, `cellpadding`, and `cellspacing`.
**Example:**
```html
<table border=”1”>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
```
#### **4. Links**
- Links enable navigation between webpages or resources.
- `<a>`: Anchor tag for hyperlinks.
- `href`: Attribute specifying the URL of the linked resource.
**Example:**
```html
<a href=https://example.com>Visit Example</a>
```
#### **5. Images**
- Images enhance the visual aspect of a webpage.
- `<img>`: Tag to display images.
- `src`: Path to the image file.
- `alt`: Alternative text for accessibility.
**Example:**
```html
<img src=”image.jpg” alt=”Sample Image” width=”300”>
```
#### **6. Meta Tags**
- Meta tags provide metadata about the HTML document.
- `description`: Summary of the webpage.
- `keywords`: Relevant keywords for SEO.
- `author`: Information about the creator of the document.
**Example:**
```html
<meta name=”description” content=”Learn about HTML and CSS”>
<meta name=”keywords” content=”HTML, CSS, web development”>
<meta name=”author” content=”John Doe”>
```
#### **7. Frames**
- Frames divide a webpage into multiple sections, each displaying a different document.
- `<frameset>`: Defines a set of frames.
- `<frame>`: Specifies the content of each frame.
- Note: Frames are deprecated in modern web development.
**Example:**
```html
<frameset cols=”50%,50%”>
<frame src=”page1.html”>
<frame src=”page2.html”>
</frameset>
```
#### **8. HTML Form Tags**
- Forms collect user input and send it to the server.
- `<form>`: Container for input elements.
- `<input>`: Collects text, passwords, etc.
- `<textarea>`: Multi-line text input.
- `<select>`: Dropdown selection.
**Example:**
```html
<form action=”/submit” method=”post”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<input type=”submit” value=”Submit”>
</form>
```
#### **9. Media**
- HTML allows embedding multimedia elements like audio and video.
- `<audio>`: Embeds audio content.
- `<video>`: Embeds video content.
**Example:**
```html
<audio controls>
<source src=”audio.mp3” type=”audio/mpeg”>
</audio>
<video controls width=”400”>
<source src=”video.mp4” type=”video/mp4”>
</video>
```
#### **10. APIs**
- APIs enable dynamic features like geolocation or third-party integrations.
**Example:**
```html
<script>
Navigator.geolocation.getCurrentPosition(position => {
Console.log(“Latitude:”, position.coords.latitude);
});
</script>
```
#### **11. HTML5 Tags in Relation to Validations and SEO**
- **Form Validations:**
- Attributes like `required`, `pattern`, and `type` validate user input directly in the browser.
**Example:**
```html
<input type=”email” required>
```
- **Semantic Tags for SEO:**
- Tags like `<header>`, `<article>`, and `<section>` enhance the structure and improve SEO
rankings.
**Example:**
```html
<header>
<h1>Website Title</h1>
</header>
```
### **CSS**
#### **1. Need for CSS**
- CSS separates content from presentation, making webpages easier to style and maintain.
- Enhances design consistency across multiple pages.
#### **2. Basic Syntax and Structure**
- CSS consists of selectors and declarations.
- Selectors: Target HTML elements.
- Declarations: Define styling properties and values.
**Example:**
```css
Selector {
Property: value;
Body {
Background-color: lightblue;
Color: black;
```
#### **3. Backgrounds**
- Backgrounds can be styled with colors, images, or gradients.
**Example:**
```css
Body {
Background-image: url(‘bg.jpg’);
Background-repeat: no-repeat;
Background-size: cover;
}
```
#### **4. Colors and Properties**
- CSS defines colors using names, hex codes, or RGB values.
**Example:**
```css
H1 {
Color: red;
Background-color: yellow;
```
#### **5. Manipulating Texts**
- CSS provides control over text alignment, transformation, and spacing.
**Example:**
```css
P{
Text-align: center;
Text-transform: uppercase;
```
#### **6. Fonts**
- Fonts are styled using properties like `font-family` and `font-size`.
**Example:**
```css
H1 {
Font-family: Arial, sans-serif;
Font-size: 24px;
```
#### **7. Borders and Boxes**
- Borders outline elements, while box-shadow adds depth.
**Example:**
```css
Div {
Border: 2px solid black;
Border-radius: 10px;
Box-shadow: 5px 5px 10px gray;
```
#### **8. Margins and Padding**
- Margins create space outside elements, while padding creates space inside their
borders.
**Example:**
```css
Div {
Margin: 10px;
Padding: 20px;
```
#### **9. Lists**
- CSS styles unordered, ordered, and custom lists.
**Example:**
```css
Ul {
List-style-type: square;
```
#### **10. CSS2**
- CSS2 introduced advanced features like media queries and pseudo-classes.
**Example:**
```css
A:hover {
Color: blue;
@media (max-width: 600px) {
Body {
Background-color: lightgray;
```
#### **11. Additional CSS Features**
- **Flexbox:**
- Align and distribute items efficiently.
**Example:**
```css
Div {
Display
## HTML & CSS Overview: Advanced CSS Features
### **CSS3**
#### **1. CSS3 Features**
- Introduced new styling capabilities, such as rounded corners, shadows, animations,
transitions, and flexible layouts.
- Enhanced interactivity and visual appeal without relying on JavaScript.
- Introduced modules like Flexbox, Grid, and Media Queries for advanced layouts.
- Added advanced selectors for better element targeting and management.
- Improved support for web fonts, making typography more dynamic and visually
appealing.
**Properties:**
- `border-radius`: Defines rounded corners.
- `box-shadow`: Adds shadow effects.
- `transition`: Creates smooth transitions between property changes.
**Example:** Rounded corners and shadows using CSS3:
```css
Div {
Border-radius: 10px;
Box-shadow: 2px 2px 10px gray;
```
#### **2. Animations**
- CSS animations enable smooth transitions between styles without JavaScript.
- Keyframes define the stages of the animation.
- Properties like `animation-duration`, `animation-timing-function`, and `animation-delay`
offer control over animations.
- Supports chaining multiple animations for complex effects.
**Properties:**
- `@keyframes`: Specifies the animation.
- `animation-name`: Names the animation.
- `animation-duration`: Defines the duration.
- `animation-iteration-count`: Sets the number of times the animation repeats.
**Example:**
```css
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
Div {
Animation: move 2s infinite;
```
#### **3. Tooltips**
- Tooltips provide additional information on hover using `::after` or `title` attributes.
- Custom tooltips can be styled dynamically for enhanced user experience.
- Positioning and appearance are fully customizable.
**Properties:**
- `content`: Sets tooltip text.
- `position`: Positions the tooltip.
- `background-color`: Defines tooltip background.
**Example:** Custom Tooltip:
```css
Div {
Position: relative;
Display: inline-block;
Div::after {
Content: “This is a tooltip”;
Position: absolute;
Background-color: black;
Color: white;
Padding: 5px;
Border-radius: 5px;
Top: 100%;
Left: 50%;
Transform: translateX(-50%);
Display: none;
}
Div:hover::after {
Display: block;
```
#### **4. Style Images**
- CSS styles enhance image appearance with borders, filters, and responsive behavior.
- Filters like `grayscale`, `sepia`, `blur`, and `drop-shadow` add creative effects.
- Responsive images can adapt to different screen sizes using relative units.
**Properties:**
- `filter`: Applies effects like grayscale and blur.
- `border`: Adds borders around the image.
- `width` and `height`: Adjust image dimensions.
**Example:**
```css
Img {
Border: 2px solid black;
Filter: grayscale(50%);
Width: 100%;
Height: auto;
}
```
#### **5. CSS Variables**
- Variables store reusable values, improving maintainability and consistency.
- They are defined in a `:root` selector and can be reused throughout the CSS.
- Support fallback values if the variable is not defined.
**Properties:**
- `--variable-name`: Declares a CSS variable.
- `var()`: Retrieves the variable value.
**Example:**
```css
:root {
--main-color: #3498db;
--font-size: 16px;
P{
Color: var(--main-color);
Font-size: var(--font-size);
```
#### **6. Flexbox**
- A CSS layout model for arranging items along a flexible row or column.
- Simplifies alignment, spacing, and responsiveness.
- Offers properties like `justify-content`, `align-items`, and `flex-wrap` for layout control.
- Allows dynamic rearrangement of elements based on screen size.
**Properties:**
- `display: flex`: Activates Flexbox.
- `justify-content`: Aligns items horizontally.
- `align-items`: Aligns items vertically.
**Example:**
```css
.container {
Display: flex;
Justify-content: center;
Align-items: center;
```
#### **7. Media Queries**
- Enable responsive design by applying styles based on device characteristics like screen
size.
- Common breakpoints include 600px, 768px, and 1024px for small, medium, and large
devices.
- Supports multiple conditions, such as screen resolution and orientation.
**Properties:**
- `@media`: Defines media queries.
- Conditions: `(max-width)`, `(min-width)`, and `(orientation)`.
**Example:**
```css
@media (max-width: 768px) {
Body {
Background-color: lightgray;
```
#### **8. Wildcard Selectors**
- Select elements based on partial attribute values:
- `*`: Matches any element.
- `^`: Matches attributes starting with a specific value.
- `$`: Matches attributes ending with a specific value.
- Useful for dynamic styling in forms or links.
**Properties:**
- `[attribute^=”value”]`: Starts with.
- `[attribute$=”value”]`: Ends with.
- `[attribute*=”value”]`: Contains value.
**Example:**
```css
A[href^=”https”] {
Color: green;
A[href$=”.pdf”] {
Text-decoration: underline;
```
#### **9. Working with Gradients**
- Gradients create smooth transitions between colors.
- Linear and radial gradients are common types.
- They can be used for backgrounds, buttons, and borders.
- CSS3 allows defining multiple gradient stops for complex patterns.
**Properties:**
- `background`: Defines the gradient type.
- `linear-gradient`: Creates a linear gradient.
- `radial-gradient`: Creates a radial gradient.
**Example:**
```css
Div {
Background: linear-gradient(to right, red, yellow);
```
#### **10. Pseudo-Classes**
- Apply styles to elements based on their state or position.
- Common pseudo-classes include `:hover`, `:nth-child`, and `:focus`.
- Combine pseudo-classes for advanced effects.
**Properties:**
- `:hover`: Applies styles on hover.
- `:nth-child()`: Targets specific children.
- `:focus`: Styles active form elements.
**Example:**
```css
A:hover {
Color: blue;
Input:focus {
Border-color: green;
```
#### **11. Pseudo-Elements**
- Style specific parts of an element, like the first line or content added before/after.
- Examples include `::before`, `::after`, and `::first-line`.
- Useful for adding decorative elements without altering HTML.
**Properties:**
- `::before`: Adds content before an element.
- `::after`: Adds content after an element.
- `::first-line`: Styles the first line.
**Example:**
```css
P::first-line {
Font-weight: bold;
H1::before {
Content: “★ “;
Color: gold;
```
#### **12. Basics of Frameworks (e.g., Bootstrap)**
- Frameworks like Bootstrap provide pre-designed components and a responsive grid
system to speed up development.
- Includes utilities for typography, forms, buttons, navigation, and modals.
- Enables rapid prototyping and consistent design across projects.
**Properties:**
- `class=”row”`: Defines a row in the grid.
- `class=”col-md-*”`: Sets column width.
- `btn btn-primary`: Predefined button style.
**Example:** Using Bootstrap’s grid system:
```html
<div class=”row”>
<div class=”col-md-6”>Column 1</div>
<div class=”col-md-6”>Column 2</div>
</div>
```
#### **13. Responsive Web Design and Media Queries**
- Focuses on creating adaptable layouts for various devices and screen sizes.
- Media queries are key to implementing responsive design.
- Uses flexible grids, fluid images, and scalable typography.
- Leverages frameworks like Bootstrap for efficient design.
**Properties:**
- `@media`: Applies styles for specific devices.
- `max-width`: Restricts style to devices below a width.
- `orientation`: Targets landscape or portrait modes.
**Example:**
```css
@media (max-width: 600px) {
Body {
Font-size: 12px;
```
### JavaScript Overview with Properties, Information, and Examples
#### **1. JavaScript Syntax**
- JavaScript syntax defines the set of rules for writing valid JavaScript code.
- JavaScript is case-sensitive and uses semicolons (`;`) to terminate statements.
- Supports various data types (strings, numbers, booleans, arrays, objects), control
structures, and object-oriented programming.
- Uses functions and closures to provide modular code.
**Example:**
```javascript
Let message = “Hello, World!”;
Console.log(message);
```
#### **2. Types of JavaScript**
- **Client-Side JavaScript**: Runs on the browser, enabling interactive features like form
validation, dynamic content updates, and DOM manipulation.
- **Server-Side JavaScript**: Runs on servers using platforms like Node.js for backend
processing, database interaction, and APIs.
#### **3. Variables**
- Variables store data values and can be declared using `var`, `let`, or `const`.
- `let` allows block-scoped variables, while `const` defines constants that cannot be
reassigned.
- Dynamic typing allows variables to hold different data types during execution.
**Example:**
```javascript
Let age = 25;
Const PI = 3.14159;
Age = 30; // Valid because “age” is declared with “let”
// PI = 3.14; // Error because “PI” is a constant
```
#### **4. Arrays**
- Arrays store multiple values in a single variable and support ordered data.
- Properties: `length`, `push()`, `pop()`, `shift()`, `unshift()`, `splice()`.
- Methods for iteration: `forEach()`, `map()`, `filter()`, `reduce()`.
**Example:**
```javascript
Let fruits = [“Apple”, “Banana”, “Cherry”];
Fruits.push(“Mango”); // Adds Mango to the array
Console.log(fruits.length); // Outputs: 4
```
#### **5. Functions**
- Functions perform tasks or calculate values.
- Can accept parameters, have default values, and return results.
- Arrow functions (`=>`) provide a shorthand syntax for defining functions.
**Example:**
```javascript
Function add(a, b) {
Return a + b;
Console.log(add(3, 4)); // Outputs: 7
// Arrow function
Const multiply = (a, b) => a * b;
Console.log(multiply(2, 5)); // Outputs: 10
```
#### **6. Conditions**
- JavaScript supports `if`, `else if`, `else`, and `switch` for conditional logic.
- Conditional (ternary) operator: `condition ? expr1 : expr2`.
**Example:**
```javascript
Let score = 75;
If (score > 50) {
Console.log(“Pass”);
} else {
Console.log(“Fail”);
// Using ternary operator
Console.log(score > 50 ? “Pass” : “Fail”);
```
#### **7. Loops**
- Loops repeat code blocks: `for`, `while`, `do-while`, and `forEach` for arrays.
- `break` exits the loop, while `continue` skips to the next iteration.
**Example:**
```javascript
For (let I = 1; I <= 5; i++) {
Console.log(i);
```
#### **8. Popup Boxes**
- **Alert Box**: Displays a message.
- **Confirm Box**: Asks for confirmation.
- **Prompt Box**: Takes input from the user.
**Example:**
```javascript
Alert(“This is an alert box!”);
Let userResponse = confirm(“Do you agree?”);
Let userName = prompt(“Enter your name:”);
```
#### **9. JavaScript Objects and DOM**
- Objects represent real-world entities with properties and methods.
- DOM (Document Object Model) manipulates HTML elements dynamically, allowing you to
traverse and modify the document tree.
- Common properties: `innerHTML`, `style`, `attributes`.
**Example:**
```javascript
Let person = {
Name: “John”,
Age: 30,
Greet: function() {
Console.log(“Hello, “ + this.name);
};
Person.greet();
// DOM manipulation example
Let element = document.getElementById(“demo”);
Element.innerHTML = “Welcome!”;
```
#### **10. JavaScript Inbuilt Functions**
- Common functions: `parseInt()`, `parseFloat()`, `isNaN()`, `JSON.stringify()`,
`JSON.parse()`, `setTimeout()`, `setInterval()`.
**Example:**
```javascript
Let num = “25”;
Console.log(parseInt(num)); // Converts string to number
setTimeout(() => console.log(“Hello after 2 seconds”), 2000);
```
#### **11. JavaScript Validations**
- Validates form inputs for required fields, formats, and length.
- Prevents submission of invalid data.
**Example:**
```javascript
Function validate() {
Let email = document.getElementById(“email”).value;
If (email === “”) {
Alert(“Email is required!”);
Return false;
Return true;
```
#### **12. Regular Expressions**
- Patterns for matching strings, validating formats, and searching/replacing text.
**Example:**
```javascript
Let pattern = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
Console.log(pattern.test([email protected])); // Outputs: true
```
#### **13. Event Handling**
- Allows handling user actions like clicks, keypresses, mouse movements, etc.
- Event properties: `target`, `type`, `currentTarget`.
**Example:**
```javascript
Document.getElementById(“btn”).addEventListener(“click”, function(event) {
Console.log(“Button clicked!”);
Console.log(event.target.id); // Outputs the ID of the clicked element
});
```
#### **14. Callbacks**
- A function passed as an argument to another function, executed after an operation.
**Example:**
```javascript
Function greet(callback) {
Callback(“Hello!”);
Greet(function(message) {
Console.log(message);
});
```
#### **15. Function as Arguments**
- Functions can be arguments for higher-order functions.
**Example:**
```javascript
Function square(num) {
Return num * num;
Function calculate(func, value) {
Return func(value);
Console.log(calculate(square, 5)); // Outputs: 25
```
#### **16. Object Concepts**
- Objects in JavaScript have properties (key-value pairs) and methods (functions).
- Supports dynamic property addition, inheritance using prototypes, and encapsulation.
**Example:**
```javascript
Let car = {
Brand: “Toyota”,
Start: function() {
Console.log(“Car started”);
};
Car.start();
```
#### **17. JSON (JavaScript Object Notation)**
- Lightweight data interchange format.
- Methods: `JSON.stringify()`, `JSON.parse()`.
- Supports nesting of objects and arrays.
**Example:**
```javascript
Let obj = { name: “John”, age: 30 };
Let jsonString = JSON.stringify(obj);
Console.log(jsonString); // Converts object to JSON string
Let parsedObj = JSON.parse(jsonString);
Console.log(parsedObj.name); // Outputs: John
```
### ReactJS Overview with Properties, Information, and Examples
#### **1. ReactJS Introduction**
- ReactJS is an open-source JavaScript library developed by Facebook for building user
interfaces, particularly single-page applications (SPAs).
- It follows a component-based architecture, enabling reusable UI components.
- React uses a virtual DOM for efficient updates and rendering.
**Key Features:**
- **Declarative Syntax**: Describes what the UI should look like.
- **Component-Based Architecture**: Encourages reusable and maintainable code.
- **Virtual DOM**: Optimizes DOM manipulation.
- **One-Way Data Binding**: Ensures data flows in a single direction.
- **JSX (JavaScript XML)**: Combines HTML-like syntax with JavaScript logic.
**Example:**
```jsx
Import React from ‘react’;
Import ReactDOM from ‘react-dom’;
Function App() {
Return <h1>Hello, React!</h1>;
ReactDOM.render(<App />, document.getElementById(‘root’));
```
#### **2. React Installation (Using create-react-app)**
- **Prerequisites**: Install Node.js and npm (Node Package Manager).
- Run the following commands to set up a React application:
```bash
Npx create-react-app my-app
Cd my-app
Npm start
```
- The above commands create a boilerplate React project and launch a development
server.
#### **3. React Features**
- **JSX**: Simplifies writing React components by allowing HTML-like syntax.
- **Components**: Modular and reusable pieces of the UI.
- **State and Props**: Manage dynamic data and communicate between components.
- **Hooks**: Functions like `useState` and `useEffect` for managing state and lifecycle in
functional components.
- **Context API**: Shares global data across components without prop drilling.
#### **4. Pros & Cons**
- **Pros:**
- Component-based architecture promotes reusability and modularity.
- Efficient rendering using the virtual DOM.
- Large community and ecosystem.
- Rich toolset and developer experience.
- **Cons:**
- Steep learning curve for beginners.
- Requires third-party libraries for full functionality (e.g., routing, state management).
- Frequent updates may cause compatibility issues.
#### **5. ReactJS vs AngularJS**
- **ReactJS**:
- Library for UI components.
- One-way data binding.
- Virtual DOM for rendering efficiency.
- **AngularJS**:
- Full-fledged MVC framework.
- Two-way data binding.
- Real DOM updates, which may impact performance.
#### **6. ReactJS vs React Native**
- **ReactJS**: Used for web applications.
- **React Native**: Used for building mobile applications with native performance using
React principles.
#### **7. React vs Vue**
- **React**:
- Focuses on UI development.
- Requires third-party libraries for routing and state management.
- **Vue**:
- Integrated framework with built-in solutions for routing and state management.
- Simpler to learn and use.
#### **8. JSX (JavaScript XML)**
- JSX combines HTML-like syntax with JavaScript logic.
- Allows embedding expressions in curly braces (`{}`).
**Example:**
```jsx
Const element = <h1>Hello, {name}!</h1>;
```
#### **9. React Components**
- **Functional Components**: Simpler and primarily use hooks.
- **Class Components**: Older syntax using lifecycle methods.
- Components can accept `props` to make them reusable.
**Example:**
```jsx
Function Greeting(props) {
Return <h1>Hello, {props.name}!</h1>;
```
#### **10. Life Cycle**
- React components go through several lifecycle stages:
- **Mounting**: Component is created and inserted into the DOM.
- **Updating**: Component re-renders due to state or prop changes.
- **Unmounting**: Component is removed from the DOM.
**Lifecycle Methods:**
- `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`.
#### **11. React Forms**
- React forms handle user input using controlled components.
- Controlled components link form elements to React state.
**Example:**
```jsx
Function Form() {
Const [name, setName] = React.useState(“”);
Const handleSubmit = € => {
e.preventDefault();
alert(`Hello, ${name}!`);
};
Return (
<form onSubmit={handleSubmit}>
<input type=”text” value={name} onChange={€ => setName(e.target.value)} />
<button type=”submit”>Submit</button>
</form>
);
```
#### **12. React Events**
- React handles events using camelCase syntax (`onClick`, `onChange`).
- Event handlers can access event properties using synthetic events.
**Example:**
```jsx
Function ClickButton() {
Const handleClick = () => {
Console.log(“Button clicked!”);
};
Return <button onClick={handleClick}>Click Me</button>;
```
