0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React始めました。(環境構築編)

Last updated at Posted at 2020-05-29

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回から数回にかけてReact.jsを勉強していこうと思います。

※この記事は初学者用かつ自分の勉強用で書いていきます。
※Macを使っての解説です。

#ゴール
Reactを使ってアプリケーションを作れるようになる。
最終的にFirebaseを用いてのチャットボット的な物を作成する。

#React.jsとは
公式サイト

  • SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。
  • Facebook 社によって開発され、Facebook の Web サイトでも利用されています。
  • 2020年4月現在の最新バージョンは 16.13.1 です。
  • JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。
  • JavaScript は ES6 の文法である import やアロー関数を取り入れています。

#create-react-appとは
reactの環境開発を簡単に行なってくれるもの

#環境構築
何か新しい言語を始めようとするには、最初に環境構築を行うことがほとんどの場合必要ですのでやっちゃいましょう。
自分の場合はReact.jsを触る前にVue.jsを触っているので、nodeやnpmといったものがもうすでに入っていますが、初学者向けに0からやっていきます。
まずはnode.js
1__bash.png

あります。(バージョン情報が出ればインストールされています。)
インストールがまだの方はこちらのインストーラーを使うことをお勧めします。

インストールが完了するとnpmも同時に使えるようになります。
##npm(Node Package Manager)とは?

  • Node.jsのモジュール管理ツールです。
  • フロントエンドで使用するJavascriptのパッケージ(例えば、vueといった有名なフレームワーク、gulpなどのビルドシステム等)のインストールとバージョン管理に使います。
  • 公式サイト
1__bash_と_初めてのFirebaseを触ってみる_Authentication_.png

それでは、いよいよReactアプリを作成します。
以下のコマンドを入力して下さい。

$ npx create-react-app hello

※helloはプロジェクト名です。
#実行

$ cd hello
$ npm start
React_App.png

以上。お疲れ様でした。

#サーバーアップ

$ npm run build

できたbuildフォルダの中身を本番サーバに置く。

#最後に
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回は基本的な書き方とかやっていきます。

最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。:point_up::point_up::point_up:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?