第3回 Reactハンズオン 初等部編

atsuco @atsuco_02

再開しますよ〜まずはリンクの設定！ #frontend_temple

atsuco @atsuco_02

<Link to="/"></Link>で囲むと、aタグで吐き出されてリンクが通ります #frontend_temple

atsuco @atsuco_02

わーい！リンク繋がったよー！ #frontend_temple

atsuco @atsuco_02

「みなさん空調は大丈夫ですか？私は寒いです」 #frontend_temple

atsuco @atsuco_02

JSXはJSの普通のコメントがかけません(´・ω・`) #frontend_temple

atsuco @atsuco_02

JSXの中では{}で囲むとJSとして処理されるので、更にその中でJSのコメントを書きましょう #frontend_temple

atsuco @atsuco_02

理想としてはajaxでデータを取ってきたいけれど、今日はお時間がないので擬似的に( ˘ω˘) #frontend_temple

atsuco @atsuco_02

list/に用意したデータの一覧が表示されるようになりました #frontend_temple pic.twitter.com/Hie031rNeg

拡大

atsuco @atsuco_02

最後に、リストの詳細を表示するcomponentを作って表示しますよ！ #frontend_temple

atsuco @atsuco_02

scripts/index.jsでdetailのcomponentを呼び出して、Listの入れ子にしますよ #frontend_temple

atsuco @atsuco_02

うごいたー！ #frontend_temple pic.twitter.com/SdgqkIcCi2

ナユ @nayucolony

react-router、割と直感的に使えるきもちがあるな〜 #frontend_temple

atsuco @atsuco_02

仕組みがわかると、結構さくさくできそう！( ˘ω˘) #frontend_temple

atsuco @atsuco_02

hugaなのかfugaなのか問題 #frontend_temple

atsuco @atsuco_02

いい匂いがしてきました( ˘ω˘) #frontend_temple

atsuco @atsuco_02

ピザの匂いで1匹釣れた #frontend_temple pic.twitter.com/VlLfhaVIMn

拡大

ナユ @nayucolony

CSS in JS(ぼそっ) #frontend_temple

atsuco @atsuco_02

会場提供枠でDog Huggyの宣伝です #frontend_temple pic.twitter.com/syWFLnXsXV

拡大

atsuco @atsuco_02

懇親会です #frontend_temple pic.twitter.com/DyVjFzpEbT

拡大