Reactとは？ ⚛️
Reactは、2013年にFacebookによって作成された人気のあるJavaScriptライブラリです。これにより、Webアプリケーション用の高速で使いやすいインターフェースを開発できます。Facebook、Instagram、Netflixを使用したことがある場合は、すでにReactに遭遇しています！ 🚀
Reactの主な利点は コンポーネントアプローチ。小さな独立したブロック（コンポーネント）を作成し、LEGOブロックのように再利用できます！ 🧱
Reactのプログラミングを始めるには？ 💻
Reactを使用するには、次のものが必要です。
✅ Node.js — JavaScript実行環境（ダウンロードはこちらから 公式サイト).
✅ テキストエディター、例えば Visual Studio Code.
✅ Reactをインストールする
create-react-appを使用して。
Reactのインストール方法は？ 🛠
ターミナル（またはコマンドライン）を開き、次を入力します。
npx create-react-app my-app
cd my-app
npm startこのコマンドは、Reactで新しいプロジェクトを作成し、ローカルサーバーを起動します。これで開発できます！ 🚀
Reactの主な機能🔧
コンポーネント： コードを小さな再利用可能な部分に分割できます。
状態: アプリケーション内のデータを管理します。
イベント： ユーザーのアクションに応答できます。
仮想 DOM: インターフェースの更新を加速します。
Reactの基礎 📚
1.コンポーネント📦
コンポーネントはReactの主な機能です。コンポーネントは、関数型またはクラス型にすることができます。
シンプルなコンポーネントの例：
function Welcome() {
return <h1>Привет, React!</h1>;
}このコンポーネントは、アプリケーションの任意の場所に挿入できます。
2. JSX — JavaScript + HTML 📜
Reactは JSX、これにより、JavaScript内で直接HTMLを記述できます。
JSXコードの例：
const element = <h1>Привет, мир!</h1>;JSXはコードをより読みやすく、使いやすくします。
3. 状態 🎛
状態を使用すると、コンポーネント内の動的データを管理できます。
stateを持つコンポーネントの例：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Счетчик: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}ユーザーがボタンをクリックすると、数字が増加します！ 🔢
4. イベントハンドラー 🖱
Reactを使用すると、クリックなどのイベントを簡単に処理できます。
イベントハンドラの例：
function Button() {
function handleClick() {
alert('Button pressed!');
}
return <button onClick={handleClick}>Нажми меня</button>;
}5. エフェクトの操作（useEffect） ⚙️
フック useEffect では、状態が変更されたときにコードを実行できます。
例：
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(s => s + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>Прошло {seconds} секунд</p>;
}このコンポーネントは、ページが読み込まれた瞬間から秒数をカウントします。⏳
Reactでのシンプルなプロジェクト💡
1. カウンター 📊
ボタンを押すと増加するカウンターを作成します。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Счетчик: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}2.乱数発生器🎲
ボタンをクリックするたびに、新しい数字が表示されます。
import React, { useState } from 'react';
function RandomNumber() {
const [number, setNumber] = useState(0);
return (
<div>
<p>Число: {number}</p>
<button onClick={() => setNumber(Math.floor(Math.random() * 100))}>Сгенерировать</button>
</div>
);
}結論🎉
Reactは、最新のWebアプリケーションを構築するための強力なツールです。コンポーネント、状態、イベント、効果の基本について説明しました。これで、最初のReactアプリケーションの開発を開始できます！ 🚀
練習が大切です！コードを書けば書くほど、コードを理解できるようになります。ですから、自由に実験して、自分のプロジェクトを作成してください！Reactの学習がうまくいくことを願っています！😊