![見出し画像](https://assets.st-note.com/production/uploads/images/145504730/rectangle_large_type_2_b9c01a2bf8ebc693e1f5dd5f58103f25.png?width=1200)
Reactとは?
インデックス
1. Reactってなに?
Reactは、ウェブサイトやアプリを作るためのツールです。Reactを使うと、コンポーネントという小さな部品を組み合わせて画面を作れます。これにより、いろんな人が作ったコンポーネントを簡単に使えるようになります。ReactのコンポーネントはJavaScriptという言語で書かれていて、JSXという特別な書き方を使って作ります。
2. なぜReactを使うの?
Reactを使う理由はいくつかあります:
再利用できる:一度作った部品を何度も使えるので、時間が節約できます。
速い:画面全体ではなく、変わった部分だけを更新するので、速く動きます。
人気がある:たくさんの人が使っているので、困ったときに情報を見つけやすいです。
いろんな場所で使える:ウェブサイトやスマホのアプリを作れます。
3. Reactを始める準備
Reactを始めるためには、以下のことを準備します:
Node.jsとnpmのインストール
公式サイトからインストールします。
Reactプロジェクトの作成
以下のコマンドを使って新しいReactプロジェクトを作ります。
npx create-react-app my-app
cd my-app
npm start
エディタのセットアップ
Visual Studio Codeなどのコードを書くソフトをインストールし、Reactの開発に便利なプラグインを追加します。
4. 基本のReactコンポーネント
Reactでは、コンポーネントという小さな部品を組み合わせてウェブサイトを作ります。
以下は最も基本的なコンポーネントの例です。
import React from 'react';
function Hello() {
return <h1>Hello, World!</h1>;
}
export default Hello;
このコードは、「Hello, World!」と表示するシンプルなコンポーネントです。
5. Reactでの状態管理
Reactでは、コンポーネントが持つデータ(状態)を管理できます。
以下は、状態を持つコンポーネントの例です。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
このコンポーネントでは、ボタンをクリックするたびにカウントが増えます。
6. イベントの処理
Reactでは、ユーザーが何か操作をしたときのイベントを簡単に処理できます。例えば、ボタンがクリックされたときの処理を以下のように書けます。
import React from 'react';
function ClickButton() {
function handleClick() {
alert('Button was clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default ClickButton;
このコードでは、ボタンがクリックされたときにアラートが表示されます。
7. まとめ
Reactは、ウェブサイトやアプリを作るための便利なツールです。コンポーネントを使って再利用できる部品を作ったり、効率的に画面を更新したりできます。多くの人が使っているので、たくさんの情報とサポートがあります。
この記事が気に入ったらサポートをしてみませんか?