Lightningコンポーネント開発でReactが使えるLightning Containerの使い方のメモです。 Lightning Container Component: Building Components with React, Angular, and Other Libraries | Developer Force Blog 環境構築の手順から紹介されています。 実際…

React開発の雛形を用意できるcreate-react-appコマンドですが、これで生成したファイルをHerokuに簡単にデプロイできるcreate-react-app-buildpackについての記事が公開されていました。 使い方 アプリの生成からHerokuデプロイまでに実行するコマンドです。…

Reactをつかって開発をするときSPAになるように実装するときはreact-routerを利用することで簡単に対応できます。 便利なライブラリですが、ページ遷移時にスクロールの位置が維持される仕様がありました。AngularJSのときは『autoscroll』を宣言すればトッ…

classNameを動的に指定する方法のメモ。もっといい方法あるのかな。 var sldsTabClass = 'slds-tabs--default__item slds-text-heading--label'; var homeTabClass = this.props.currentpage === 'Home' ? 'slds-active ' + sldsTabClass : sldsTabClass; va…

React開発のメモ。

ReactのState変数に値をセットするときは『setState』を使います。 this.setState({ user : res }); JSforceからSalesforceAPIを実行して結果をセットしたいときは次のように書けばいいのかなと試してみました。 conn.identity(function(err, res) { if (err…

Reactの開発を試している時に次のエラーに遭遇しました。 Warning: Unknown DOM property cellpadding. Did you mean cellPadding? Warning: Unknown DOM property cellspacing. Did you mean cellSpacing? そのときの処理はこんな感じです。 テーブルタグで…

Reactで開発するときにMochaなどを利用することでコンポーネントのテストを実装することができます。ちょっと前に海外のDeveloperが公開した記事を参考にサンプルコードを試してみたところ、正しくテストを動かすことができました。 ですが、自分で用意した…

Reactのアプリ開発に必要な雛形ファイルを生成できる『create-react-app』コマンドを試してみました。 Create Apps with No Configuration | React Qiitaに投稿されているのを見て知ったコマンドです。 使い方 コマンドインストール 最初にnpm installをつか…

Salesforce Development 2016 - Part 3です。前回はAngularJSをつかってVisualforceページを開発するときの流れを確認しました。今回はReactをつかったVisualforceページ開発について確認したいと思います。 前回のPart2はこちら。 はじめに AngularJSは必要…

ReactのTDDについて環境構築から解説している記事がありました。テストできる環境の構築方法は覚えておかないといけないことなのでこの記事を参考に試してみました Quikをインストール Quikを使うと手動でビルドを設定することなく即座に実行することができ…

React開発時にコンポーネント間で値を連携するときの流れについてです。勉強用にこんな感じのコンポーネントをつくってみました。 動画時点では、CounterItemコンポーネントひとつだけで値の表示とカウントアップ/ダウンの処理を行うようにしていましたが、…

Reactチュートリアルをやってみて『React.createClass』をつかってコンポーネントをつくっていけばいいことを確認できたのですが、いろんなサンプルコードをみていると『extends React.Component』という書き方がありました。 これは何が違うのかなと検索し…

Reactの勉強を始めるときはReactチュートリアルを進めると、実際に動くアプリを作ることができてわかりやすいです。 チュートリアル | React チュートリアルでは次のJS処理でコンポーネントの作り方を確認できます。 example.js // Commentコンポーネント va…

Webpackのcss-loaderの使い方を確認して各コンポーネントごとにCSSファイルを読みこませる方法について確認できました。 でもせっかくなので、ただのCSSではなくSassをつかった開発をできるようにしたいので、その方法についても確認してみました。css-loade…

Webpackのcss-loaderを試してみました。次のコマンドでインストールします。 $ npm install css-loader style-loader --save-dev 追記 本番環境ではビルド後のファイルを使うのでloader系は-devオプションでdevDependenciesにインストールしておく方がいいみ…

Reactのサンプルコードをみれないかなと思い、GitHubで「salesforce react」と検索してみました。

Reactでは以下の流れで開発する感じだと思います。 各コンポーネントを作成 App.js的なコンポーネントで各コンポーネントをまとめる App.jsを呼び出すビルド対象のJSファイルを用意 JSファイルをWebpackでビルドしてHTMLファイルで読み込む 各コンポーネント…

Reactで開発するときは、共通部品をコンポーネント化して開発していくと思います。コンポーネント化するときは、propsをつかって値渡しすることが可能です。 まずコンポーネント側のサンプルです。{this.props.title}と宣言することで呼び出し元から渡される…

Reactでこういう処理を書いて画面に表示するところまで確認できました。 他のタグを追加していこうとpタグを追加してみたところ『Module build failed: SyntaxError:』となってしまいました。 renderでreturnできる要素はひとつだけとなっているためです。な…

ReactをつかったVisualforceページの開発を試してみました。Reactをつかって開発するときは以下の対応が必要になりました。 ホームディレクトリのパス修正 index.htmlなどのホームディレクトリのパスは通常『/』になっていると思います。Visualforceページの…

Webpackの使い方をあまり理解できていなくて困っていたのですが、react-router-tutorialのサンプルコードをみて少し理解できたので、そのメモです。 Reactの開発ではこんなJSファイルをつくっていくと思います。 ですが、HTMLファイルでそのJSを直接読み込む…

react-routerをつかえばページのルーティングが簡単に対応できます。 index.jsにそのままimportして利用することもできますが、routes.jsを用意して処理をまとめることでより開発がやりやすくなります。 index.js側で各ページをimportしていた部分は次のよう…

react-lightning-design-systemを自分のプロジェクトに組み込む手順についてです。 https://github.com/stomita/react-lightning-design-system react-lightning-design-systemはnpmパッケージで公開されているので、npm installコマンドで簡単に利用できる…

Reactで開発するときビューのルーティング部分はreact-routerが便利ということでした。 どうやって使えばいいのかなとGithubを確認したところチュートリアルアプリが用意されていたので、ちょっと試してみました。 Lesson 1 - Setting Up Clone the Tutorial…

Reduxのサイトに勉強に使えるサンプルコードがたくさん紹介されています。 Read Me | Redux サイトに記載されている手順どおりに進めることでローカル環境で動かすことができました。 ローカル環境で動くことを確認できたので、Herokuで動かしてみようとデプ…

ちょっと気になる記事があったのでメモ。もう少しReact理解できたら読もうと思います。

React Starter Kitで開発をはじめるときの新しくページを追加するときの手順についてです。 React Starter Kit ページファイルですが、Jadeをつかったページ開発とReact Routesをつかったページ開発が用意されているみたいです。 基本、React Routesの方でペ…

Reactで開発するときですが、FluxとかReFulxとかReduxとかいろいろな開発手法が用意されています。何から始めればいいのか...という問題を解決できるベストプラクティス的なサンプルコードがもっと手に入らないかなと思っていたところ、Reduxのサイトにサン…

少し前にReact Starter Kitを試してみたのですが、ReduxバージョンもGitHubに公開されていたので、こちらも試してみました。 ReadMe.mdに記載がありますが、次の手順で動かすことができます。 $ git clone https://github.com/davezuko/react-redux-starter-…