DAY 1-REACT- Beginners let's do it together

Hello everyone!

This is pranjal sethi , and i have started learning react , I’m a 3rd year btech student .
I know lil embarassing(or may be a lot) but honestly I have made projects but have directly tried to learn from tut , but this time i actually wanted to learn from root cuz i identified one thing , that these tuts can’t teach you to make your own project cuz the syntax, file str eerything is difficult + i also have to give a react interview so had to study.

So to clear the background, i havent particularly studied js, i am just starting with react , ik not a correct way as react is a library of js but anyways i have started and i’ll be learning in this way only, i’ll try documenting daily about the challenges and what i did so lets gooo, btw I am following hitesh chaudhary , as i thinkthe way he explains just really fits into my mind.

WHAT I KNOW NOW!

I HV WATCHED :-
https://youtu.be/k3KqQvywToE?si=fSJz7KwpIAMelwkk
https://youtu.be/yNbnA5pryMg?si=CzVq-QlXj5onnkts

These 2 lectures gave me a very clear idea about react and its usage, i got to learn a lot from it.
So like many libraries of js, react is one of the js libraries which helps us effiently write us code with ease using components.

→I got to learn that the off react docs is a littke difficult to go through if you are a beginner.

→ I got to know about npx , it is like we download packages and what we need for when we are working on it like during execution , running directly without installing or running globally, while npm is installing them all in our working project which is heavy as it has many files and it takes time, npx runs project executables without needing to reference the node_modules/.bin path.
npx= temporary execution
npm =permanent installation

example:
for react-:
earlier and heavier way: npm create-react-app
newwer and lighter way: npx create-react-app myapp

So react is ui library of js, right which only knows to create components, manage state(we’ll learn ahead), but it has no build tools (bundlers or dev servers) and their job is to make react production fast.

Some most popular build tools asre:
Vite , Parcel; these are lightweight and are used for lightning fast dev servers and rollup production.
for vite we use: npm create vite@latest

→the build file in react is created once using npm run build
→ the normal basic react file is executed by writing : npm run start( start or dev can be checked from package,json)
→in vite react , after creating react app , and chanding directory to that project e need to install node modules as it is not implicitly there like in normal react so
we do, npm i or npm install
then we do, npm run dev

→then we studied react doc andbit of vite doc in the lecture.
→then we created react app using above 2 methods and learned to clean our react code, by removing unnecessary files.
→the starting point is package.json where every configuration about our project is written ,
we learnt about dependencies and dev dependensies, package.json and package.lockjson.
→ in the start we connected our folder to github to track changes to to make our code publically availabe for which we followed a couple of steps after creating a github repo.
I learnt about readme.md, a markdown file which essentially gives the introduction about the project.

in the second leacture we learnt about the common rules of file and rules of creating functions/components in react.
in vite react-:
→ the fucn name is always in capital letters.
→the file name has to hv an extension of jsx if it has html content
→while renderering any component in any file we also need to import it at the top
→The file name must also be in captial letters(a convention but it works even if it is not capital)

React JSX requires returning a single parent element, so we use a wrapper class <div>,but this uncessarily adds a div around so we may also use a fragment that is <> </> within our return statement ,
eg-function App() { return ( <div>

<h1>Hello</h1>

<p>This is React</p>

</div>

)}

in basic react:-
→the fucn name is always in capital letters.

→the file may have js or jsx

→file name capital(small also works)

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>This is React</p>
    <>
  );

React is a spa, single page app, as it has only one page , that is only one div; root.

→HOW IS SCRIPT CONNECTED TO HTML IN REACT?

in vite , the index.html is present separately and script file is explicitly defined separately in it.in normal bsic react- we see in package.json , there is react script, react script is the connection link with btwn the two.