• What - React is a very popular JS library
  • It creates faster better websites with improved performance
  • Allows single page apps as opposed to multi-page apps
  • Better performance, Virtual DOM, Support packages
  • For example - installed "Error Lens","Simple React" and "ES7 + React extensions in VSCode built specially for react"
• JSX = Javascript XML, it is a specialized HTML for this library
• How to React
  • Create a project -> npx create-react-app projectName
  • src->Components contains building blocks of each page. Components are .js files
  • When we create a js file, we add HTML code in a javascript function
  • Create javascript function by typing shortcut - "rfce" and enter
  • When pasting HTML file in return() append (<>) to have multi line returns
  • JSX is strict, tags like img, br need to be closed with a "/"
  • Comments need to JS comments and not HTML comments
  • CSS needs to be imported on the top of the js file - import './Home.css'
  • images need to be imported too import minerva from '../Images/minerva.png', minerva being the variable name
  • img tag in HTML should be changed as follows - <img src={menCollection} alt=""/>
• Project Structure
  • Project structure here
  

React Router

App()
{ return(
</>
< BrowserRouter >
<Routes>
<Route>
</Routes>
/*We can have many Routes*/
/*Many routes enable shared routes and nested routes*/
</BrowserRouter>
</>
) }

Where in our project did we use react router -
* For links/ url paths and nested url paths
* Used outlet for shared paths
* Used Link (in navbar) for better navigation

Why react Router - Link
How to react Route - Video
Reading - Link