Reactをはじめてみることにしました

たまたまTwitterを眺めていたら良さげなTweetを見つけて、新宿から目黒の電車の中でGetting Started with React – An Overview and Walkthroughを読んでたら、これよさそうだな、と。

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

Screen Shot 2018-08-23 at 10.25.58//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