上記の続きになっています。
実際に組み始めると色々分からんことがすぐに出てくるね。。。
App.jsでHTMLタグとか書いて画面を作成するのか、、、？
そういったお作法は公式のを見ようということで
https://reactjs.org/community/examples.html
ここからコードを見始める。
https://github.com/ahfarmer/calculator
実際に動いてるのをみれるのは良いね
というかディレクトリ構成とか結構いい加減、、、、だと、、、？
App.jsはView作成して返すところっぽい？
何するところなのかなーって色々調べてはみたものの、いまいち分からん。。。
というか話題にしている人が居ない。なんとなく、ReactとかReduxの話ではなくて、JavaScriptの話な気がする
export default App;
https://github.com/jeffersonRibeiro/react-shopping-cart
どこからどこまでがReactの知識で、Reduxなのかわからないから、まずはReactのチュートリアルやろう。
If you click on any square, an X should show up in it.
え、ならない、、、なぜ、、、
インデントそろえるために入れたスペースが全角だったからですね。
普段のエディタだと表示してくれるけど、このcodepenでは表示してくれないのでしくじりました。
日本語訳が必要な場合は
https://mae.chab.in/archives/2943
でいいと思います。
ただ、引用されているコードが省略されすぎてて、ちょっと分かりづらい箇所があるので、
コードの参照については公式ドキュメントを読むほうがよさそうです。
あとココとか
http://better-than-i-was-yesterday.com/react-tutorial-japanese/
Reactでは副作用的なものを推奨しない模様。
パフォーマンス向上につながる模様。
オブジェクト指向でもvoidメソッド好きじゃないのでこの辺は好ましい。
というかJavaScriptの勉強が圧倒的に足りない模様。。。
.slice()演算子っていわれて「ははーん、なるほどね！？(なんのことかは分かっていない)」みたいになる
パフォーマンス以外にも「何が変更されたのか」ということが分かりやすくなるので良い
Congratulations! You now have a working tic-tac-toe game.
And now you know the basics of React. So you’re probably the real winner here.
この文章好き。なんというかテンション上がる
コード読み解き始めてからはここのサイトの図を使っていた
https://qiita.com/mpyw/items/a816c6380219b1d5a3bf
なんとなーくこのサイトがイメージしやすかったので、この内容のように書いていって見る
https://qiita.com/kiita312/items/b001839150ab04a6a427
とココまで書いてきて、色々足りないことだらけ
・いわゆるHTMLを書くところはどこなの？
・npm startで起動できるけど、reactだけ利用して、既存システムの見た目をかっこよくするには
そもそもその用途としてreactは適しているのか？
・サーバー起動してって、何起動してるんだ
つーか自分Webアプリケーション開発はしているけど、基盤部分は何しているか分からん
この辺はいままでしらなくていいかーって思ってきたけど、そろそろ知らないと
まずこないだ落としたもので簡単な画面だけ作ってみよう。本当に最小部分
・Qiitaみたいに上に枠がある
・左側にパネルがあってメニューを選択できる
・メニューを選択したら選択できるものが表示されて、それを選択すると画面が切り替わる
なんかこんなテンプレ探せばすぐでてきそうなものだけど、
前提が
今までJava開発はしてきた。Cもほんのちょっと触ったことがある
JavaScriptは本当にちょっとだけ
Ruby on Ralisはちょっとだけ
HTMLとかCSSはなんとなーくしか。まぁほぼ分からないわけで。。。
くらいだけどちょっと開発してみようかと！
どれくらいで出来るようになるのかな
つーかJavaも今まで5年くらいもりもり開発してるけど、「あーなんとなく分かった気がするわー」
ってなるまでに1年くらいかかったからそんなにすぐに出来るようになるとは思わないけど、
やらなくて良い理由にはならないし。
それが出来たらMaterialUIとかつかっちゃうぞー
まずはまっさらなもの展開する
ヘッダっぽいの作る
https://material-ui.com/demos/drawers/#mini-variant-drawer
MaterialUIにそれっぽいのがあるので流用。伴いこのタイミングでMaterialUIのインストール
npm install @material-ui/icons
npm install @material-ui/core
貼り付けて実行したら「TypeError: instance.render is not a function」
書いていない知らんところでエラーが出まくる。どういうことだ、、、react-domとか書いたことないぞ、、、？
npm install –save react-dom
このエラーメッセージで検索しまくると、情報は出てくるけど、大抵問題なさそうな感じ、、、？
http://kubotti.hatenablog.com/entry/2016/04/17/134656
import ReactDOM from ‘react-dom’;
ReactDOM.render(<App />, document.getElementById(‘root’));
とかって書いてるもんなー
ん？なんか一旦壊れてる･･･？
自分で書いたところ消しても動かない
はじめからやりなおそ！！！
MaterialUIは一旦つかわないで行こ。。。
問題の切り分けが出来ないわ、、、
ちょっとずつ意味が分かってきた
App.jsは画面作ってるトコっぽい。
動的に何か作成するなら動的に書くし、そうでないなら(初期の立ち上げ直後みたいに)直接タグを書いている
ToDoの場合
import Todo from ‘./containers/Todo’;
の先のTodoを呼び出していて、それを描写している
class App extends Component {
handleDrawerOpen = () => {
alert(“クリックされました”)
};
render() {
return (
<div className=”App”>
<Toolbar >
<IconButton
color=”inherit”
aria-label=”Open drawer”
onClick={this.handleDrawerOpen}
>
<MenuIcon />
</IconButton>
<Typography variant=”h6″ color=”inherit” noWrap>
ツール作成中
</Typography>
</Toolbar>
<Todo />
</div>
);
}
}
こんな感じにすると、画面上部にメニューがでて、クリックしたらalertが出るようになる。
次はどうやってクリックしてメニューを開くかですね。。。
いっぽずついっぽずつ
つーかちょっとずつコピーしていって、
「あれ？順調に貼り付けられるよ･･･？」ってなって
「ぜんぶ貼り付けちゃえ」
ってやったら全部貼り付けることが出来た。
なんで動かなかったかは正直謎。
一旦今日は動いたのでOKということにしておこう。
明日は画面のページ遷移について実装していきましょう。。。
コメント