Skip to content

Commit d11000b

Browse files
mauriciogcmauriciogc
committed
basic example
1 parent a906505 commit d11000b

File tree

4 files changed

+137
-67
lines changed

4 files changed

+137
-67
lines changed

‎README.md‎

Lines changed: 24 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,47 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1+
# React - React Router
2+
3+
## You can see the tutorial here
4+
--- Coming soon ---
5+
6+
## You can see a live demo here
7+
* [React Router V5 (Basic Example)](https://codesandbox.io/s/react-router-v5-basic-example-7j8yc?file=/src/App.js)
8+
9+
## You can download demo here
10+
* [0.1.0]()
11+
12+
213

314
## Available Scripts
415

516
In the project directory, you can run:
617

718
### `yarn start`
819

20+
### `npm start`
21+
922
Runs the app in the development mode.<br />
1023
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
1124

1225
The page will reload if you make edits.<br />
1326
You will also see any lint errors in the console.
1427

15-
### `yarn test`
16-
17-
Launches the test runner in the interactive watch mode.<br />
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19-
20-
### `yarn build`
21-
22-
Builds the app for production to the `build` folder.<br />
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
24-
25-
The build is minified and the filenames include the hashes.<br />
26-
Your app is ready to be deployed!
27-
28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29-
30-
### `yarn eject`
31-
32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33-
34-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35-
36-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37-
38-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39-
40-
## Learn More
41-
42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43-
44-
To learn React, check out the [React documentation](https://reactjs.org/).
45-
46-
### Code Splitting
47-
48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
28+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4929

50-
### Analyzing the Bundle Size
5130

52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
5331

54-
### Making a Progressive Web App
32+
## Available Scripts
5533

56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
34+
In the project directory, you can run:
5735

58-
### Advanced Configuration
36+
### `yarn start`
5937

60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
38+
### `npm start`
6139

62-
### Deployment
40+
Runs the app in the development mode.<br />
41+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
6342

64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
43+
The page will reload if you make edits.<br />
44+
You will also see any lint errors in the console.
6545

66-
### `yarn build` fails to minify
46+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
6747

68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^7.1.2",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11+
"react-router-dom": "^5.2.0",
1112
"react-scripts": "3.4.1"
1213
},
1314
"scripts": {

‎src/App.js‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
43

54
function App() {
65
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
6+
<Router>
7+
<div>
8+
<Link to="/">Main page</Link> |
9+
<Link to="/page1">Page 1</Link> |
10+
<Link to="/page2">Page 2</Link>
11+
</div>
12+
13+
<Switch>
14+
<Route path="/page2">
15+
<h1>I'm Page 2</h1>
16+
</Route>
17+
<Route path="/page1">
18+
<h1>I'm Page 1</h1>
19+
</Route>
20+
<Route path="/">
21+
<h1>I'm Main page</h1>
22+
</Route>
23+
</Switch>
24+
</Router>
2325
);
2426
}
2527

‎yarn.lock‎

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1005,7 +1005,7 @@
10051005
dependencies:
10061006
regenerator-runtime "^0.13.4"
10071007

1008-
"@babel/runtime@^7.5.1", "@babel/runtime@^7.7.4":
1008+
"@babel/runtime@^7.1.2", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4":
10091009
version "7.10.2"
10101010
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
10111011
integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
@@ -4966,6 +4966,18 @@ hex-color-regex@^1.1.0:
49664966
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
49674967
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
49684968

4969+
history@^4.9.0:
4970+
version "4.10.1"
4971+
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
4972+
integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
4973+
dependencies:
4974+
"@babel/runtime" "^7.1.2"
4975+
loose-envify "^1.2.0"
4976+
resolve-pathname "^3.0.0"
4977+
tiny-invariant "^1.0.2"
4978+
tiny-warning "^1.0.0"
4979+
value-equal "^1.0.1"
4980+
49694981
hmac-drbg@^1.0.0:
49704982
version "1.0.1"
49714983
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4975,6 +4987,13 @@ hmac-drbg@^1.0.0:
49754987
minimalistic-assert "^1.0.0"
49764988
minimalistic-crypto-utils "^1.0.1"
49774989

4990+
hoist-non-react-statics@^3.1.0:
4991+
version "3.3.2"
4992+
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
4993+
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
4994+
dependencies:
4995+
react-is "^16.7.0"
4996+
49784997
hosted-git-info@^2.1.4:
49794998
version "2.8.8"
49804999
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -5654,6 +5673,11 @@ is-wsl@^2.1.1:
56545673
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
56555674
integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
56565675

5676+
isarray@0.0.1:
5677+
version "0.0.1"
5678+
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
5679+
integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
5680+
56575681
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
56585682
version "1.0.0"
56595683
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6506,7 +6530,7 @@ loglevel@^1.6.6:
65066530
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
65076531
integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
65086532

6509-
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
6533+
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
65106534
version "1.4.0"
65116535
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
65126536
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6710,6 +6734,14 @@ min-indent@^1.0.0:
67106734
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
67116735
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
67126736

6737+
mini-create-react-context@^0.4.0:
6738+
version "0.4.0"
6739+
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
6740+
integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==
6741+
dependencies:
6742+
"@babel/runtime" "^7.5.5"
6743+
tiny-warning "^1.0.3"
6744+
67136745
mini-css-extract-plugin@0.9.0:
67146746
version "0.9.0"
67156747
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
@@ -7494,6 +7526,13 @@ path-to-regexp@0.1.7:
74947526
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
74957527
integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
74967528

7529+
path-to-regexp@^1.7.0:
7530+
version "1.8.0"
7531+
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
7532+
integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
7533+
dependencies:
7534+
isarray "0.0.1"
7535+
74977536
path-type@^2.0.0:
74987537
version "2.0.0"
74997538
resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -8584,11 +8623,40 @@ react-error-overlay@^6.0.7:
85848623
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
85858624
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
85868625

8587-
react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
8626+
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
85888627
version "16.13.1"
85898628
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
85908629
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
85918630

8631+
react-router-dom@^5.2.0:
8632+
version "5.2.0"
8633+
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
8634+
integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
8635+
dependencies:
8636+
"@babel/runtime" "^7.1.2"
8637+
history "^4.9.0"
8638+
loose-envify "^1.3.1"
8639+
prop-types "^15.6.2"
8640+
react-router "5.2.0"
8641+
tiny-invariant "^1.0.2"
8642+
tiny-warning "^1.0.0"
8643+
8644+
react-router@5.2.0:
8645+
version "5.2.0"
8646+
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
8647+
integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
8648+
dependencies:
8649+
"@babel/runtime" "^7.1.2"
8650+
history "^4.9.0"
8651+
hoist-non-react-statics "^3.1.0"
8652+
loose-envify "^1.3.1"
8653+
mini-create-react-context "^0.4.0"
8654+
path-to-regexp "^1.7.0"
8655+
prop-types "^15.6.2"
8656+
react-is "^16.6.0"
8657+
tiny-invariant "^1.0.2"
8658+
tiny-warning "^1.0.0"
8659+
85928660
react-scripts@3.4.1:
85938661
version "3.4.1"
85948662
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
@@ -8947,6 +9015,11 @@ resolve-from@^4.0.0:
89479015
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
89489016
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
89499017

9018+
resolve-pathname@^3.0.0:
9019+
version "3.0.0"
9020+
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
9021+
integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
9022+
89509023
resolve-url-loader@3.1.1:
89519024
version "3.1.1"
89529025
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
@@ -9966,6 +10039,16 @@ timsort@^0.3.0:
996610039
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
996710040
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
996810041

10042+
tiny-invariant@^1.0.2:
10043+
version "1.1.0"
10044+
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
10045+
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
10046+
10047+
tiny-warning@^1.0.0, tiny-warning@^1.0.3:
10048+
version "1.0.3"
10049+
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
10050+
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
10051+
996910052
tmp@^0.0.33:
997010053
version "0.0.33"
997110054
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10306,6 +10389,11 @@ validate-npm-package-license@^3.0.1:
1030610389
spdx-correct "^3.0.0"
1030710390
spdx-expression-parse "^3.0.0"
1030810391

10392+
value-equal@^1.0.1:
10393+
version "1.0.1"
10394+
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
10395+
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
10396+
1030910397
vary@~1.1.2:
1031010398
version "1.1.2"
1031110399
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

0 commit comments

Comments
 (0)