Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@hysh8392

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

More than 1 year has passed since last update.

僕がはじめて 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...笑

0
Help us understand the problem. What is going on with this article?
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
hysh8392
とある東京在住の Web エンジニアです。超個人的嗜好で厳選したお気に入りの音楽をプレイリスト形式で紹介していく誰得な音楽ブログ [Fav Music](https://fav-music.tokyo/) を運営してます!好きな言語は Markdown、好きな言葉は「責任、とってよね」(by 三玖)です笑

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?