From 55df5008ce5fe33a4bf1d02a4c4150bbc6e75768 Mon Sep 17 00:00:00 2001 From: brenopolanski Date: Fri, 23 Dec 2016 12:42:14 -0300 Subject: [PATCH] Add code to use react-router --- .travis.yml | 0 CONTRIBUTING.md | 0 LICENSE | 0 README.md | 2 +- package.json | 8 ++-- src/components/About/About.js | 27 +++++++++++ src/components/About/index.js | 17 +++++++ src/components/App/App.js | 17 ++++--- src/components/Contact/Contact.js | 27 +++++++++++ src/components/Contact/index.js | 17 +++++++ src/components/Home/Home.js | 33 ++++++++++++++ src/components/Home/index.js | 17 +++++++ src/containers/Root.js | 32 +++++++++++++ src/index.js | 14 +++--- src/routes.js | 33 ++++++++++++++ src/styl/_core.styl | 0 src/styl/_variables.styl | 0 src/styl/saiku.styl | 0 yarn.lock | 76 +++++++++++++++++++++++-------- 19 files changed, 285 insertions(+), 35 deletions(-) mode change 100644 => 100755 .travis.yml mode change 100644 => 100755 CONTRIBUTING.md mode change 100644 => 100755 LICENSE create mode 100755 src/components/About/About.js create mode 100755 src/components/About/index.js create mode 100755 src/components/Contact/Contact.js create mode 100755 src/components/Contact/index.js create mode 100755 src/components/Home/Home.js create mode 100755 src/components/Home/index.js create mode 100755 src/containers/Root.js create mode 100755 src/routes.js mode change 100644 => 100755 src/styl/_core.styl mode change 100644 => 100755 src/styl/_variables.styl mode change 100644 => 100755 src/styl/saiku.styl diff --git a/.travis.yml b/.travis.yml old mode 100644 new mode 100755 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md old mode 100644 new mode 100755 diff --git a/LICENSE b/LICENSE old mode 100644 new mode 100755 diff --git a/README.md b/README.md index 6154d03..09c0949 100755 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A template for writing React based ECMAScript 2015 (ES6) + Redux + React Router - [x] [Webpack](https://webpack.github.io) - [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard) - [x] [React](https://facebook.github.io/react/) -- [ ] [React Router](https://github.com/ReactTraining/react-router) +- [x] [React Router](https://github.com/ReactTraining/react-router) - [ ] [Redux](https://github.com/reactjs/redux) - [x] [React Hot Loader](https://github.com/gaearon/react-hot-loader) - [x] [Jest](https://facebook.github.io/jest/) for tests and [Chai](http://chaijs.com/) for assertions diff --git a/package.json b/package.json index 3252337..ab97b1f 100755 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "devDependencies": { "@kadira/storybook": "^2.35.1", - "autoprefixer": "^6.5.4", + "autoprefixer": "^6.6.0", "babel-core": "^6.21.0", "babel-eslint": "^7.1.1", "babel-jest": "^18.0.0", @@ -46,7 +46,7 @@ "webpack": "^1.14.0", "webpack-dashboard": "^0.2.0", "webpack-dev-server": "^1.16.2", - "webpack-merge": "^1.1.2", + "webpack-merge": "^2.0.0", "webpack-validator": "^2.3.0" }, "dependencies": { @@ -56,6 +56,8 @@ "react": "^15.4.1", "react-bootstrap": "^0.30.7", "react-dom": "^15.4.1", - "react-prop-types": "^0.4.0" + "react-prop-types": "^0.4.0", + "react-router": "^3.0.0", + "react-router-bootstrap": "^0.23.1" } } diff --git a/src/components/About/About.js b/src/components/About/About.js new file mode 100755 index 0000000..66410e3 --- /dev/null +++ b/src/components/About/About.js @@ -0,0 +1,27 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { Component } from 'react'; + +class About extends Component { + render() { + return ( +

Page about

+ ); + } +} + +export default About; diff --git a/src/components/About/index.js b/src/components/About/index.js new file mode 100755 index 0000000..252d5bc --- /dev/null +++ b/src/components/About/index.js @@ -0,0 +1,17 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { default } from './About.js'; diff --git a/src/components/App/App.js b/src/components/App/App.js index aba810b..0169cc6 100755 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -21,7 +21,7 @@ import { Nav, NavItem } from 'react-bootstrap'; -import Title from '../Title'; +import { LinkContainer } from 'react-router-bootstrap'; import style from './App.styl'; @@ -38,16 +38,21 @@ class App extends Component {
- My App -

Use this document as a way to quickly start any new project.

+ {React.cloneElement(this.props.children, this.props)}
diff --git a/src/components/Contact/Contact.js b/src/components/Contact/Contact.js new file mode 100755 index 0000000..2236c02 --- /dev/null +++ b/src/components/Contact/Contact.js @@ -0,0 +1,27 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { Component } from 'react'; + +class Contact extends Component { + render() { + return ( +

Page contact

+ ); + } +} + +export default Contact; diff --git a/src/components/Contact/index.js b/src/components/Contact/index.js new file mode 100755 index 0000000..bda2eb3 --- /dev/null +++ b/src/components/Contact/index.js @@ -0,0 +1,17 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { default } from './Contact.js'; diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js new file mode 100755 index 0000000..6831bae --- /dev/null +++ b/src/components/Home/Home.js @@ -0,0 +1,33 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { Component } from 'react'; +import Title from '../Title'; + +class Home extends Component { + render() { + return ( +
+ My App +

+ Use this document as a way to quickly start any new project. +

+
+ ); + } +} + +export default Home; diff --git a/src/components/Home/index.js b/src/components/Home/index.js new file mode 100755 index 0000000..6610890 --- /dev/null +++ b/src/components/Home/index.js @@ -0,0 +1,17 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export { default } from './Home.js'; diff --git a/src/containers/Root.js b/src/containers/Root.js new file mode 100755 index 0000000..9fe70bc --- /dev/null +++ b/src/containers/Root.js @@ -0,0 +1,32 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { Component } from 'react'; +import { + Router, + browserHistory +} from 'react-router'; +import routes from '../routes'; + +class Root extends Component { + render() { + return ( + + ); + } +} + +export default Root; diff --git a/src/index.js b/src/index.js index 6c03ce1..e7b901c 100755 --- a/src/index.js +++ b/src/index.js @@ -17,26 +17,26 @@ import React from 'react'; import { render } from 'react-dom'; import { AppContainer } from 'react-hot-loader'; -import App from './components/App'; +import Root from './containers/Root'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'font-awesome/css/font-awesome.min.css'; import './styl/saiku.styl'; -const renderApp = (NextApp) => { +const renderApp = (NewRoot) => { render( - + , document.querySelector('[data-js="app"]') ); }; -renderApp(App); +renderApp(Root); if (module.hot) { - module.hot.accept('./components/App', () => { - const NextApp = require('./components/App').default; - renderApp(NextApp); + module.hot.accept('./containers/Root', () => { + const NewRoot = require('./containers/Root').default; + renderApp(NewRoot); }); } diff --git a/src/routes.js b/src/routes.js new file mode 100755 index 0000000..7daf6d1 --- /dev/null +++ b/src/routes.js @@ -0,0 +1,33 @@ +/** + * Copyright 2017 OSBI Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { + Route, + IndexRoute +} from 'react-router'; +import App from './components/App'; +import Home from './components/Home'; +import About from './components/About'; +import Contact from './components/Contact'; + +export default ( + + + + + +); diff --git a/src/styl/_core.styl b/src/styl/_core.styl old mode 100644 new mode 100755 diff --git a/src/styl/_variables.styl b/src/styl/_variables.styl old mode 100644 new mode 100755 diff --git a/src/styl/saiku.styl b/src/styl/saiku.styl old mode 100644 new mode 100755 diff --git a/yarn.lock b/yarn.lock index 96dc94d..033e795 100755 --- a/yarn.lock +++ b/yarn.lock @@ -353,6 +353,17 @@ autoprefixer@^6.3.1, autoprefixer@^6.3.7: postcss "^5.2.5" postcss-value-parser "^3.2.3" +autoprefixer@^6.6.0: + version "6.6.0" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.0.tgz#d5b347ebbaf79e79d30b81c0ee3e482b288527bf" + dependencies: + browserslist "~1.5.1" + caniuse-db "^1.0.30000602" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^5.2.6" + postcss-value-parser "^3.2.3" + aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" @@ -1326,6 +1337,12 @@ browserslist@^1.4.0, browserslist@~1.4.0: dependencies: caniuse-db "^1.0.30000539" +browserslist@~1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.1.tgz#67c3f2a1a6ad174cd01d25d2362e6e6083b26986" + dependencies: + caniuse-db "^1.0.30000601" + bser@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/bser/-/bser-1.0.2.tgz#381116970b2a6deea5646dd15dd7278444b56169" @@ -1389,6 +1406,10 @@ caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578: version "1.0.30000584" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000584.tgz#cfbce897a48145fa73f96d893025581e838648c4" +caniuse-db@^1.0.30000601, caniuse-db@^1.0.30000602: + version "1.0.30000602" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000602.tgz#06b2cbfb6c3aeef7ddb18cd588043549ad1a2d4e" + cardinal@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-1.0.0.tgz#50e21c1b0aa37729f9377def196b5a9cec932ee9" @@ -2328,9 +2349,9 @@ eslint-plugin-import@^2.2.0: minimatch "^3.0.3" pkg-up "^1.0.0" -eslint-plugin-jsx-a11y@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-3.0.1.tgz#38f22742a5752a8e72db693d7cd86e13a357da25" +eslint-plugin-jsx-a11y@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-3.0.2.tgz#9f0eabcafde3d2a2600d96a66adb90d099e841fe" dependencies: damerau-levenshtein "^1.0.0" jsx-ast-utils "^1.0.0" @@ -2349,9 +2370,9 @@ eslint-plugin-react@^6.8.0: doctrine "^1.2.2" jsx-ast-utils "^1.3.4" -eslint@^3.12.1: - version "3.12.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.1.tgz#507a609fe251dfefd58fda03e6dbd7e851c07581" +eslint@^3.12.2: + version "3.12.2" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.2.tgz#6be5a9aa29658252abd7f91e9132bab1f26f3c34" dependencies: babel-code-frame "^6.16.0" chalk "^1.1.3" @@ -2962,6 +2983,15 @@ he@1.1.x: version "1.1.0" resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7" +history@^3.0.0: + version "3.2.1" + resolved "https://registry.yarnpkg.com/history/-/history-3.2.1.tgz#71c7497f4e6090363d19a6713bb52a1bfcdd99aa" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + query-string "^4.2.2" + warning "^3.0.0" + hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" @@ -4022,7 +4052,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8" dependencies: @@ -4912,18 +4942,18 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" -postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.5: - version "5.2.5" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056" +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.5, postcss@^5.2.6: + version "5.2.6" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e" dependencies: chalk "^1.1.3" js-base64 "^2.1.9" source-map "^0.5.6" supports-color "^3.1.2" -postcss@^5.2.6: - version "5.2.6" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e" +postcss@^5.0.6: + version "5.2.5" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.5.tgz#ec428c27dffc7fac65961340a9b022fa4af5f056" dependencies: chalk "^1.1.3" js-base64 "^2.1.9" @@ -5014,7 +5044,7 @@ qs@^6.1.0, qs@^6.2.0, qs@~6.3.0: version "6.3.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442" -query-string@^4.1.0: +query-string@^4.1.0, query-string@^4.2.2: version "4.2.3" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822" dependencies: @@ -5178,6 +5208,16 @@ react-proxy@^3.0.0-alpha.0: dependencies: lodash "^4.6.1" +react-router@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.0.tgz#3f313e4dbaf57048c48dd0a8c3cac24d93667dff" + dependencies: + history "^3.0.0" + hoist-non-react-statics "^1.2.0" + invariant "^2.2.1" + loose-envify "^1.2.0" + warning "^3.0.0" + react-simple-di@^1.2.0: version "1.2.0" resolved "http://registry.npmjs.org/react-simple-di/-/react-simple-di-1.2.0.tgz#dde0e5bf689f391ef2ab02c9043b213fe239c6d0" @@ -5472,7 +5512,7 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@2, rimraf@^2.2.8, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@~2.5.1, rimraf@~2.5.4: +rimraf@2, rimraf@^2.2.8, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4: version "2.5.4" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04" dependencies: @@ -6316,9 +6356,9 @@ webpack-hot-middleware@^2.13.2: querystring "^0.2.0" strip-ansi "^3.0.0" -webpack-merge@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-1.1.1.tgz#2816dce279f38fe05d62b6411144b7638553e61c" +webpack-merge@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-2.0.0.tgz#fd328707d26f6f9852be2767557cef51d942c1dc" dependencies: lodash.clonedeep "^4.5.0" lodash.differencewith "^4.5.0"