React: JavaScriptメモ

TOP / 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コードが表示されます。

アプリをスマホで確認する場合には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日

最近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;