Day 1 : React Basics

Methods of Creating and Running a Project

1. With Framework( Next.js)

   

   npx create-react-app Project_Name

   npm run start

2. Without Framework( through Bundler Like Vite etc)

   npm create vite@latest

   npm install

   npm run dev

   

3. What's inside the App.js and Index.js

   

   -> In index.js react creates its DOM which is ReactDom

   -> and it's rendering the root element

   -> root we can say a div of the index.html

   -> That's why we say that react creates SPA (single page application) in which it renders the app

   -> What is inside the app? Just a simple function returns an HTML tag

   -> So in short we can render the HTML with the help of javascript(which is very beneficial now we have programming capabilities that were not possible in the case of simple HTML)

   

4. Understand the react flow and structure

   1. -> So there's a root that is targeting the HTML page and a render function that is rendering the app or we can say that javascript

      

      -> But wait where's the script tag (we are taking the project created using

      create-react-app cmd)

      -> But still we can see the hello world in the webpage so it means anyhow(maybe internally) index.js is linked with the index.html

      -> This is due to the react-scripts for that let's explore the package.json and page source

      

-> Similarly let's take the case of the project created using Vite

(in this the script tag is explicitly linked to the HTML )

1. Creating Our HTML tags (or App.js)

2. -> first (create-react-app

   -> It's compulsory to capitalize the function name

   

   -> It's compulsory to import the function

   -> Also we can only return one element so we will pack everything inside a div

   

   -> In case of Vite

   -> file should be named as app.jsx

   -> file name should also be in capitalized format