https://codesandbox.io/p/sandbox/react-first-app-advice-52879f?file=%2Fsrc%2FApp.js
different between React and vanilla-js. to implementation the same example

React definition

... Based on Components
React is all about Components, like buttons - input fields - search bars ...etc

... Declarative
■ We describe how Components look like,
and how they work → using JSX
■ JSX is declarative syntax
■ Declarative → tell React what a Component should look like, Based on current data / state
■ React is abstraction away from Dom, →(That we never work with a Dom) We do that with JSX
■ JSX → Syntax that combines HTML, Css, JS, and allow to reference other Components

Is React a library or a framework ?¿¿
→ React is a library
Cauze React is only the "view" layer
We need a multiple external libraries (e.g: routing or data fetching) to build complete App

React was created in 2011 by "Jordan Walke" working at Meta

in finally,
■ React do all this by "Virtual Dom" , "Fiber tree", ...etc
■ Rendering Components on Webpage → based on current state
■ React keeping the UI in sync with state, by Re-Rendering (reacting)

Start day-3 ⚛️⚛️

As usual we will use vsCode

Two options for setting up a React project

... First option
■ Complete “starter kit” for React app
■ (Good) Everything is already configured
i.e. ESlint, Prettier, Jest, ...etc
→ So app created with "create-react-app"
automatically comes with development server webpack
webpack → module bundler, i.e. parcel, ...etc
■ (bad) Uses slow and outdated technologies (i.e. webpack)
■ So the team behind "create-react-app" has stopped innovating
→ Summary,
- Don't use it for a real-world app
- only for tutorials / experiments

... Second option
■ Modern build tool contains a template for setting up React apps
■ (bad) You need to manually set up ESlint (and others)
■ (Good) Extremely fast hot module replacement (HMR) and bundling
→ Summary,
- Use for modern real-world apps

in finally,
- We use "create-react-app" for small projects
- We use React with Vite for huge and scalable projects

... What about React Frameworks?
■ Contain solutions like routing and data-fetching server-side-rendering (SSR) and more
■ This is not the best idea for learning frameworks " in the first place "
- React apps are important too

How can i set up React app
using "create-react-app"

in Terminal, write this command
■ npx create-react-app project-name

or, If we want specific version
■ npx create-react-app@5 project-name
→ @version-number