+
We are adding react components: a main component that consumes a header and an about component.
@@ -20,7 +20,7 @@ export const About: React.StatelessComponent<{}> = () => {
+
Highlights
@@ -30,7 +30,7 @@ export const About: React.StatelessComponent<{}> = () => {
-
+
-
Components:
diff --git a/old_class_components_samples/03 Navigation/package.json b/old_class_components_samples/03 Navigation/package.json
index 0de1df1a..da757d10 100644
--- a/old_class_components_samples/03 Navigation/package.json
+++ b/old_class_components_samples/03 Navigation/package.json
@@ -9,6 +9,7 @@
"author": "Lemoncode",
"license": "MIT",
"dependencies": {
+ "@types/node": "^11.9.5",
"bootstrap": "^4.1.3",
"jquery": "^3.2.1",
"mini-css-extract-plugin": "^0.4.1",
diff --git a/old_class_components_samples/03 Navigation/readme.md b/old_class_components_samples/03 Navigation/readme.md
index 0079b46d..dc60e007 100644
--- a/old_class_components_samples/03 Navigation/readme.md
+++ b/old_class_components_samples/03 Navigation/readme.md
@@ -20,7 +20,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0) if they are not alrea
installed on your computer.
> Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v`
-in a terminal/console window. Older versions may produce errors.
+> in a terminal/console window. Older versions may produce errors.
## Steps to build it
@@ -28,20 +28,22 @@ in a terminal/console window. Older versions may produce errors.
- Install the npm packages described in the `package.json` and verify that it works:
- ```bash
- $ npm install
- ```
+```bash
+$ npm install
+```
- Install `react-router-dom` and typings:
```bash
npm install react-router-dom --save
npm install @types/react-router-dom --save-dev
+npm i @types/node
```
- Update `vendors`:
### ./webpack.config.js
+
```diff
...
entry: {
@@ -62,8 +64,9 @@ entry: {
- Now, we can start adding a dummy `Members Page`:
### ./src/components/members/page.tsx
+
```javascript
-import * as React from 'react';
+import * as React from "react";
export const MembersPage: React.StatelessComponent<{}> = () => {
return (
@@ -71,21 +74,21 @@ export const MembersPage: React.StatelessComponent<{}> = () => {
Members Page
);
-}
-
+};
```
- And its `index.ts` file:
### ./src/components/members/index.ts
-```javascript
-export * from './page';
+```javascript
+export * from "./page";
```
- Update `header` component to add links to navigate other pages:
### ./src/components/header.tsx
+
```diff
import * as React from 'react';
+ import { Link } from 'react-router-dom';
@@ -103,13 +106,12 @@ export const Header: React.StatelessComponent<{}> = () => {
+
+
@@ -121,6 +123,7 @@ export const Header: React.StatelessComponent<{}> = () => {
- Update components `index.ts` file:
### ./src/components/index.ts
+
```diff
export * from './header';
export * from './about';
@@ -133,11 +136,12 @@ export * from './about';
- Now, we are going to create the `AppRouter` component where we define routes:
### ./src/router.tsx
+
```javascript
- import * as React from 'react';
- import { Route, HashRouter, Switch } from 'react-router-dom';
- import { App } from './app';
- import { About, MembersPage } from './components';
+ import * as React from "react";
+ import { Route, HashRouter, Switch } from "react-router-dom";
+ import { App } from "./app";
+ import { About, MembersPage } from "./components";
export const AppRouter: React.StatelessComponent<{}> = () => {
return (
@@ -152,7 +156,7 @@ export * from './about';