Skip to content

Commit 2429afe

Browse files
brauliodiezbrauliodiez
committed
sample 12 router completed
1 parent c64366a commit 2429afe

10 files changed

Lines changed: 324 additions & 0 deletions

File tree

‎hooks/12_ReactRouter/.babelrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"useBuiltIns": "entry"
7+
}
8+
]
9+
]
10+
}

‎hooks/12_ReactRouter/Readme.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# 12 React Router
2+
3+
n this sample we will start using React-Router (<acronym title="Single Page Application">SPA</acronym> navigation).
4+
5+
We take as a starting point the example _03 State_:
6+
7+
## Steps
8+
9+
- Copy the content from _03 State_ and execute `npm install`.
10+
11+
```bash
12+
npm install
13+
```
14+
15+
- Let's make some cleanup (remove _src/hello.tsx_ and _src/nameEdit.tsx_ files).
16+
17+
- Let's create a component called _PageA_ as _src/pageA.tsx_:
18+
19+
_./src/pages/pageA.tsx_
20+
21+
```jsx
22+
import * as React from "react"
23+
24+
export const PageA = () =>
25+
<div>
26+
<h2>Hello from page A</h2>
27+
</div>
28+
```
29+
30+
- Let's create a component called _PageB_ as _src/pageB.tsx_:
31+
32+
_./src/pages/pageB.tsx_
33+
34+
```jsx
35+
import * as React from "react"
36+
37+
export const PageB = () =>
38+
<div>
39+
<h2>Hello from page B</h2>
40+
</div>
41+
```
42+
43+
- Let's install the dependencies [`react-router-dom`](https://github.com/ReactTraining/react-router) and typescript definitions for this.
44+
45+
```bash
46+
npm install react-router-dom --save
47+
npm install @types/react-router-dom --save-dev
48+
```
49+
50+
- Let's define the routing in _app.tsx_:
51+
52+
_./src/app.tsx_
53+
54+
```diff
55+
import * as React from 'react';
56+
import * as ReactDOM from 'react-dom';
57+
- import { App } from './app';
58+
- import { HelloComponent } from './hello';
59+
+ import { HashRouter, Switch, Route } from 'react-router-dom';
60+
+ import { PageA } from './pages/pageA';
61+
+ import { PageB } from './pages/pageB';
62+
63+
ReactDOM.render(
64+
- <HelloComponent userName={name} />
65+
- <NameEditComponent userName={name} onChange={setUsernameState} />
66+
+ <HashRouter>
67+
+ <Switch>
68+
+ <Route exact={true} path="/" component={PageA} />
69+
+ <Route path="/pageB" component={PageB} />
70+
+ </Switch>
71+
+ </HashRouter>,
72+
document.getElementById('root')
73+
);
74+
75+
```
76+
77+
- It's time to check that we are following the right track:
78+
79+
```bash
80+
npm start
81+
```
82+
83+
- Let's define a navigation from _[PageA.tsx](./src/pageA.tsx)_ to _[PageB.tsx](./src/pageB.tsx)_.
84+
85+
_./src/pages/pageA.tsx_
86+
87+
```diff
88+
import * as React from "react"
89+
+ import { Link } from 'react-router-dom';
90+
91+
export const PageA = () =>
92+
<div>
93+
<h2>Hello from page A</h2>
94+
+ <br />
95+
+ <Link to="/pageB">Navigate to Page B</Link>
96+
</div>
97+
```
98+
99+
- Let's define a navigation from _[PageB.tsx](./src/pageB.tsx)_ to _[PageA.tsx](./src/pageA.tsx)_
100+
101+
_./src/pages/pageB.tsx_
102+
103+
```diff
104+
import * as React from "react"
105+
+ import { Link } from 'react-router-dom';
106+
107+
export const PageB = () =>
108+
<div>
109+
<h2>Hello from page B</h2>
110+
+ <br />
111+
+ <Link to="/">Navigate to Page A</Link>
112+
</div>
113+
```
114+
115+
116+
- Let's run the app and check that the navigation links are working
117+
118+
```bash
119+
npm start
120+
```
121+
122+
123+
# About Basefactor + Lemoncode
124+
125+
We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
126+
127+
[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
128+
129+
[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
130+
131+
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
132+

‎hooks/12_ReactRouter/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "react-typescript-by-sample",
3+
"version": "1.0.0",
4+
"description": "React Typescript examples",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --mode development --inline --hot --open",
8+
"build": "webpack --mode development"
9+
},
10+
"keywords": [
11+
"react",
12+
"typescript",
13+
"hooks"
14+
],
15+
"author": "Braulio Diez Botella",
16+
"license": "MIT",
17+
"devDependencies": {
18+
"@babel/cli": "^7.2.3",
19+
"@babel/core": "^7.2.2",
20+
"@babel/polyfill": "^7.2.5",
21+
"@babel/preset-env": "^7.3.1",
22+
"@types/react": "^16.8.3",
23+
"@types/react-dom": "^16.8.1",
24+
"@types/react-router-dom": "^4.3.1",
25+
"awesome-typescript-loader": "^5.2.1",
26+
"babel-loader": "^8.0.5",
27+
"css-loader": "^2.1.0",
28+
"file-loader": "^3.0.1",
29+
"html-webpack-plugin": "^3.2.0",
30+
"mini-css-extract-plugin": "^0.5.0",
31+
"style-loader": "^0.23.1",
32+
"typescript": "^3.3.3",
33+
"url-loader": "^1.1.2",
34+
"webpack": "^4.29.3",
35+
"webpack-cli": "^3.2.3",
36+
"webpack-dev-server": "^3.1.14"
37+
},
38+
"dependencies": {
39+
"react": "^16.8.2",
40+
"react-dom": "^16.8.2",
41+
"react-router-dom": "^4.3.1"
42+
}
43+
}

‎hooks/12_ReactRouter/src/app.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
import { HashRouter, Switch, Route } from "react-router-dom";
3+
import { PageA } from "./pages/pageA";
4+
import { PageB } from "./pages/pageB";
5+
6+
export const App = () => {
7+
const [name, setName] = React.useState("defaultUserName");
8+
9+
const setUsernameState = (event: React.ChangeEvent<HTMLInputElement>) => {
10+
setName(event.target.value);
11+
};
12+
13+
return (
14+
<>
15+
<HashRouter>
16+
<Switch>
17+
<Route exact={true} path="/" component={PageA} />
18+
<Route path="/pageB" component={PageB} />
19+
</Switch>
20+
</HashRouter>
21+
</>
22+
);
23+
};

‎hooks/12_ReactRouter/src/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title></title>
6+
</head>
7+
<body>
8+
<div class="well">
9+
<h1>Sample app</h1>
10+
<div id="root"></div>
11+
</div>
12+
</body>
13+
</html>

‎hooks/12_ReactRouter/src/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
3+
4+
import { App } from "./app";
5+
6+
ReactDOM.render(<App />, document.getElementById("root"));

‎hooks/12_ReactRouter/src/pages/pageA.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from "react";
2+
import { Link } from "react-router-dom";
3+
4+
export const PageA = () => (
5+
<div>
6+
<h2>Hello from page A</h2>
7+
<br />
8+
<Link to="/pageB">Navigate to Page B</Link>
9+
</div>
10+
);

‎hooks/12_ReactRouter/src/pages/pageB.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from "react";
2+
import { Link } from "react-router-dom";
3+
4+
export const PageB = () => (
5+
<div>
6+
<h2>Hello from page B</h2>
7+
<br />
8+
<Link to="/">Navigate to Page A</Link>
9+
</div>
10+
);

‎hooks/12_ReactRouter/tsconfig.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es6",
4+
"module": "es6",
5+
"moduleResolution": "node",
6+
"declaration": false,
7+
"noImplicitAny": false,
8+
"jsx": "react",
9+
"sourceMap": true,
10+
"noLib": false,
11+
"suppressImplicitAnyIndexErrors": true
12+
},
13+
"compileOnSave": false,
14+
"exclude": ["node_modules"]
15+
}

‎hooks/12_ReactRouter/webpack.config.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
var HtmlWebpackPlugin = require("html-webpack-plugin");
2+
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
var webpack = require("webpack");
4+
var path = require("path");
5+
6+
var basePath = __dirname;
7+
8+
module.exports = {
9+
context: path.join(basePath, "src"),
10+
resolve: {
11+
extensions: [".js", ".ts", ".tsx"]
12+
},
13+
entry: ["@babel/polyfill", "./index.tsx"],
14+
output: {
15+
path: path.join(basePath, "dist"),
16+
filename: "bundle.js"
17+
},
18+
devtool: "source-map",
19+
devServer: {
20+
contentBase: "./dist", // Content base
21+
inline: true, // Enable watch and live reload
22+
host: "localhost",
23+
port: 8080,
24+
stats: "errors-only"
25+
},
26+
module: {
27+
rules: [
28+
{
29+
test: /\.(ts|tsx)$/,
30+
exclude: /node_modules/,
31+
loader: "awesome-typescript-loader",
32+
options: {
33+
useBabel: true,
34+
babelCore: "@babel/core" // needed for Babel v7
35+
}
36+
},
37+
{
38+
test: /\.css$/,
39+
use: [MiniCssExtractPlugin.loader, "css-loader"]
40+
},
41+
{
42+
test: /\.(png|jpg|gif|svg)$/,
43+
loader: "file-loader",
44+
options: {
45+
name: "assets/img/[name].[ext]?[hash]"
46+
}
47+
}
48+
]
49+
},
50+
plugins: [
51+
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
52+
new HtmlWebpackPlugin({
53+
filename: "index.html", //Name of file in ./dist/
54+
template: "index.html", //Name of template in ./src
55+
hash: true
56+
}),
57+
new MiniCssExtractPlugin({
58+
filename: "[name].css",
59+
chunkFilename: "[id].css"
60+
})
61+
]
62+
};

0 commit comments

Comments
 (0)