React自習｜かずさん@コミュニティ・エンジニア

kintone-React自習 11日目「React-kintone連携チュートリアルの作成」スタイルの追加

入力フォームにスタイルを当てます。 App.tsxHTML部分のマークアップです。 import "./styles.css";・・・ <div className="formBoxes"> <label className="formLabel">納品書番号入力：</label> <div> <input className="input"　　　　　　　

kintone-React自習 10日目「React-kintone連携チュートリアルの作成」フォームバリデーションの追加

入力フォームにバリデーションを追加します。バリデーションの追加入力フォームの値の有無を判別するバリデーションを追加。値が未入力の場合は、検収確認ボタンをdisabled=trueに設定します。 Validation.ts バリデーションは別ファイルからexportします。 interface Quantity { deliveryQuantity: number, // 納品数 orderingQuantity: number // 発注数}export cl

kintone-React自習 9日目「React-kintone連携チュートリアルの作成」入力フォームからkintoneのレコードを更新する

kintoneから取得したデータを修正して更新をかける。 4. 入力フォームからkintoneのレコードを更新するフォームに入力した値でkintoneのレコードを更新します。 kintoneレコードの更新kintone-rest-api-client モジュールを利用して、フォームの入力値をkintoneに登録します。・・・import { KintoneRestAPIClient } from "@kintone/rest-api-client"・・・ // ki

kintone-React自習 8日目「React-kintone連携チュートリアルの作成」入力フォームにkintoneのレコードを表示する

自習 6日目で作成した入力フォームにkintoneのレコードを取得して表示する。 3. 入力フォームにkintoneのレコードを表示するkintone-Reactの開発環境を設定する kintone-Reactの開発環境は、Goqoo on kintoneを利用します。下記を参照。流れだけ以下にまとめ。適当なディレクトリで `npx goqoo new プロジェクト名` する。プロジェクト名ディレクトリに `cd` する。 `git commit -m "

kintone-React自習 7日目「React-kintone連携チュートリアルの作成」kintoneアプリの作成

Reactのフォーム画面を作成し、kintoneのレコードを表示・更新するチュートリアルを作成する。 2. kintoneアプリを作成するkintoneアプリを作成します。フィールド構成 [フィールド名]ー[フィールドタイプ]ー[フィールドコード]の順です。 [納品書番号]ー[文字列（１行）]ー[number_of_delivery_note] [納品ステータス]ー[ドロップダウン（未納・完納・一部納品）]ー[status_of_delivery] [品名]ー

kintone-React自習 6日目「React-kintone連携チュートリアルの作成」入力フォームの作成

Reactのフォーム画面を作成し、kintoneのレコードを表示・更新するチュートリアルを作成する。チュートリアル構成作成するチュートリアルの構成。 1. 入力フォームを作成する 2. kintoneアプリを作成する 3. 入力フォームにkintoneのレコードを表示する 4. 入力フォームからkintoneのレコードを更新する 1. Reactで入力フォームを作成するHTMLの入力フォームを作成する。 CodeSandboxなどを使ってオンラインでデザインを確

kintone-React自習 5日目「kintoneアプリ連携」

「How To Build Forms in React」の2日目。チュートリアルを最後までやって、その後kintoneアプリにチュートリアルで作成したReactのフォームからデータ登録する。 Submitボタンにイベントハンドラの追加Submitボタンを押下した時のイベントをキャプチャして動作する仕組みを実装する。・form要素にonsubmitプロパティを追加。・onsubmitプロパティにイベントハンドラを追加。 <form onSubmit

kintone-React自習 4日目「ゲームの完成と次のチュートリアル開始」

1~3日目まで取り組んだゲームチュートリアルの完成と、次のチュートリアルの選定。ゲームの完成「ゲームを完成させる」の項を入力しながら確認する。特に特別なことは無いので省略。その他のReactチュートリアル次のステップに進むためのチュートリアルを選定。業務用のアプリにReactを利用する為に、フォーム関連のチュートリアルから下記を選択した。今後作成したいReactアプリの内容にあっていそうなので試してみる。「How To Build Forms in Re

kintone-React自習 3日目「チュートリアル：React の導入」

「チュートリアル：React の導入」の自習です。チュートリアルの準備index.cssファイル作成 https://codepen.io/gaearon/pen/oWWQNa?editors=0100 をコピー Game.jsx 作成チュートリアルの index.js を修正。ファイル名はGame.tsxに変更。 import * as React from 'react'・・・export default Game App.tsx 変更・・・impor

kintone-React自習 2日目「コード分割」

コンポーネントをファイルに分割します。 like_button.js下記の通り変更。.jsは.jsxに変更。 import * as React from 'react''use strict';・・・ render() { if (this.state.liked) { return (<div>You liked this.</div>); } return ( <div> <button onClick={()

kintone-React自習 1日目「既存のウェブサイトに React を追加する」

「既存のウェブサイトに React を追加する」Reactのチュートリアル「既存のウェブサイトに React を追加する」をkintoneのカスタマイズビューに表示します。 https://ja.reactjs.org/docs/getting-started.html#add-react-to-a-website https://ja.reactjs.org/docs/add-react-to-a-website.html 環境kintone-react の環境は Go

React自習

フォローしませんか？

記事一覧

kintone-React自習 11日目「React-kintone連携チュートリアル の作成」スタイルの追加

kintone-React自習 10日目「React-kintone連携チュートリアル の作成」フォームバリデーションの追加

kintone-React自習 9日目「React-kintone連携チュートリアル の作成」入力フォームからkintoneのレコードを更新する

kintone-React自習 8日目「React-kintone連携チュートリアル の作成」入力フォームにkintoneのレコードを表示する

kintone-React自習 7日目「React-kintone連携チュートリアル の作成」kintoneアプリの作成

kintone-React自習 6日目「React-kintone連携チュートリアル の作成」入力フォームの作成