![見出し画像](https://assets.st-note.com/production/uploads/images/112293278/rectangle_large_type_2_83fd24413a78079bc2802bc771b22652.png?width=1200)
35歳から始めるアプリ開発日記 #6 その1
TODOリスト
progateにアカウント登録JS(ES6)の確認(ES5とのギャップがないか確認しようかな)jQueryの確認(シッタカブリな部分がないか確認しようかな)Gitの確認(シッタカブリな部分がないか確認しようかな)Sassの学習(中身知らないので)Reactの学習(中身知らないので)
Node.jsの学習(雰囲気は知ってるけど詳しくないから)
さて次はReactについて学びます
安定の「progate」様
Reactは話は聞くけど触れたことがないものです
毎度ながら
知らないことってワクワクしませんか?x3
最高ですよね!!
このワクワクを常に感じ続けたいのは
欲張りでしょうか
(わくわく)
![](https://assets.st-note.com/img/1690898919335-dqoCckNTDB.png)
世界的に人気上昇中だそうです
たまりませんね
(わくわく)
「JavaScript・・・ライブラリ」
JavaScriptなんですね
とりあえずやってみます
まずはVSCodeでReactが実行できる環境を構築しました
が・・・
ん?
「Node.js」が必要なの?
「Node Package Manager(npm)が必要だぜ」というサイトが多い
あらReactの次にやる予定のものが先にきました
順番変えるか? んー・・・
とりあえず触れてから考えることにしました
・・・
消化不良ですがフリープランで見れる部分まで終わりました
知らなかったことだけピックアップ
JSXというHTML記述式
※return直下には1つのタグがあるようにする必要があるコメントの書き方が独特{/* xxxx */}
タグは/で終わらないとダメよ
/を抜いたら「SyntaxError・・・Unterminated JSX contents」となったJSX内でJS変数を使う場合は”を使わない
stateという仕組み(ユーザー操作で変わる値のこと)
this.stateに対しプロパティ情報を追加する感じ
stateのプロパティを変えるにはsetState関数で指定するイベント定義時は<イベント名>={()=>{関数呼び出し}}と書く
アロー関数を書くこと忘れそう・・・(ここから2章)JSXはindex.jsを経て HTMLコードへの変換後
index.htmlへ挿入されるindex.jsの「ReactDOM.render」の動き
JSXはcss適用時にclassではなくclassNameを使う
2章の2で無償版終了
1時間30分ぐらいでした
「コンポートネント」「props」「formタグ」「inputデータの受取り」
なんて内容が見れなかったのは残念
んーー
やってて感じたのは
Webアプリケーション開発として
Java言語の経験があれば
そんな頑張るほどの内容では無い
そんな風に感じました
まだ見えてない奥深さはあると思いますが
それは実際にアプリ開発を進める中で掘り起こします
ただ
コンポーネント
props
inputデータの受け渡し
複数画面のコントロール
これはちょっとネットサーフィンして確認しておきます
気になった状態で終えられないですし
複数画面ある場合などのコントロールをどうするか見れていなかったので
気になる部分だけ「その2」で解消させますね
「progate」様で得られるものはここまでなので
一旦記事的にもクローズします
![](https://assets.st-note.com/img/1690904551736-CrHsULMHtW.png?width=1200)
学習レッスンが中途半端なものがどんどん増え続ける
「有償プランにしろ~」と迫ってくるようだ
![](https://assets.st-note.com/img/1690904641295-hipfD5AifT.png?width=1200)