*1. React Components
*

• Components are the building blocks of react app
• Reusable pieces of UI => components classifications
• Class Components
• old method and feels heavy syntax difficult to write or read a code
• Function Components
• modern method and easy method also highly recommended

• Replacing class components and reducing a burden of heavy code they introduced function components

  function Greeting({name}){
  return <h1>Hello,{name}!<h1>;}
  

2. JSX rules

• JSX is a syntax extension lets you write like HTML code in JS

-> Must return a single root element
(able to use only one tag)
-> All tags must be closed
(e.g)

-> Use camelcase for attributes
(e.g) onClick
-> Javascript expressions in curly braces{}
-> NO statement inside JSX
-> Inline style use objects

*3.Folder Structure of REACT
*

• Folder structure is nothing but how we organize for our file looks clean and easy to manage

-> public/

• single html page where our entire react app lives

-> src/

• Every component,pages,image,style files goes in it
• also it is heart of our project

-> pages/

• Each pages has different purpose and different URL

->assets/

• It stores Image,Icons and Fonts that we used for our app

-> styles/

• This folder holds our app css files to decide how our app looks
• style includes app.jsx,app.css and index.js

-> node_modules

• It contains third party library also packages app depends on
• It usually large in size

-> package.json

• It holds Important information about our project

*4.Difference between SPA and MPA
*
=> SPA (Single Page Application)

• SPA loads only one page from server
• React handles everything in browser
• It doesn't reload
• It just swaps content on screen (e.g) Gmail,Facebook

=> MPA (Multiple Page Application)

• MPA loads new HTML page from server everytime you click link
• Each page is a seprate file on server
• Browser fully reloads everytime we click or navigate (e.g) Amazon