タグ

tutorialとreactに関するkathewのブックマーク (4)

  • ざっくり React チュートリアル - Qiita

    !!!Caution!!! (2019/8/15追加) ここに書いてあるやり方には、今は推奨されていない古い書き方があります(Class Component、propTypesなど)。 近年、推奨されているやり方でまとめたものが見たい場合はこちらを御覧ください。 https://qiita.com/pullphone/items/fdb0f36d8b4e5c0ae893 とりあえず ReactDOM.render() 基的にルートポイントとなるスクリプト(例:app.js)を用意して、そこからまたルートとなる Component(Container とも呼ばれる)を呼んだり、Redux の Store を作って Provider と合体させたり(というのは次回書く予定)というのがセオリーらしい。 で、ReactDOM.render() を呼ぶことで、呼び出した HTML の決められた箇所

    ざっくり React チュートリアル - Qiita
  • ReactJS入門@ES6:Redux編 - Qiita

    対象者:Reactの基を理解している人 / Reduxについて勉強している人 前:ReactJS入門@ES6:ReactRouter編 次:未定 まえがき Reduxの目的はStateを一元管理することです。 素のReactでは、Stateはコンポーネントが管理します。 コンポーネントの数が多くなり、親から子、子から子へとStateを継承したり、 コンポーネント間の連携などを考えだすと、Stateをどこかで一元管理し、 コンポーネントはイベントを受け、Stateを変更する命令を出すことに専念したくなります。 その仕組と制約を実現するのがReduxの役目だと、私は考えています。 まずはReduxを使わないカウンターをつくってみる カウンターをつくりましょう、カウンター。 画面にカウント回数と、プラスボタンとマイナスボタンが表示されているだけのやつです。 class Counter exte

    ReactJS入門@ES6:Redux編 - Qiita
  • 電卓アプリで学ぶReact/Redux入門(実装編) - Qiita

    はじめに React.jsとReduxを理解するために簡単な電卓アプリを作成しました。 今回はWelcome to Reactから始まり、実際にReact/Reduxで電卓アプリを作るまでの手順を説明したいと思います。 特にReduxのデータフローについては言葉や図だけではよくわからないと思うので、電卓アプリを実際に作成することで少しでも理解の助けになればいいなと思っております。 今回の記事では実装がメインとなっているため、React.jsやReduxの概念などについては省略しております。基礎的な部分を理解したい方は「Reduxの電卓アプリで学ぶReact/Redux入門(基礎知識編)」を読んでからこちらの記事を読むと理解がしやすいかと思います。 電卓アプリはcreate-react-appをベースに作成し、簡単のために加算の機能のみ作ります。 create-react-appについて ま

    電卓アプリで学ぶReact/Redux入門(実装編) - Qiita
  • 今からはじめるReact.js〜準備〜 - Qiita

    仕事を進める上でReact.jsについて教える機会が増えてきました。 React.jsがなんなのかは、各自ググっていただくとして、基的なところで 何をどうやったらReact.jsでサービスが実装できるのか? という点について理解できるよう、チュートリアルを作っていきたいと思います。 前提 ・ES5ベースで実装。 ・npmを利用して必要なライブラリを追加。 ・JSXのコンパイルはreactifyで行う。 ・サーバサイドはnode.jsで実装 ・DBはpostgreSQL(Herokuにデプロイするため) 上記、各単語は必要になった時点で触れていきますが、よくわからなければ調べてください。 ※React.jsの技術情報を調べていると、よくES6ベースで書かれたソースをよく見るのですが、現状はブラウザ自体が一部しか対応してなかったり、知識レベルがバラバラな複数の技術者とチームで開発するというこ

    今からはじめるReact.js〜準備〜 - Qiita
  • 1