tyoshikawa1106のブログ

- Force.com Developer Blog -

React

SFDC:Lightningコンポーネント開発でReactが使えるLightning Containerの使い方のメモ

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

Heroku:create-react-app-buildpackを試してみました

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

React:react-routerのページ遷移とスクロールトップ

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

React:classNameの指定例

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

React:react-routerとanchor link

React開発のメモ。

SFDC:React開発でJSforceの実行結果をState変数にセットする方法

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

React:Unknown DOM property cellpaddingエラー

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

React:mochaのテストとSassのSyntaxエラー

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

React:Create React Appコマンドを試してみました

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

SFDC:Salesforce Development 2016 - Part 3

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

React:TDD(テスト駆動開発)の始め方について勉強しました

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

React:コンポーネント間で値の連携するときの流れ

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

React:『extends React.Component』についてのメモ

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

React:React.createClassについてのメモ

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

React:Webpackのscss-loaderを試してみました

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

React:Webpackのcss-loaderを試してみました

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

SFDC:Reactサンプルコードメモ

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

React:Webpackで複数のJSファイルをビルドする

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

React:propsをつかったcomponentへの値渡し

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

React:render処理とModule build failed: SyntaxError

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

SFDC:React×Visualforceを試してみました

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

React:webpack.config.jsについて

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

React:routes.jsでルーティングの管理

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

SFDC:react-lightning-design-systemをnpm installで組み込む手順

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

React:React Router Tutorialを試してみました

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

Heroku:React×Reduxのサンプルコードの動かし方

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

React:ReactとAuth0のメモ

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

React:React Starter Kitでページを追加する手順

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

React:Reduxのサンプルコードを試してみました

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

React Redux Starter Kitを試してみました

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