20190327のReactに関する記事は2件です。

投稿日：2019-03-27T23:09:39+09:00

kintone UI Component を React で試す　第２回

kintone UI Component for React を試す際には、コンパイラーやバンドラーの設定から入る必要があってそれが敷居を高くしている感がありましたが、今回は CodeSandbox を使うことで環境設定作業は無しで、使いたい機能を試してみました。

CodeSandbox とは？

オンラインエディターの１つです。
https://codesandbox.io

CodeSandbox is an online editor that's built for web application development.

登録無しで直ぐに使い始めることが出来ます。
無料枠にはプライベート環境が無し、作成できる環境に上限が有ったりするのでその点に注意が必要です。
https://codesandbox.io/patron

React 環境を作る

CodeSandbox でReactアプリの環境をセットアップします。

Dashboard から Reactテンプレートを選択します。

React環境の雛形が作られて自動でコンパイル、バンドルが走りReactのWebアプリケーションが起動します。

index.js を修正して保存します。
ファイルを修正して保存すると自動でコンパイル、バンドルされてプロジェクトに名前をつけて保存できるようになります。メニューも変わりGitHubと接続できるようになります。
無料枠ではパブリック設定しか作れませんので注意が必要です。

kintone UI Component を呼んでみる

テキストボックスとボタンコンポーネントを読み込みます。
リファレンス(https://kintone.github.io/kintone-ui-component/) のコードをコピーして動作確認をしてみます。
雛形のファイルは下記の通り。
index.js
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox for React!</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
テキストボックスとボタンを表示するコードを追加します。
ボタンを押したらアラートにテキストボックスの内容を表示させてみます。
index.js
import { Text, Button } from "kintone-ui-component";
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }
  render() {
    return (
      <div>
        <Text
          value={this.state.value}
          isVisible={true}
          isDisabled={false}
          onChange={value => {
            this.setState({ value });
          }}
        />
        <Button
          text="Submit"
          type="submit"
          isDisabled={false}
          isVisible={true}
          onClick={this.handleButtonClick}
        />
      </div>
    );
  }
  handleButtonClick = () => {
    window.alert(this.state.value);
  };
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);
index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
</body>

</html>
DependencyNotFoundError が表示されたら、Suggested solutions:の下の
Add @kintone/kintone-ui-component as dependency リンクをクリックすると自動でkintone-ui-conponent を npm からインストールしてくれます。

画面キャプチャ

Reactの理解不足もあり、コンポーネントを組み合わせた際の動作がよく分からないものもありますが、CodeSandboxは kintone UI Component を手軽に試すことが出来て便利ですね。

第３回へ続きます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-27T12:22:18+09:00

create-react-appでeslintを導入した時のエラー

はじめに

create-react-appでreactををやっていて途中からeslintを導入した時のエラー

自分がやったeslintの導入方法

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

.eslintrc

{
    "extends": ["airbnb"],
    "parser": "babel-eslint",
    "plugins": [
      "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
  }

エラー内容

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.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "5.12.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/myname/Works/React/myfolder/node_modules/eslint (version: 5.15.3) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/myname/Works/React/myfolder/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tutorial@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the tutorial@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

解決方法

ログの中にある１〜４をやったら治りました。
1.package-lock.jsonを消す

2.node_modulesを消す

3.package.json からeslintとbabel-eslintを消す（自分の場合は-DでインストールしたのでdevDependenciesの方にありました）

4.'npm install'する（package-lock.jsonとnode_modulesは新しく作られます）

create-react-appをするとデフォルトでeslintとbabel-eslintは入っているみたいです。
eslintとbabel-eslintがないpackage-lock.jsonとnode_modulesを作るみたいです。

　 Tweet
Qiitaで続きを読む

20190327のReactに関する記事は2件です。

kintone UI Component を React で試す　第２回

CodeSandbox とは？

React 環境を作る

kintone UI Component を呼んでみる

画面キャプチャ

create-react-appでeslintを導入した時のエラー

はじめに

自分がやったeslintの導入方法

エラー内容

解決方法

日付別

タグ一覧

20190327のReactに関する記事は2件です。

kintone UI Component を React で試す 第２回

CodeSandbox とは？

React 環境を作る

kintone UI Component を 呼んでみる

画面キャプチャ

create-react-appでeslintを導入した時のエラー

はじめに

自分がやったeslintの導入方法

エラー内容

解決方法

日付別

タグ一覧

kintone UI Component を React で試す　第２回

kintone UI Component を呼んでみる