What is React, Vite?

A library of JavaScript to build an user-interface or rendering components to DOM using a frameworks like Next.js

To build...
1. A single webpage
2. An application rendered by a server with Next.js

Pros
It rerenders only changed parts of a page, avoiding unnecessary rerendering of unchanged DOM elements.

Cons
Routing?[^1]

Notable features

1. Declarative Prgrmg Paradigm
   : focuses on WHAT to accomplish without specifying all of HOW to do.
   <=>
   Imperative
   : bossy, instructive, mandatory

   /*Imperative*/
   const number = [1, 2, 3, 4, 5];
   const newNumber = [];
   
   for(let i=0; i<number.length;i++){
   newNumber.push(number[i]);
   }
   
   /*Declarative*/
   const number1 = [1, 2, 3, 4, 5];
   const newNumber1 = number1.map((e)=>e);

2. Components
   made of components which is reusable & modular.

• Values are passed btw components thru properties.
• Values internal to a component are called its state.
• Function & class components declares a component.

3. Function component
   A single prop(erty) -> Function component
   => JSX (= Javascript Syntax eXtension)
   : a syntax extension to JavaScript
   Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

4. Virtual DoM
   HTML은 Tree형태라 요소 하나만 바껴도 전체를 다시 모두 렌더링해줘야 했는데, React는 전체를 복사본(Virtual DoM)을 만들어두고 변화가 생기면 복사본과 원본을 비교하여 변경된 부분만 재렌더링을 해주기에 그 속도가 더 빠르다.

5. React-app 생성하고 실행하는 방법

1. 생성할 앱 빌딩 프로젝트(폴더형태)를 위치하게 하고 싶은 디렉토리로 cmd창을 통해 진입한다.
2. Vite 프로젝트(폴더)를 생성한다.
   Vite:
   a build-tool for React-project
   a CLI(Command Line Interface) using npm[^bignote]-command

    npm create vite@latest MyProject(folder)
    MyProject(folder)를 생성하지 않고 현재 폴더를 프로젝트폴더로서 쓰고싶다면
    npm create vite@latest ./

   Ignore files and continue를 해도 기존재하는 같은 이름의 파일은 허락없이 신규 파일로 덮어씌워진다.(Windows는 파일명의 영대소문자를 구분 안함. README=readme로 같은 파일명)

   Package name : ... 영대문자는 허용 안함, 패키지명을 정해준다.
    //Select a framework: [V] React,
    //Select a variant: [V] JavaScript(단독)을 각각 선택한다.
    )

3. Install Vite(CLI) Globally (Optional)
   If you want to use Vite commands globally across different projects, you can install it globally by running:

   cd MyProject(folder) //package.json이 있는 폴더에서만 
   node_modules를 install할 수 있다.
   npm install

   After this, you should be able to run vite commands directly from any directory.
4. Ensure Vite is Installed Locally.
   Even though you've installed Vite globally, it's still important to have it installed locally within your project. Run the following command to install Vite and its related dependencies in your project:

   npm install vite --save-dev

5. Check that it can run your initial project.

   npm run dev

6. src폴더 내 Apps.jsx을 필요한 기능만 남게 코드를 수정하고, 거기에서 앱을 작성한다.(이 파일의 반환값이 부모폴더에 있는 index.html의 div#root에 삽입된다.)
7. To build the app, command the below, ensuring that you will command at the directory at which package.json exists.

   npm run dev

   You need a build-tool Vite(CLI) for React-project, and Vite using npm-command needs package.json which contains metadata and necessary dependencies for the project to run.

6. 정적 콘텐츠, 동적 콘텐츠

   1. 정적 콘텐츠 : 직접 타이핑되고 런타임에서 변경되지 않는다.
   2. 동적 콘텐츠 : 런타임에 값이 입력된다.

7. Vite란?

[^1]: "Routing" sends or direct along a specified course, eg "all lines of communication were routed through London"

[^bignote]: NPM, Yarn, PNPM, and Bun are package managers used in JavaScript development. Here's what they stand for and a brief description of each:

NPM (Node Package Manager): NPM is the default package manager for JavaScript and comes bundled with Node.js. It allows developers to easily install, update, and manage dependencies for their projects.