2018年06月22日

[ts] 'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。

TypeScript と React で悪戦苦闘していると「[ts] 'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。」とのエラーが

import { Component } from 'react'


を以下のように変更すると直りました。

import React, { Component } from 'react'
posted by ねこまんま at 12:02 | Comment(0) | React | 更新情報をチェックする

2018年06月13日

Reactでasyncコンポーネントを作成して非同期で読み込みを行う

以下のようなコンポーネントをAsyncComponent.jsなどとして作成
async / awaitを利用して呼び出し時に引数で指定されたコンポーネントの呼び出しを行います。

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);

this.state = {
component: null
};
}

async componentDidMount() {
const { default: component } = await importComponent();

this.setState({
component: component
});
}

render() {
const C = this.state.component;

return C ? <C {...this.props} /> : null;
}
}

return AsyncComponent;
}


ルーティング時に呼び出したいコンポーネントを利用できるようにしておきます

render(
<div>
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Switch>
<Route
exact
path="/a"
component={asyncComponent(() =>
import('./App1')
)}
/>
<Route
path="/b"
component={asyncComponent(() =>
import('./App2')
)}
/>
<Route
path="/c"
component={asyncComponent(() =>
import('./App3')
)}
/>
<Redirect to="/a" />
</Switch>
</div>
</ConnectedRouter>
</Provider>
</div>,
document.getElementById('root')
);


via : https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
タグ:async REACT await
posted by ねこまんま at 12:38 | Comment(0) | React | 更新情報をチェックする

Reactのreact-helmet-asyncでhead情報を挿入

react-helmet-asyncを利用するとhead内に様々な情報を挿入できる


import * as React from "react";
import { render } from "react-dom";
import Helmet, { HelmetProvider } from "react-helmet-async";

import Hello from "./Hello";

const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};

const App = () => (
<HelmetProvider>
<div style={styles}>
<Helmet>
<title>Hello World!!</title>
<link rel="canonical" href="https://www.tacobell.com/" />
</Helmet>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {"\u2728"}</h2>
</div>
</HelmetProvider>
);

render(<App />, document.getElementById("root"));


HelmetProviderで包んでおけばHelmetで包んだ要素内でhead要素に入れることができる
posted by ねこまんま at 01:08 | Comment(0) | React | 更新情報をチェックする

TypeScript + Reactの基本

Propsを定義


iterface Props {
value: number;
}
class Square extends React.Component {}


PropsとStateを定義


iterface Props {
value: number;
}
interface State {
value: number | null;
}
class Square extends React.Component {}

タグ:REACT TypeScript
posted by ねこまんま at 00:59 | Comment(0) | React | 更新情報をチェックする

2018年05月17日

React + flow +ESLint + Prettierを試す

React + flow +ESLintを試す の続き。

まずは以下の拡張機能をインストール

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier


VSCodeのセッティングに以下のコードを追加

  "editor.formatOnSave": true,
"prettier.eslintIntegration": true,


.eslintrcを以下のように変更してあげるとよい

{
"parser": "babel-eslint",
"extends": ["react-app", "standard", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"semi": false
}
]
}
}
posted by ねこまんま at 15:54 | Comment(0) | React | 更新情報をチェックする

React + flow +ESLint を試す

React + flow を試すの続き。

ESLintを追加でインストール、色々インストール

yarn add --dev eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint eslint-plugin-node eslint-plugin-promise eslint-config-standard eslint-plugin-standard


.eslintrcを次のように設定して

{
"parser": "babel-eslint",
"extends": ["react-app","standard"]
}


以下のコマンドでエラーで

npx eslint src/App.js


以下のようなエラーが出ればOK

Definition for rule 'jsx-a11y/href-no-hash' was not found  jsx-a11y/href-no-hash


これは先程インストールしたjsx-a11y内のhref-no-hashというプラグインのhref-no-hashの名前が変わっているため。以下のようにして古いバージョンを入れることで直すことができます。

yarn remove eslint-plugin-jsx-a11y
yarn add --dev eslint-plugin-jsx-a11y@^5.1.1
posted by ねこまんま at 15:07 | Comment(0) | React | 更新情報をチェックする

React + flow を試す

React + flow を試す。

まずはcreate-react-appでプロジェクトをサクッと作成

create-react-app flow-test
cd flow-test
yarn start


次にflow-binをインストールして.flowconfigを作成する

yarn add --dev flow-bin
yarn run flow init


Visual Studio CodeにはプラグインFlow Language Support」をインストールしておきプロジェクトの設定を以下のようにしておく

{    
"flow.useNPMPackagedFlow": true,
"javascript.validate.enable": false
}


App.jsの冒頭に「// @flow」を追加する

以下のようにエラーがでて怒られますので

[flow] Cannot use `Component` [1] with less than 1 type argument. (References: [1])



以下のようにComponentに型を定義してあげるとエラーが無くなります。

type Props = {};
class App extends Component {




posted by ねこまんま at 12:10 | Comment(0) | React | 更新情報をチェックする

2018年05月05日

ReactでCSS Modulesを試す

すでに、Webpackで動いているReactプロジェクトに導入を前提としています。

まずは関連システムをインストール。

npm install --save-dev style-loader css-loader sass-loader node-sass extract-text-webpack-plugin


webpack.config.jsに会の一文を追加

module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader?modules', 'sass-loader'],
},
]
},


app.scssなどのファイルを作成して、以下のような内容を指定

.base{
background: blue;
}



app.js内でCSSを読み込み


import styles from './app.scss';



<div className={styles.base}>...</div>


などとして指定が可能
タグ:REACT CSS Modules
posted by ねこまんま at 17:34 | Comment(0) | React | 更新情報をチェックする

2018年03月17日

React.Fragment

React.Fragmentを利用するとHTML上には書き出されない要素を記述することができます。(Angularでいうng-content )

render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}


これは以下のようにショートカットで書くこともできます。

render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
タグ:REACT fragment
posted by ねこまんま at 18:04 | Comment(0) | React | 更新情報をチェックする

2018年02月05日

Flowtype入門

Flowtypeをを導入するまでの道のり

cli編



まずはpackage.jsonを作成してBableとflowのpresetをインストールしておく。

npm init -y
npm install --save-dev babel-cli babel-preset-flow


scriptsにコンパイル用のコマンドと先ほどインストールしたbabelとpresetsを設定しておく。

  "scripts": {
"build": "babel src/ -d lib/",
"prepublish": "npm run build"
},
"babel": {
"presets": ["flow"]
},


次にflow-binをインストール

npm install --save-dev flow-bin


scriptsにflow用のコマンドを記述

  "scripts": {
"build": "babel src/ -d lib/",
"prepublish": "npm run build",
"flow": "flow"
},


npm run flowでflowが実行される

npm run flow initでは設定用の.flowconfigが作成される

script/app.js に以下のスクリプトを書いて

// @flow
const bar:string = 1


npm run flowを実行すると以下のようなエラーが出てると正解

Error: src/app.js:2
2: const bar:string = 1
^ number. This type is incompatible with
2: const bar:string = 1
^^^^^^ string


スクリプトを以下のように修正すると

// @flow
const bar:string = '1'


エラーは出なくなるはず

ちなみにこのままではブラウザは解釈できないので

npm run buildで出力された lib/app.jsをブラウザで読み込みましょう

エディタ編



いちいちコマンドを打つのが面倒くさいのでエディタでエラーがわかるように設定しておきます。

VSCodeでは「Flow Language Support」というオフィシャルプラグインをインストール。

設定で以下のように指定をしてflowのpathを先ほどのインストールしたローカルのファイルになるようにします。


"flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow"


このままだと型宣言はTSでしか聞かないよ的なエラーが表示され続けるのでワークスペースの設定に以下の内容を追加しておきます。


"javascript.validate.enable": false
タグ:Flowtype REACT
posted by ねこまんま at 20:17 | Comment(0) | React | 更新情報をチェックする

2017年10月17日

はじめてのReactNative

はじめてReactNativeでアプリっぽいものと作る勉強をするのでメモ。

オフィシャルサイトをベースに進めていきます。

まずはcreate-react-native-appをグローバルにインストール

npm install -g create-react-native-app


適当なディレクトリでcreate-react-native-appでプロジェクトを作成

create-react-native-app MyApp


プロジェクトディレクトリで「yarn start」 もしくは「 npm start」

cd MyApp
yarn start


環境によるかもしれないけど以下のようなエラーが出ました。解決用のコマンドも提示されてる親切さ。
2つのコマンドを入力したら問題なく開始できました。

12:41:08: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288


デカデカと開発環境用のQRコードが表示されます。

スクリーンショット 2017-10-17 12.50.04.png

アプリをスマホで確認する場合にはExpoというアプリをインストールして、そのアプリでこのQRコードを読み取ります。

MyApp/App.jsを立ち上げてエディタで以下のように変更。

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}


スマホの表示が「Hello world!」に切り替わったのが確認できます。

これで準備はOK
タグ:ReactNative
posted by ねこまんま at 13:01 | Comment(0) | React | 更新情報をチェックする

2017年07月11日

react-router v4を試してみる

最近Angular三昧だったのでリハビリをかねて、サイトのReactのバージョンアップをしています。

はまったのがreact-router、もともとはreact-routerという名前のモジュールだったのですがreact-router v4
からはWeb用とNative用にわかれており、Web用はreact-router-domという名前のモジュールを利用します。

以下のyarnコマンドでモジュールの入れ替えを行います。

yarn remove react-router
yarn add react-router-dom


npmを利用している場合は以下のコマンドでモジュールの入れ替えを行うことができます。

npm uninstall react-router --save 
npm install react-router-dom



import  React , { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const Home = ()=>{
return <div>Home</div>
}

const Page1 = ()=>{
return <div>Page1</div>
}

const Page2 = ()=>{
return <div>Page2</div>
}

const Page3 = ()=>{
return <div>Page3</div>
}

class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/page1'>Page1</Link></li>
<li><Link to='/page2'>Page2</Link></li>
<li><Link to='/page3'>Page3</Link></li>
</ul>

<hr />
<div>
<Route exact path='/' component={Home} />
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</div>
</div>
</Router>
);
}
}

export default App;
posted by ねこまんま at 10:28 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2017年01月06日

Stateless Functionでrefを利用する

Stateless Functionではrefsへの参照を生成しないため以下のようにして要素の内容を取得する

続きを読む
タグ:REACT
posted by ねこまんま at 17:15 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2017年01月05日

Re : Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法

参考:Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法 - Qiita

結構はやい段階でReduxに以降してしまったためココらへんの知識が浅いので色々と書いてためしてみました。続きを読む
タグ:REACT
posted by ねこまんま at 14:44 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年10月18日

Reactのcreate-react-appコマンド

Facebook公式のcreate-react-appコマンドを試してみる。

まずはcreate-react-appコマンドのインストール

npm install -g create-react-app


以下のコマンドで初期設定が開始される

create-react-app hello-world


hello-worldディレクトリに移動し、npm startで開始する。

cd hello-world
npm start


http://localhost:3000/とかで立ち上がる

src/App.jsなんかに修正を加えると自動ビルドされブラウザがリロードされる。

ただ、実際の製品に反映させたい場合は以下のコマンドを実行しなくちゃいけない

npm run build

posted by ねこまんま at 16:43 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年07月12日

React/ReduxのMiddleware

React/Reduxで非同期処理やアクションの制御はMiddlewareを介して行うのが良いらしい。続きを読む
posted by ねこまんま at 07:32 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年06月29日

react-router-reduxでTODOリスト

React+Redux でTODOリストで作ったTODOリストの一覧ページと追加ページを分離してreact-router-reduxで管理するサンプル。続きを読む
posted by ねこまんま at 19:09 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

React+Redux でTODOリスト

React+Redux でTODOリストを作ってみたのでメモ続きを読む
タグ:Redux
posted by ねこまんま at 17:57 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

Reactでinputを扱う

参考:Reactでinputを扱う - Qiita

Reactではinpuの値を自分で管理しなくちゃいけない。続きを読む
posted by ねこまんま at 09:54 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年05月30日

react-routerの使い方

react-routerの使い方メモ。続きを読む
posted by ねこまんま at 00:34 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年05月24日

ReactのshouldComponentUpdateサンプル

ReactのライフサイクルないのshouldComponentUpdate()でfalseを返すとrenderメソッドが走らない。
続きを読む
posted by ねこまんま at 00:09 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月19日

React+ES6でTODOリスト

React+ES6でTODOリスト作ってみた。続きを読む
タグ:REACT
posted by ねこまんま at 14:37 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月18日

React.ComponentでReact.findDOMNode()がエラーになる

React.ComponentでReact.findDOMNode()を利用しようとすると「Uncaught TypeError: _react2.default.findDOMNode is not a function」というエラーが出てしまいました。続きを読む
posted by ねこまんま at 08:11 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月17日

React+Redux+ES6でカウンター

React+ES6でカウンターのRedux使ったバージョン。続きを読む
タグ:REACT Redux ES6
posted by ねこまんま at 18:11 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

React+ES6でカウンター

React+ES6でカウンターサンプルを作ってみました。続きを読む
タグ:REACT ES6
posted by ねこまんま at 16:38 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月16日

Webpackでファイル監視

WebpackでReactを使ってみる」の続き。

Webpackでファイル監視を行い自動コンパイルを行うには「webpack --watch」で起動すれば監視が開始します。
タグ:REACT WebPACK
posted by ねこまんま at 16:07 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年04月13日

WebpackでReactを使ってみる

とりあえずWebpackでReactを使うまでのメモ続きを読む
タグ:WebPACK REACT
posted by ねこまんま at 21:21 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2015年03月28日

React.js入門1

なんとなくReact.jsを入門してみる。
続きを読む
posted by ねこまんま at 08:25 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする