たまたまTwitterを眺めていたら良さげなTweetを見つけて、新宿から目黒の電車の中でGetting Started with React – An Overview and Walkthroughを読んでたら、これよさそうだな、と。
Well, I finally did it. I wrote about #ReactJS. It’s long, but I hope you like it. https://t.co/ZG2XJPQbBe
— Tania Rascia (@taniarascia) August 20, 2018
https://platform.twitter.com/widgets.js
“HTMLとJavaScript混ぜちゃ駄目なんじゃなかったっけ？Reactって何がイイわけ？”というところからはじまって、元々ピュアなJavaScriptやjQueryをやってた人目線で何でReactがいいのか？っていうのを解説してくれる、と。
とは言え、JSとかDOMとかに全く馴染みがない人だと辛いかもしれないので、HTML, CSS, DOM, ES6のシンタックスとか, そしてNode.jsとnpm辺りは事前に知ってた方がイイかな的な感じ。
最終的なゴールとしてはReactのコンセプトを理解して、Babel, Webpack, JSXといったコンポーネント、そしてprops, state, lifecycleを学べて、コレらを使ってシンプルなReactアプリを作って見ましょう、といったところ。
最終的な成果物はGithubに載っています。
ってことで、とりあえずGithubにリポジトリ作ってHello Worldしたindex.htmlを作りました。↓こんな感じのコード。
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<h1>Hello world!</h1>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
からの、↓こんな感じでFacebook謹製のReactアプリを作るツールを入れて、localhost:3000でそれっぽい画面が表示されるところまで。
$ npx create-react-app react-tutorial $ cd react-tutorial $ npm start
//embedr.flickr.com/assets/client-code.js
これからボチボチ写経していきますかね、と。
amzn_assoc_ad_type =”responsive_search_widget”; amzn_assoc_tracking_id =”diary045-22″; amzn_assoc_marketplace =”amazon”; amzn_assoc_region =”JP”; amzn_assoc_placement =””; amzn_assoc_search_type = “search_widget”;amzn_assoc_width =”auto”; amzn_assoc_height =”auto”; amzn_assoc_default_search_category =””; amzn_assoc_default_search_key =”react”;amzn_assoc_theme =”light”; amzn_assoc_bg_color =”FFFFFF”; //z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP
