「React.js」react-autocomplete-inputをインストールしてオートコンプリートを実装する
環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0
React 18.2.0
操作方法
1.react.js環境を構築します。 ...
「React.js」react-tooltipをインストールしてツールチップを実装するサンプル
環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0
React 18.2.0
操作方法
1.react.js環境を構築します。 ...
「React.js」ライブラリreact-menuをインストールして実装するサンプル
環境
Windows 11 Pro 64bit
node v16.16.0
npm 8.11.0
React 18.2.0
操作方法
1.react.js環境を構築します。 ...
「Windows10」create-react-appでプロジェクトを作成、実行する方法
環境
Windows 10 Home 64bitnode v17.1.0npm 8.19.1操作方法
1.プロジェクトを作成します
「reactsample」というプロジェクト名を作成します。
「React」You are running `create-react-app` 4.0.3, which is behindの解決方法
環境
Windows 10 Home 64bit
node v17.1.0
npm 8.1.2
エラー現象
You are running `create-react-app` 4.0.3, ...
「React.js」ライブラリreact-datetimeをインストールして日付カレンダーを実装する
環境
Windows 10 Home 64bitnode v16.17.0npm 8.15.0React18.2.0react-datetimeをインストールする手順
1.demoprojectという名前でプロジェ ...
Windows10にReact.js バージョンを確認する方法
環境
Windows 10 Home 64bit
node v16.17.0
npm 8.15.0
操作方法
1.Reactプロジェクトに移動します
Windows10にReact.jsをインストールする方法
環境
Windows 10 Home 64bit
node v16.17.0
npm 8.15.0
React.jsをインストールする手順
1.create-react-appのインストール ...
Windows11にReact.jsをインストールする方法
環境
OS Windows 11 Pro 21H2
node v16.16.0
npm 8.11.0
操作方法
1.create-react-appのインストール
[React]map()で新しい配列を生成する
書式
配列名..map((変数名) => <p>{変数名}</p>)
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、
その結果からなる新しい配列を生成 ...
「React」extendsでES6のクラスを継承する
書式
class 子クラス extends 親クラス{ constructor(変数1,変数2,変数3,xxx) {/*親クラスのメンバー変数1と変数2を引用*/super(変数1,変数2); 処理コード }}使用例
「React」クラスにメソッドを定義するサンプル
書式
Class クラス名 { メソッド名() { return xxx } }使用例
<!DOCTYPE html><html><body><script>/*クラス ...「React」ES6クラスのサンプル
コンストラクタの形式
class クラス名 { constructor(name) { this.変数名 = name; }}使用例
<!DOCTYPE html><html><body ...「React ES6」クラスのメソッドを使うサンプル
書式
class クラス名{
メソッド名(){xxx}
}
使用例
「React ES6」クラス(class)とオブジェクト(object)を生成するサンプル
書式
constructor(引数名)
使用例
「React入門」selectドロップダウンメニューのonchangeイベントを使うサンプル
書式
handleChange(event){ some code}
handleSubmit(event) {some code}
<select value={this.state.value} on ...
「React入門」props のデフォルト値を利用するサンプル
書式
関数名.defaultProps = {
name: ‘xxx ‘
};
defaultProps というプロパティを割り当てることで、props に値が渡されなかった際の ...
「React入門」シンプルなコンポーネントのサンプル
書式
{props.変数名}
React コンポーネントを作成するには render() メソッドを実装します。
使用例