propsを設定したコンポーネントをレンダリングする際に、デフォルトで値をもたせたいという場合があります。そのような際には以下のようにdefaultPropsという設定を行いましょう。 import React from 'react'; const App = () => { const details = [ {name:…
未だに使い慣れていないJavaScript版foreachのmap関数。 たまたまpropsと組み合わせて使用する機会があったため、記録として残します。 import React from 'react'; const App = () => { // ①リストレンダリングするためのオブジェクトを用意 const details …
Hiraku Morishima built the [HanzOn] app as a Free app. This SERVICE is provided by Hiraku Morishima at no cost and is intended for use as is.This page is used to inform visitors regarding my policies with the collection, use, and disclosur…
シンプルかつ機能的なメモアプリを作成しました。 直感的に操作することが可能で、思いついたことをすぐに記録することができます。現在iPhone、iPadに対応しています。iPhone上の画面iPad上の画面 今後、デザイン、機能面での充実を予定しています。
Next.jsにMaterial-UIを組み込み、ボタン表示をするのがとても簡単だったので備忘録として残します。 $ npm install @material-ui/core $ npm run dev import Button from '@material-ui/core/Button'; const Index = () => ( <Button variant="contained" color="primary"> Hello World </Button> ); export defau…
Next.jsのプロジェクトにMaterialize.cssを組み込みたい場合は以下のような設定に。Next.jsの設定は以下の記事にて解説しています。 nekorokkekun.hatenablog.com import React from 'react'; import Link from 'next/link'; import Head from 'next/head'; …
Next.jsでタグを設定する簡単な方法は以下の通りです。 import Link from 'next/link'; ★ class Header extends React.Component { render() { return ( <React.Fragment> <Head> ★ <title key="title">タイトル</title> </Head> ★ </React.Fragment> ) } } export default Header;
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 server.jの作成 next-route…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 目標の確認 非同期通信で読…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 スタイリングを行おう SCSS…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 propsの基本的な使い方 pro…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 シェアするComponentを作成…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 Index.jsをSPA構成にしてみ…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 Componentを使ってみる 各…
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。 前提 Next.jsプロジェクト…
こちらの記事は、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 …
こちらの記事は、React入門チュートリアルです。Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。 プラグインとは？ プラグインの導入 プラグインとは？ 前回の…
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…
