What Is React?

React is A JavaScript library for building user interfaces

Mobile apps and desktop apps feel very "reactive" : Things happen instantly, you don't wait for new pages to load or actions to start

Traditionally, in web apps, you click a link and wait for a new page to load. You click a button and wait for some action to complete.

JavaScript runs in the browser - on the loaded page.
You can manipulate the HTML structure (DOM) of the page.
No (visible) request to the server required, no need to wait for a new HTML page as a response.

React.js is a client-side JavaScript library.
All about building modern, reactive user interfaces for the web.

Why Would We Use It?

자바스크립트에서는 단계를 하나하나 구성해나가야 함 -> 명령형 접근

// 요소 생성
const modalButton = document.createElement('button');
// 내용 추가
modalButton.textContent = 'Delete';
// 클래스 추가
modalButton.className = 'modal-text';
// 이벤트 리스너 추가
modalButton.addEventListener('click', closeModalHandler);
// 이벤트 함수 정의 등등등

리액트에는 사용자 지정 HTML 구성요소가 있음
애플리케이션을 작은 구성요소로 분해해나가는 것
모든 요소에는 뚜렷한 기능이 존재하므로 코드의 유지보수가 훨씬 쉬워짐
Declarative, component-focused approach

Building Single-Page-Applications (SPAs)

React can be used to control parts of HTML pages or entire pages.
"Widget" approach on a multi-page-application.
(Some) pages are still rendered on and served by backend server.

React and also be used to control the entire frontend of a web application
"Single-Page-Application" (SPA) approach.
Server only sends one HTML page, thereafter, React takes over and controls the UI.
HTML 파일을 바꾸는 것이 아닌 화면에 표시되는 내용을 바꾸는 방식 -> 매끄러운 UI 전환

React.js Alternatives

React : Lean and focused component-basesd UI library. Certain features (e.g. routing) are added via community packages.

Angular : Complete component-based UI framework, packed with features. Uses TypeScript. Can be overkill for smaller projects.

Vue.js : Complete component-based UI framework, includes most core features. A bit less popular than React & Angular.