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 | 更新情報をチェックする