【环境搭建】使用Docker以yarn启动和创建React应用的方法（JavaScript版本）

2 年 ago
韵, 科
1 minute

在中国，只需要一种方法来将以下内容用中文进行转述：

背景

【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました。
この記事は、「2.1.yarnでJavaScriptを使用してReactプロジェクトを作成する方法」の解説記事になります。

The goal (in Chinese: 目标)

yarnでJavaScriptを使用してReactプロジェクトを作成できるようになる。

如何使用yarn和JavaScript创建React项目。

docker-react-yarn-javascriptをcloneし、起動に必要なdockerfileをローカルに準備します。

 

Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。

#nodeの19.4.0をベースに使用する
FROM node:19.4.0
    以下のコマンドでdockerを起動します。
$docker-compose up -d --build

vscodeでコンテナ内部に入ります。vscodeでコンテナ内部に入る方法は【環境構築】Docker container内部にVS Codeで入って作業する方法を参照ください。

vscodeでターミナルを起動し、作業用にdocker-compose.ymlでマウント時に作成された作業用のディレクトリに移動します。

$cd ../react_yarn_javascript_workdir/

yarnでreactのアプリの雛形を作成します。

create react-appの後ろにくる文字列が作成されるディレクトリ名になります。（ここでは、react_yarn_javascriptというディレクトリが作成されることになります。）

$yarn create react-app react_yarn_javascript
    作成されたディレクトリに移動します。
$cd react_yarn_javascript/

reactを起動します。

$yarn start
    起動が成功すればご自身のPCで設定されているデフォルトのブラウザでreactが起動されます。

借鉴文献来源

 

个人博客

 

bannerAds