React.jsの起動

2366 ワード

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?


JavaScriptでは、ステップ->コマンド・アクセスを1つずつ構成する必要があります
// 요소 생성
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.