レッスン 1

Reactに触れてみよう

ReacTouch
React Logo
LESSON 1|

Reactに触れてみよう

このレッスンでは、実際にReactコンポーネントを作っていきます。 段階的にコードを変更しながら、Reactコンポーネントを完成させましょう！
Step 1

シンプルなテキストを表示しよう！

最初のステップとして、シンプルなテキスト表示から始めましょう。 Appコンポーネントの中で「こんにちは」というテキストを表示してみます。

💡

App.jsx

const App = () => {
  return <div>{/* ここにコードを書いてください */}</div>
}

export default App
こんにちはのテキスト表示
<div>こんにちは</div>
Step 2

見出しタグを使ってみよう！

次は、h1タグを使って「ようこそReactへ！」という見出しを作りましょう。 h1タグは大きな見出しを表示するためのタグです。

App.jsx

const App = () => {
  return <div>こんにちは</div>
}

export default App
h1タグで見出しを表示
<h1>ようこそReactへ！</h1>
Step 3

複数の要素を表示しよう！

複数のタグを表示する時は、全体を1つのdivタグで囲む必要があります。 これは、JSXでは「1つのコンテナの中に複数の要素を入れる」というルールがあるためです。 h1タグで「React App」、pタグで「Reactの基本構造を学ぶ」と表示してみましょう。

App.jsx

const App = () => {
  return <h1>ようこそReactへ！</h1>
}

export default App
return文で親要素のdivを返す
return (
  <div>
  </div>
)
h1とpタグで見出しと説明文を表示
    <h1>React App</h1>
    <p>Reactの基本構造を学ぶ</p>
Step 4

クラス名を追加してスタイルを適用しよう！

今度は、CSSでスタイルを付けるためにclassNameを追加しましょう。 各タグにクラス名を設定してください： ・divタグに「container」 ・h1タグに「title」 ・pタグに「description」 また、CSSファイルを使用するために、 ファイルの先頭に `import './styles.css'` を追加してスタイルを読み込む必要があります。

💡

App.jsx

const App = () => {
  return (
    <div>
      <h1>React App</h1>
      <p>Reactの基本構造を学ぶ</p>
    </div>
  )
}

export default App
CSSファイルをインポート
import './styles.css'
classNameでスタイルを適用したJSX
<div className="container">
  <h1 className="title">React App</h1>
  <p className="description">Reactの基本構造を学ぶ</p>
</div>
Step 5

画像を表示しよう！

画像を表示するimgタグを追加しましょう。 imgタグはsrc属性で画像のパスを指定し、JSXでは<img />のように最後に/を付けて閉じます。 これを「セルフクロージング」と呼び、間にテキストやコンポーネントが入らないタグで使います。

App.jsx

import './styles.css'

const App = () => {
  return (
    <div className="container">
      <h1 className="title">React App</h1>
      <p className="description">Reactの基本構造を学ぶ</p>
    </div>
  )
}

export default App
React学習画像の表示
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/200px-React-icon.svg.png" alt="React学習画像" />

お疲れ様でした！次のレッスンへ進みましょう！

Loading Monaco Editor...