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年07月10日

"-bash: create-react-app: command not found"

create-react-appをインストールして実行した所以下のエラーが出てしまいました。

"-bash: create-react-app: command not found"


おそらくndenvでインストールしたのでパスが通ってなかったようなので以下のコマンドでパスを通す事ができまいした。

export PATH=$PATH:`npm bin -g`
posted by ねこまんま at 02:35 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2017年07月09日

yarnでローカルパッケージのアップデート

yarnでローカルパッケージのアップデートする方法

インストールできる最新バージョンは以下のコマンドで確認

npm outdated


以下のコマンドで各ローカルのパッケージを最新バージョンにすることができる

yarn upgrade
タグ:NPM Yarn
posted by ねこまんま at 23:34 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする