What is JSX?

It is stands for JavaScript XML. Combination of JS and XML

Difference b/t XML and HTML:

• in 'HTML' we will be using an attribute as "class",

  in "XML" we will be using an attribute as "className".

• all the events in 'html' we use in lowercase

  ex: onclick, onmouseover, onsubmit, etc.

  all the events in the 'XML' we use lower camelCase

  ex: onClick, onSubmit, etc.

• in HTML we can write two different tags:

    <h1>Heading</h1>
    <p>paragraph</p>
  

  in XML we have to wrap up all the context into one container:

    <div>
        <h1>Heading</h1>
        <p>paragraph</p>
    </div>React project Set Up:
  

React Project Setup:

Delete the default src folder from the project which you have created.

After deleting the default src we have to create our own src in which we have to maintain 2 files index.js and App.jsx.

index.js:

• it is considered as a root files of the project.

• we are using this file to create root b/w the index.html and index.js

App.jsx:

• it is the component where we will be writing our code to execute.

index.js:

import React from 'react';
import App from './App';

const container = document.getElementById('root');
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.jsx:

import React from 'react'

const App = () => {
  return (
    <div>
        <h1>Hello ReactJs</h1>
    </div>
  )
}

export default App

• After installation setup we have to create a folder inside src and that folder name will be "Components".

• After creating component folder "App" will be kept as parent component.

• whatever the components are create inside the folder "Components" will be considered as child component.

  ex: creating a child component naming as "Nav.jsx"

  Nav.jsx:

•   const Nav=()=>{
        return(
            <div>
                <h1>Navbar</h1>
            </div>
    )}
    export default Nav
  

  import the child component which is "Nav.jsx" inside parent component which is "App.jsx".

• App.jsx:

•   import Nav from "./Components/Nav"
    const App=()=>{
        return(
            <div>
                <Nav/>
            </div>
    )}
    export default App
  

Type of components:

1. Function based component

2. Class Based Component

Difference b/w FBC and CBC: