まずはToDoListを作ることを第一目標にする

前回のブログで宣言してから3日。

いきなりプログラムを作るのはハードルが高いので、このブログで過程をシェアしながら

進めさせて頂きます。(誰が読むのか謎・・・)

To Do Listの重要性

今の派遣先でも毎日朝、やることを決めるために書き出すと無駄なく効率もアップ。

これさえ終われば帰ってもいい!というリストを作っています。

iPhoneにもタスクをリストアップできるアプリが既にありますが、今回は仕事のタスクではなく、

’浄化’をタスクと設定したいと思います!

しかしreactでどうやって作るか、まだアイディアが沸かないので(その段階ではないので・・・)

とりあえずその前の段階から、実際に使いながら進めていく企画です。

Reactで作ってみよう

前提として時間があることとインターネット環境があることが必須です

手順

① Windows Terminalをインストールする

② Reactの基礎を学習する

③ VS Codeをインストールする

④ ①でターミナルの準備が出来たら、自分のパソコンの位置を確認しましょう。

私のPCでは、ユーザーのアイコンとなっていて、ユーザー名が設定してある位置です。

 

⭐︎reactの基礎学習をしっかり学ぼう⭐︎

フォルダ名はreact-basicで作成します。

インストールしたターミナルでもいいし、 VS Codeでもいいのでコマンドでreactを使って操作していきましょう。

create-react-app

開発環境を構築します。

上記の様な画面が出たら、ローカルサーバーが立ち上がっています。

コツは

動画の通りに実践することです。私は動画を何度も観ました!

スローにしながら、素直に、ひとつひとつ間違えないようにソースコードを書くことで成功しました。


 <div className=”App”>
      <header className=”App-header”>
        <img src={logo} className=”App-logo” alt=”logo” />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a className=”App-link”
          href=”https://reactjs.org”
          target=”_blank”
          rel=”noopener noreferrer”>
          Learn React
        </a>
      </header>
    </div>
ロゴマークの記述↑

さてさて、さらに進めていくとコンポーネントという考え方が重要な事が解ります。
 
この考え方は、CakePHPでも出てきたので、私は抵抗なく使うことが出来ました。

ですので、さっぱり訳わからん・・という方でしたら、CakePHPを少し勉強してみるといいかもしれません。
あるいは動画を見て、ノートに内容をアウトプットすれば、構造は理解できますね。

ということで、フォルダの内容を理解すれば作れるということで、進めていきます。

App.jsを編集していきます。
この操作は4時間ぐらいかかりましたが、一気に集中してやることをお勧めします!!

*下記が実際に作ったUIです*
 
要はアプリを作るための骨組みとなる要素(ソースコード)ですね。↓
 
先ほどのReactの画面が、右の様な表示になればGood。

 

続きはまた次回!!

実際にアプリを作る過程は、Udemyでも講師をされているというYou Tubeチャンネル:プログラミングチュートリアル様でご教授いただきました。

ありがとうございました!!