Zenn
😽

ReactでHello Worldしてみよう

2023/10/20に公開
JavaScript
React
初心者向け
styled-components
tech

概要

本記事では、初めてReactに触れる方向けに、Reactってこんな風なJSライブラリだよ〜という紹介です！
ハンズオン形式で実際にHello Worldをするところまでできたら良いな+αでReactらしいcssの適用を紹介します〜

対象読者

  • プログラミング経験はあるが、Reactに全く触れたことのない人

前提として

  • nodeとnpmをマシンにインストールしていること

Reactのアプリを作る

appを作る

早速作っていきましょう〜

ターミナル
$ npx create-react-app first-react-app

Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /Users/***/first-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1461 packages in 1m

242 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 9s

246 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1530 packages in 1s

246 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created first-react-app at /Users/***/first-react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd first-react-app
  npm start

Happy hacking!

すでにinstallされているパッケージ等によってちょっと違うかもしれませんが、Happy hacking!と表示されたらOKです！

appを起動する

作ったappを起動していきます！

ターミナル
$ cd first-react-app
$ npm start
Compiled successfully!

You can now view first-react-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.34:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

ターミナル上で上記の表示が出れば正常に起動できています。
実際に画面を見にいきましょう。

下記のような画面が表示されているはずです

Hello Worldを表示する

プログラミングの慣習にならって、Hello Worldを表示しましょう。
お好きなエディターでfirst-react-appを開いて下さい。

VSCodeだとこんな感じ

では、src配下にcomponentsディレクトリを作り、
components配下にHelloWorld.jsxを作って下さい。

そして、HelloWorld.jsxに以下のようにコードを書きます

HelloWorld.jsx
export const HelloWorld = () => {
  return (
    <H1>Hello World!!</H1>
  );
};

この段階では、まだ画面には反映されていません。
というわけで、画面に反映させていくぞ〜！
App.jsを開いて、下記のように変更します。

App.js
import logo from './logo.svg';
import './App.css';
+ import { HelloWorld } from './components/HelloWorld';

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>
+     <body>
+       <HelloWorld />
+     </body>
    </div>
  );
}

export default App;

ついでに邪魔なCSSを消します

App.css
.App-header {
  background-color: #282c34;
- min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

これでlocalhostを見ましょう

せっかくだし、styleを適用しましょう〜

このままだと味気ないので、CSSを適用していきましょう。
せっかくだし、Reactらしい適用方法を紹介します！

styled-componentsの導入

今回はstyled-componentsを使ってみます。

ターミナル
$ npm install styled-components

added 10 packages, and audited 1540 packages in 6s

248 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

はい、導入完了

styleを適用する

HelloWorld.jsxを開いて下さい

HelloWorld.jsx
+ import styled from 'styled-components';

export const HelloWorld = () => {
  return (
+     <SContainer>
-       <h1>Hello World!!</h1>
+       <SH1>Hello World!!</SH1>
+     </SContainer>
  );
};

+ const SContainer = styled.div`
+   background-color: #cd1c1c;
+   &:hover {
+     background-color: #111;
+   }
+ `;

+ const SH1 = styled.h1`
+   color: #fff;
+   text-align: center;
+ `;

今回はstyledという名前にしましたが、お好きな名前でどうぞ〜

以下のようにスタイルが適用されたらOKです

jsxファイル内でsassが使えるので結構便利です！

Hello Worldを増殖させる。

下記のようにコードを追加すると、Hello Worldが増殖します〜w

App.js
import logo from './logo.svg';
import './App.css';
import { HelloWorld } from './components/HelloWorld';

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>
      <body>
        <HelloWorld />
+       <HelloWorld />
+       <HelloWorld />
+       <HelloWorld />
      </body>
    </div>
  );
}

export default App;

Reactは楽しいぞ

モダンなWebフロントエンドを勉強しようとしたとき、選択肢としてはReactかVueが有力かと思いますが、2023年10月現在ですと、React優勢です。(Googleトレンドとか見てくれ〜)
なので、今からモダンなWebフロントエンドを勉強するならReactをお勧めします〜

Discussion