React.js
以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、Next.js上にFirebaseでStr…
以前まとめたこちらの記事の続きとなります。 nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、タイトルの通り、StripeとFirestoreとFirebase Authent…
Next.js（React）の関数コンポーネントにライフサイクルフックであるcomponentDidMount的な役割を持つ何かを実装したいときには、 useEffect(() => { ... } , []); が使えます。以下は一例です。 import { db } from '../lib/db'; import React, { useEffect…
Next.js（React）でreact-stripe-elementを実装した際に、フォームだけが表示されないという現象が起こりました。これは、Headタグ内で読み込んでいるstripe-jsのバージョンが不適合であったということでした。 <script src="https://js.stripe.com/v3/"></script> を実装しなければならないところ <script src="https://js.stripe.com/v2/"></script> を実装して…
こんなエラーが出た場合、 Invariant Violation: React.Children.only expected to receive a single React element child. 意味としては、「Reactのコンポーネントは、1つしかエレメントを内包できません」という意味となります。 return ( <StripeProvider stripe={this.state.stripe}> <Head> <script src="https://js.stripe.com/v2/"></script> </Head> <Header /> <div> <h2>{det…</h2></div></header></stripeprovider>
Vue.jsを使用している際にもVuexやVue Routerなどで、 Stateを全てのコンポーネントに渡すことができるという機能がありましたが、 そのReact版がReact Reduxです。大まかに、React Reduxを使ったState/Store/Actionの設定まとめをしていきます。 React Redu…
Reactにはpropsとよく似たものにstateという機能があります。 こちらもコンポーネントに対して値を渡すことができる機能ですが、 propsが静的な値（変化しない値）である一方、stateはコンポーネント内で値を変更させることができます。以下がその使用例です…
propTypesによって、propsから受け取る値のタイプを定義することができます。 エラーは出ませんが、警告を出してくれます。 バリデーションのような感じで使えます。 import React from 'react'; import PropTypes from 'prop-types'; // インポートする con…
propsを設定したコンポーネントをレンダリングする際に、デフォルトで値をもたせたいという場合があります。そのような際には以下のようにdefaultPropsという設定を行いましょう。 import React from 'react'; const App = () => { const details = [ {name:…
未だに使い慣れていないJavaScript版foreachのmap関数。 たまたまpropsと組み合わせて使用する機会があったため、記録として残します。 import React from 'react'; const App = () => { // ①リストレンダリングするためのオブジェクトを用意 const details …
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 Hot Module Replacementの有効化 ReactにおけるHot Module Re…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 webpack-dev-serverとは？ webpack-dev-serverを導入しよう。…
webpack-dev-server起動時に以下のようなエラーが出てしまいました。 ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In …
webpackを使い慣れていないので、こんな警告が出て、ビルドエラーが出てしまいました。 There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. Manually instal…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 ローダーとは 標準設定のwebpackはJavaScriptファイルのバン…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 webpackとは webpackを使ってみる webpackをwatchモードにし…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 ライフサイクルとは？ ライフサイクルメソッドの分類 compone…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 イベントの導入 JavaScriptでおなじみのイベントですが、JSX…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 Stateとは Stateを使ってみる Stateとは 前回のチュートリア…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 Propsとは propsを使用してみる 複数の値をpropsで渡す props…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 コンポーネントとは？ コンポーネントの作成 実際にコンポー…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 JSXとは？ JSXをコンパイルしよう Babelの導入とコンパイルま…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 create-react-appを使おう 依存パッケージのインストールとロ…
あまり話題になっていない感じだったので、こちらの記事を日本語訳しました〜！ laravel-news.com イントロダクション Laravel6.0はLTS！ セマンティックバージョニング 認可レスポンスの改善 「Gate :: inspect」メソッド Gate::inspectの一例 Job Midllewa…
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 作業用ディレクトリの準備 Reactのインストール npmを利用す…
$ npm install -g create-react-app をしたにも関わらず、 $ create-react-app test2 bash: create-react-app: command not found となってしまう。この問題を解決するには、以下のコマンドを使用することができます。 $ npx create-react-app my-app Happy …
$ npm start > sigfox-react-visualizr@0.1.0 start /home/ec2-user/environment/sigfox-react-visualizr > ./bin/start.sh sh: ./bin/start.sh: Permission denied npm ERR! code ELIFECYCLE npm ERR! errno 126 npm ERR! sigfox-react-visualizr@0.1.0 sta…
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>こんにちは、にんじゃわんこさん！</h1> //JSのonClickを仕込む場合は、対象タグ内に記述。アロー関数でイベント指定ができる。 <button onClick={()=> {console.log('ひつじ仙人')}}>ひつじ仙人</button> <button onClick={()=></button></div>…
import React from 'react'; class App extends React.Component { render() { // renderメソッド内で関数を定義できる。書き方はJavascriptと同様。 const name = "にんじゃわんこ"; const imgUrl = 'https://s3-ap-northeast-1.amazonaws.com/progate/shar…
App.jsx //Reactを使うために書く決まり文句 import React from 'react'; //React.Componentを継承（extends）してコンポーネントといわれる「パーツ」を作る。extends React.Componentは決まり文句。 class App extends React.Component { render() { retur…
