Reactとは
Reactとは
WEBフレームワークで、javascriptライブラリの一つでUser interfaceを作るため使われます。
WEB開発が複雑になるにつれ、html、css、jsだけでは限界が発生して、初期にはWeb開発のためのフロントエンドライブラリとしてDOM操作をしやすくしてくれるjQueryライブラリが主に使われていました。
👾details DOM(Document Object Model)とは
DOMは文書オブジェクトモデル(Document Object Model)の略で、ウェブページ文書をツリー構造のnodeとして表現します。
WEBページドキュメントをツリー構造のnodeとして表現します。 JavaScriptを使ってこれらのノードを操作することができます。 DOMはウェブページの要素に動的にアクセスして修正するために使用され、ウェブアプリケーションの動的な機能を実装する上で重要な役割を果たします。
しかし、その後DOMを直接操作する方式に限界を感じ、大規模プロジェクトに効率的にコードを管理し、コンポーネントベースのUI開発を支援するフロントエンドフレームワーク(ライブラリ)が登場しました。 そのうちAngular、React、Vueをフロントエンド開発を代表するツール3つと呼びます。
👾要約
- facebookで作られたライブラリ
- Single page application（SPA）または Mobile applicationの開発し使われます。
SPAとは
サーバーからデータを受け取るたびにリクエストを送信し、返却されたデータでサイトの内容を更新します。
Reactの特徴
👾宣言的（Declarative）です
リアクトはUIを作成するのに有利である。 データが変更された時に効率的にレンダリングを行えるようにする。
👾コンポーネントベース（Component-based）です
カプセル化されたコンポーネントが自分で状態を管理し、複雑なUIも効果的に構成できる
👾一度学んでどこでも使います。(Learn Once, Write Anywhere)
既存ソースを不要に書き換えることなく新機能を開発できる。 Nodeサーバーでレンダリングすることもでき、オンラインウェブでも使用できる。 RN（React Native）を使えば、モバイルアプリも作れる。
JSX(JavaScript Syntax Extension)
JSXとは、Reactの中で一般的なHTML形式の文法を使用できるように、JavaScriptを拡張した文法で、React elementを生成することができ、JavaScriptのすべての機能が含まれています。
const element = <h1>Hello, world!</h1>;
マークアップとロジックの両方を含むコンポーネント形式で構成できます。
React Project Start
node.js DL
React Project生成
npx create-react-app [projectName]
cd projectName
npm start
Discussion