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

React + TypeScript + Bootstrap のフロントエンドの開発を開始するには

More than 1 year has passed since last update.

備忘録です。

  • MacBook Pro (15-inch,2016)
  • macOS Mojave 10.14.1

npm はインストール済とします。

create-react-app をインストールします。

> npm update -g npm
> npm install -g create-react-app

プロジェクトを作成します。

「xxxx」の部分はプロジェクト(アプリ)名に置き換えてください。

> create-react-app xxxx --scripts-version=react-scripts-ts

今後ちょいちょい出てくる,以下の警告はとりあえず無視します。

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN fork-ts-checker-webpack-plugin@0.2.10 requires a peer of typescript@^2.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-scripts-ts@2.17.0 requires a peer of typescript@2.x but none is installed. You must install peer dependencies yourself.
npm WARN ts-jest@22.0.1 requires a peer of typescript@2.x but none is installed. You must install peer dependencies yourself.

生成されたファイルを初期編集します。

React ロゴを削除します。

  • src/App.tsx から import logo from './logo.svg'; の1行を削除します。
  • src/logo.svg はファイル削除します。

最初のページを空にします。

  • src/App.tsx の render が返すものを、一旦 <div className="App"/> だけにします。

bootstrap 4.1 を使う準備します。

  • src/App.css の内容を全部消します。
  • bootstrap 4.1 の introductionにある「CSS」のコードをコピーして public/index.html の <head> ~ </head> 内に記述します。
  • 同じく,bootstrap 4.1 の introductionにある「JS」のコードをコピーして public/index.html の </body> の直前に記述します。

追記した public/index.html は以下となります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

動かしてみます。

> npm start

ブラウザが起動され(初回は権限許可のダイアログが出ます),http://localhost:3000/に接続されます(favicon.ico を React のままにしているので, React のfavicon と空白のページが表示されます)。

初期コミット

無視ファイル追加

「webstorm」を使う場合は以下を.gitignoreに追加します。

# webstorm
.idea

「firebase」にデプロイする場合は以下を.gitignoreに追加します。

# firebase
.firebase/
firebase-debug.log

リポジトリを生成します。

> git init
> git add .
> git commit -am "initial commit"
Why do not you register as a user and use Qiita more conveniently?
  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
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