日本語

ReactJS チュートリアル

Hooks

ReactJSの高度な機能

追加の概念

ReactJSチュートリアル：最初のReactアプリを作成する

こんにちは、未来のReact開発者たち！ReactJSの世界に踏み込むこの旅に一緒に参加できることを、とても楽しみにしています。10年以上にわたってコンピュータサイエンスを教えてきた者として、Reactは強力で、非常に楽しい学びとなることを保証できます。それでは、始めましょう！

ReactJS - Home

ReactJSとは？

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。Facebookによって開発され、以来、世界で最も人気のあるフロントエンドライブラリの一つとなりました。でも、それが脅威のように聞こえるなら心配しないでください – 我们はステップバイステップで解説していきます。

なぜReact？

カードの家を建てていると想像してみてください。何かを変更したいとき、慎重にそれぞれのカードを調整する必要がありますよね？Reactは、カードが自動的に調整される魔法のようなカードを持っているようなものです。これにより、ウェブアプリケーションの構築と更新がずっと簡単で迅速になります。

前提条件

深く掘り下げる前に、必要なものを確認しましょう：

  1. HTMLとCSSの基本的な理解
  2. JavaScriptに親しみがあること（心配しないで、進めつつ復習します）
  3. テキストエディタ（Visual Studio Codeを推奨します）
  4. コンピュータにNode.jsがインストールされていること

最初のReactプロジェクトの設定

それでは、最初のReactプロジェクトを作成しましょう。Create React Appというツールを使用して、一つのコマンドで必要なすべてを設定します。

  1. ターミナルまたはコマンドプロンプトを開きます
  2. プロジェクトを作成したいフォルダーに移動します
  3. 次のコマンドを実行します：
npx create-react-app my-first-react-app

これは数分かかるかもしれません。完了したら、新しいプロジェクトフォルダーに移動します：

cd my-first-react-app

今、アプリを起動しましょう：

npm start

これで、新しいブラウザウィンドウが開き、最初のReactアプリが動作しているはずです。まだあまりものらないですが、これから始まります！

プロジェクト構造の理解

Create React Appが私たちにとって設定したものを見てみましょう：

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

現時点で最も重要なファイルはsrcフォルダー内のものです。App.jsは私たちが大部分のコードを書く場所です。

最初のReactコンポーネント

src/App.jsをテキストエディタで開きます。以下のようなものが表示されるはずです：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

これはReactコンポーネントです。もしこれが混乱するなら心配しないでください – 我们は解説していきます：

  1. 我们はReactと他の必要なファイルをインポートします
  2. 我们はAppという関数を定義します
  3. この関数はJSX（JavaScript XML）を返します – HTMLに似ているが、JavaScriptを内部で使用できる特別なシンタックスです
  4. 最後に、コンポーネントを他の場所で使用できるようにエクスポートします

このコンポーネントを自分たちのものに修正してみましょう：

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>Welcome to My First React App!</h1>
<p>I'm excited to learn React!</p>
</div>
);
}

export default App;

ファイルを保存し、ブラウザを確認すると、自動的に更新されるはずです！

ステートを使ってインタラクティブにする

それでは、ボタンを追加してクリック回数を数えることで、アプリを少しインタラクティブにしましょう。

App.jsの中身を以下のように置き換えます：

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Welcome to My First React App!</h1>
<p>I'm excited to learn React!</p>
<button onClick={handleClick}>
You've clicked me {count} times
</button>
</div>
);
}

export default App;

これを分解してみましょう：

  1. 我们はuseStateをインポートします。これはReactのフックで、コンポーネントにステートを追加するのに使用します
  2. 我们はuseState(0)を使ってステート変数countと更新関数setCountを作成します
  3. 我们はhandleClick関数を定義して、カウントをインクリメントします
  4. JSX内で、ボタンを追加し、クリックされたときにhandleClickを呼び出します

保存してブラウザを確認すると、クリック回数を数えるボタンが動作しているはずです！

新しいコンポーネントを作成する

アプリが成長するに連れて、小さくて再利用可能なコンポーネントに分ける必要があります。まずはカウンター用の新しいコンポーネントを作成しましょう。

新しいファイルsrc/Counter.jsを作成し、以下のコードを追加します：

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
You've clicked me {count} times
</button>
</div>
);
}

export default Counter;

今、この新しいコンポーネントをApp.jsで使用してみましょう：

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Welcome to My First React App!</h1>
<p>I'm excited to learn React!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

見てください！ページには2つの独立したカウンターが表示されています。

結論

おめでとうございます！あなたは最初のReactアプリを構築し、コンポーネント、ステート、そして再利用可能なコンポーネントを作成することを学びました。これはReactの旅の始まりに過ぎませんが、すでに大きな進歩を遂げています。

コードを学ぶことは新しい言語を学ぶのと同じです – 練習と忍耐が必要です。すぐに理解できないことがあったとしてもがっかりしないでください。実験を続け、構築を続け、最も重要なのは、楽しむことです！

次のレッスンでは、Reactのprops、より複雑なステート管理について深く掘り下げ、より大規模なアプリケーションを構築し始めます。それまでに、楽しいコードを！

Credits: Image by storyset

 
次のチュートリアル:
ReactJS - 導入