Help us understand the problem. What is going on with this article?

2020年、改めて React に入門する

僕がはじめて React をさわったのは 2016 年の 3 月頃、まだ Version 0.14 くらいのときでした。

スプレッドシートやガントチャートなどのコンポーネントを 1 年くらいがっつり作り込み、

React スゴい!
さすが FB!
キミに決めた!

と意気込みましたが、その後バックエンド開発がメインになり1 、React からは完全に遠ざかってしまいました。

気が付けば 2020 年、Version はいつの間にか 16.12 とか。

TypeScript で書けるんだっけ?
React Hooks? なにそれ? おいしいの?
へぇー、componentWill〜は非推奨になるんだ。って一体なにがあった!?2

…と、気になることが山積みですw

TL;DR;

取り急ぎ、クリーンな環境で React アプリを起動してみます

$ docker run --detach --interactive --rm --name app --publish 3000:3000 node:12-alpine
$ docker exec app npx create-react-app app
$ docker exec --interactive --tty --workdir /app app npm start

ブラウザで開いてみましょう
http://localhost:3000
image01.gif

OK,
では一旦 ctrl + c でアプリを停止して、React アプリの開発を開始しましょう!

TL;DR; for the next step

$ docker exec app apk add curl git vim zsh zsh-vcs
$ docker exec app git config --global user.email "you@example.com"
$ docker exec app git config --global user.name "Your Name"
$ docker exec --workdir /app app git init
$ docker exec --workdir /app app git add -A
$ docker exec --workdir /app app git commit -m "Initial commit"
$ docker exec --workdir /root app curl --remote-name https://raw.githubusercontent.com/hysh8392/dotfiles/master/.zshrc
$ docker exec --interactive --tty --workdir /app app zsh

とりあえず、最低限必要なコマンドのみインストールします

Mac で開発する場合、本当は Docker Desktop for MacVisual Studio Code を組み合わせた開発が最強だと思うんですが、ホスト側の作業フォルダをコンテナにマウントするとパフォーマンスが激しく劣化する、という長年解決されていない問題があるため、vim を入れときますw

この問題はおそらく Visual Studio Code の神アプデ「VS Code Remote Development3で解決されるものと思われますが、この機能の検証は別の記事で書きたいと思います

そして開発へ…

それではいよいよ開発に入っていきましょう!

To be continued...笑

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした