React

1.Component
What is component?

• means function return HTML elements
• javaScript functions that return JSX
• independent and reusable bits of code
• Starts with Capital letters
• in one file, multiple components

why components is used?

• Reusability – use the same UI in many places
• Modularity – split big UI into small parts
• Easy to manage & update
• Clean, organized code

Types of Functional Component
1.Functional component

• syntax: JavaScript Function
• State: useState()
• LifeCycle:useEffect()
• Hooks: supported
• code length: less
• performance:faster
• React Recommendation:Preferred

example

function App(){
   return(
     <div>
       <h1> Hello React </h1>
       <p> This is my first React App </p>
     </div>
  );
}
export default App;

2.Class Component

• syntax: ES6
• State: this.state
• LifeCycle:lifecycle methods
• Hooks: not supported
• code length: more
• performance:slightly slower
• React Recommendation:old

example

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React</h1>
        <p>This is my first React App</p>
      </div>
    );
  }
}

export default App;

2.what is XML?

• Xml means extensible markup language extensible means create your own tags
• is a markup language used to store and transport data in a structured ,readable format.
• Structured – Data is organized in a tree-like hierarchy.
• Platform-independent – Can be used across different systems.

• Text-based – Easy to read and debug.

• user defined tags

• must have closing tags

• case sensitive

• must be well formed (properly nested tags)

• can include attributes

example

<student>
    <name>Priya</name>
    <age>20</age>
    <course>AI & Data Science</course>
</student>

3.what is JS vs JSX?
JavaScript?
JavaScript is a programming language used to add logic, behavior, and interactivity to web pages.

Features

Variables, functions, loops
Conditions (if, switch)
DOM manipulation
Works in browser & server

let name = "Priya";
function greet() {
  return "Hello " + name;
}

JSX (JavaScript XML)
JSX?
JSX is a syntax extension of JavaScript used in React to write HTML-like code inside JavaScript.

JSX is NOT a separate language

Example (JSX)

const element = <h1>Hello Priya</h1>;

Behind the scenes, JSX is converted to JavaScript:

React.createElement("h1", null, "Hello Priya");