react-note.md

---

----------------installing React---------------------

0. node must be installed on your system. when installing node, npm also get installed.
1. way1: npx create-react-app <your_project_name>

**note:
The main difference between "npm create-react-app" and "npx create-react-app" lies in how they are used to create a new React application.

1. "npm create-react-app": This command is used when you have already installed the create-react-app package globally on your system using npm. When you run this command, npm will look for the globally installed create-react-app package and use it to create a new React application in the specified directory.

2. "npx create-react-app": This command is used when you do not have the create-react-app package installed globally on your system. Instead of installing the package globally, npx allows you to run the create-react-app command without installing it first. It downloads the latest version of create-react-app temporarily, uses it to create the React application, and then discards it after the process is complete.

In summary, "npm create-react-app" is used when you have the create-react-app package installed globally, while "npx create-react-app" is used when you want to create a React application without installing the package globally by downloading and using it temporarily.

---

----------------General Note---------------------

1. this two functions have similar functionality:

function Greeting() {
  return <h2>My first component</h2>
}

import React from 'react';

function Greeting() {
  return React.createElement('h2', {}, 'My first component');
}

2. {} in JSX means going back to JS land.

how React.createElement works?

• first argument: tag name
• second argument: tag properties
• third component: content

---

---

=========================== React Notes from max =================================

1. when writing react code, we are coding in a declarative way. we just define target and not the needed steps to met that target.

2. when writing vanilla javascript code, we write imperative code (and not declarative code).

3. React === declarative UI programming with React you define the target UI state(s) - not the steps to get there!
   instead React will figure out and perform the necessary steps.

4. vite package under the hood uses Nodejs.

5. for creating a React app, there is many tools and two most popular are vite and create react app.

6. for creating react project by vite just type:
   npm create vite@latest react-project

then run: npm install to install all extra packages and then run:
npm run dev to start a development server to be able see the result on the browser.

7. JSX: html in javascript
8. vite is a build tool which transforms jsx to javascript code without JSX.