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

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

“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

これからボチボチ写経していきますかね、と。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする