😽

React create-appを使ってHelloWorldまでいってみる

2 min read

HelloWorldまでいってみる

始めたての方へ

https://zenn.dev/jin237/articles/84c0d69198e1b6
以前に僕自身が書いた記事で,typescriptの環境構築を行いました.ここの環境構築とは,また別の方法で作っていますが,初心者の方は最初に上の記事をやってみても良いかと...これができている前提で始めます!

環境構築

前提として,node.jsがインストールされていることとしますー!

temirnal
# node.jsのインストールされているかを確認
$ node -v
>> v14.18.1

# yarnはnpmと互換性があり,npmで使用していたプロジェクト設定ファイル(package.json)がそのまま使える.
# 今回はnpmを使ってyarnをグローバルにインストールする.(後者は省略形)
$ npm install --global yarn
$ npm i -g yarn
$ yarn -v
>> 1.22.17

# "todo_app"という名前でプロジェクトの大元を作成する
$ mkdir todo_app
$ cd todo_app

create react-appで起動まで持っていく.

、create-react-appでアプリを起動ができます.大抵,create-react-appをテンプレートとして起動します.

yarnでTypescriptやアプリの名前の名前を指定していきます.

terminal
# todo-listというreacrプロジェクトを作っていきます.
$ yarn create react-app todo-list --template typescript
$ ls
>> todo-list
$ tree
.
└── todo-list
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── public	
    ├── src		
    ├── tsconfig.json
    └── yarn.lock

todo-listの中身はこのようになっています.ここまできたら,yarn startでReactのappの起動をします.勝手に立ち上がらない場合は,http://localhost:3000/を立ち上げましょう.そうするとReactのマークが回っていると思います.

ここまでが環境構築!完了!

"Hello, Wolrd!"を作ってみる!

今,ディレクトリが,todo-listの中にいると思いますが,ひとつ階層を下げましょう.

terminal
$ cd src
$ ls
>> App.css  App.tsx  index.tsx  react-app-env.d.ts  setupTests.ts  
   App.test.tsx  index.css  logo.svg  reportWebVitals.ts

これらのファイルが存在しますが,ここで,

  • App.css
  • App.tsx
  • index.tsx
  • react-app-env.d.ts
  • setupTests.ts
  • App.test.tsx
  • index.css
  • logo.svg
  • reportWebVitals.ts

のうち,

  • App.tsx
  • index.tsx
  • react-app-env.d.ts
  • reportWebVitals.ts

のみでOKです.これをするために

terminal
$ rm App.css App.test.tsx index.css logo.svg serviceWorker.ts setupTests.ts reportWebVitals.ts
$ ls
>> App.tsx  index.tsx  react-app-env.d.ts

しておきます.

コードを書いていきましょう!

App.tsx, index.tsx, react-app-env.d.tsをそれぞれコードを書いていきます.

index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
App.tsx
import React from 'react';

function App() {
  return <>Hello, World!</>;
}

export default App;

これで,http://localhost:3000/ に"Hello,World!"が出てくると思います.

参考資料

Discussion

ログインするとコメントできます