Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit de3f5d0

Browse filesBrowse files
jsagardoyjsagardoy
committed
updated packages and fixed about page
1 parent a6a4953 commit de3f5d0
Copy full SHA for de3f5d0

File tree

Expand file treeCollapse file tree

7 files changed

+102
-82
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+102
-82
lines changed

‎04 DisplayData/package.json

Copy file name to clipboardExpand all lines: 04 DisplayData/package.json
+21-17Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,36 @@
33
"version": "1.0.0",
44
"description": "Sample working with React,TypeScript and Webpack",
55
"scripts": {
6-
"start": "webpack-dev-server",
6+
"start": "webpack-dev-server --mode development --inline --hot --open",
77
"build": "webpack"
88
},
99
"author": "Lemoncode",
1010
"license": "MIT",
1111
"dependencies": {
12-
"bootstrap": "^3.3.7",
12+
"bootstrap": "^4.1.3",
1313
"jquery": "^3.2.1",
14-
"react": "^15.5.4",
15-
"react-dom": "^15.5.4",
16-
"react-router": "^3.0.5"
14+
"mini-css-extract-plugin": "^0.4.1",
15+
"react": "^16.4.2",
16+
"react-dom": "^16.4.2",
17+
"react-router": "^4.3.1",
18+
"react-router-dom": "^4.3.1"
1719
},
1820
"devDependencies": {
19-
"@types/react": "^15.0.27",
20-
"@types/react-dom": "^15.5.0",
21-
"@types/react-router": "^3.0.11",
22-
"awesome-typescript-loader": "^3.1.3",
21+
"@types/react": "^16.4.8",
22+
"@types/react-dom": "^16.0.7",
23+
"@types/react-router": "^4.0.30",
24+
"@types/react-router-dom": "^4.3.0",
25+
"awesome-typescript-loader": "^5.2.0",
2326
"babel-core": "^6.25.0",
2427
"babel-preset-env": "^1.5.2",
25-
"css-loader": "^0.28.4",
26-
"file-loader": "^0.11.2",
27-
"html-webpack-plugin": "^2.28.0",
28-
"style-loader": "^0.18.2",
29-
"typescript": "^2.3.4",
30-
"url-loader": "^0.5.9",
31-
"webpack": "^2.6.1",
32-
"webpack-dev-server": "^2.4.5"
28+
"css-loader": "^1.0.0",
29+
"file-loader": "^1.1.11",
30+
"html-webpack-plugin": "^3.2.0",
31+
"style-loader": "^0.22.1",
32+
"typescript": "^3.0.1",
33+
"url-loader": "^1.0.1",
34+
"webpack": "^4.16.5",
35+
"webpack-cli": "^3.1.0",
36+
"webpack-dev-server": "^3.1.5"
3337
}
3438
}

‎04 DisplayData/src/components/about.tsx

Copy file name to clipboardExpand all lines: 04 DisplayData/src/components/about.tsx
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import * as React from 'react';
22

33
export const About: React.StatelessComponent<{}> = () => {
44
return (
5-
<div className="row about-page">
6-
<h1 className="jumbotron">04 DisplayData</h1>
5+
<div className="row about-page col-12">
6+
<h1 className="jumbotron col-2">04 DisplayData</h1>
77

8-
<div className="col-xs-12">
8+
<div className="col-10" id="header-title">
99
<h1>
1010
<small>
1111
This sample takes as starting point sample "03 Navigation".
1212
</small>
1313
</h1>
14-
<div className="col-xs-12">
14+
<div className="col-10">
1515
<h3>
1616
<small>
1717
We are adding a mock API to simulate fetching members data from Github:
@@ -24,7 +24,7 @@ export const About: React.StatelessComponent<{}> = () => {
2424
</div>
2525
</div>
2626

27-
<div className="col-xs-12 top-buffer">
27+
<div className="col-2 top-buffer">
2828
<h3>Highlights</h3>
2929
<hr />
3030
<h3>
@@ -34,7 +34,7 @@ export const About: React.StatelessComponent<{}> = () => {
3434
</h3>
3535
</div>
3636

37-
<div className="col-xs-12 top-buffer">
37+
<div className="col-10">
3838
<ul>
3939
<li className="top-buffer">
4040
<h4><b>API:</b></h4>

‎04 DisplayData/src/components/header.tsx

Copy file name to clipboard
+20-8Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
import * as React from 'react';
2-
import { Link } from 'react-router';
2+
import { Link } from 'react-router-dom';
33

44
export const Header: React.StatelessComponent<{}> = () => {
55
return (
6-
<div className="row">
7-
<nav className="navbar navbar-default">
8-
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
9-
<ul className="nav navbar-nav">
10-
<li><Link to="/about">About</Link></li>
11-
<li><Link to="/members">Members</Link></li>
6+
<div className="row col-12">
7+
8+
<nav className="navbar navbar-expand-lg navbar-light bg-white" id="navbar">
9+
<img className="navbar-icon" src={require('../images/lemoncode.png')} alt="logo" />
10+
<a className="navbar-brand" href="#">Lemoncode</a>
11+
12+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
13+
<span className="navbar-toggler-icon"></span>
14+
</button>
15+
16+
<div className="collapse navbar-collapse" id="navbarSupportedContent">
17+
<ul className="navbar-nav mr-auto">
18+
<li className="nav-item">
19+
<Link className="nav-link" to="/about"> About</Link>
20+
</li>
21+
<li className="nav-item ">
22+
<Link className="nav-link" to="/members"> Members </Link>
23+
</li>
1224
</ul>
1325
</div>
1426
</nav>
1527
</div>
1628
);
17-
}
29+
}

‎04 DisplayData/src/css/site.css

Copy file name to clipboard
+26-14Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,37 @@
1-
.top-buffer{
2-
margin-top: 20px;
1+
.top-buffer {
2+
margin-top: 20px;
33
}
44

5-
.about-page{
6-
position: relative;
7-
top: -20px;
5+
.navbar-icon {
6+
width: 5em;
7+
height: 5em;
88
}
99

10-
.about-page .jumbotron{
11-
margin: 0;
12-
background:rgba(9,69,95,0.8);
13-
color: white;
14-
border-radius: 0 !important;
10+
.about-page .jumbotron {
11+
margin: 0;
12+
background: rgba(9, 69, 95, 0.8);
13+
color: white;
14+
border-radius: 0 !important;
1515
}
1616

1717
/*React apply activeClassName to <a> element, but Bootstrap active class is over <li> element*/
18-
.navbar .nav .active, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
19-
background: #e7e7e7 !important;
20-
color: #333 !important;
18+
19+
.navbar .nav .active,
20+
.navbar-default .navbar-nav>.active>a,
21+
.navbar-default .navbar-nav>.active>a:hover,
22+
.navbar-default .navbar-nav>.active>a:focus {
23+
background: white !important;
24+
color: #333 !important;
2125
}
2226

2327
.avatar {
24-
max-width: 80px
28+
max-width: 80px
29+
}
30+
31+
#navbar {
32+
padding-left: 0px !important;
2533
}
34+
35+
#header-title {
36+
background-color: rgb(238, 235, 235);
37+
}

‎04 DisplayData/src/images/lemoncode.png

Copy file name to clipboard
97.2 KB
Loading

‎04 DisplayData/src/router.tsx

Copy file name to clipboard
+11-8Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import * as React from 'react';
2-
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
2+
import { Route, Switch, HashRouter } from 'react-router-dom';
33
import { App } from './app';
44
import { About, MembersPage } from './components';
55

66
export const AppRouter: React.StatelessComponent<{}> = () => {
77
return (
8-
<Router history={hashHistory}>
9-
<Route path="/" component={App} >
10-
<IndexRoute component={About} />
11-
<Route path="/about" component={About} />
12-
<Route path="/members" component={MembersPage} />
13-
</Route>
14-
</Router>
8+
<HashRouter>
9+
<div className="container-fluid">
10+
<Route path="/" component={App} />
11+
<Switch>
12+
<Route exact path="/" component={About} />
13+
<Route path="/about" component={About} />
14+
<Route path="/members" component={MembersPage} />
15+
</Switch>
16+
</div>
17+
</HashRouter>
1518
);
1619
}

‎04 DisplayData/webpack.config.js

Copy file name to clipboard
+18-29Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
var path = require('path');
2-
var HtmlWebpackPlugin = require('html-webpack-plugin');
3-
var webpack = require('webpack');
1+
let path = require('path');
2+
let HtmlWebpackPlugin = require('html-webpack-plugin');
3+
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
4+
let webpack = require('webpack');
45

56
var basePath = __dirname;
67

@@ -15,11 +16,12 @@ module.exports = {
1516
vendor: [
1617
'react',
1718
'react-dom',
18-
'react-router',
19+
'react-router-dom',
1920
],
2021
vendorStyles: [
2122
'../node_modules/bootstrap/dist/css/bootstrap.css',
22-
],
23+
]
24+
2325
},
2426
output: {
2527
path: path.join(basePath, 'dist'),
@@ -28,7 +30,7 @@ module.exports = {
2830
module: {
2931
rules: [
3032
{
31-
test: /\.tsx?$/,
33+
test: /\.ts[x]?$/,
3234
exclude: /node_modules/,
3335
loader: 'awesome-typescript-loader',
3436
options: {
@@ -37,28 +39,14 @@ module.exports = {
3739
},
3840
{
3941
test: /\.css$/,
40-
use: [
41-
{ loader: 'style-loader' },
42-
{ loader: 'css-loader' },
43-
],
42+
use: [MiniCssExtractPlugin.loader, "css-loader"],
4443
},
45-
// Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
46-
// Using here url-loader and file-loader
4744
{
48-
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
49-
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
50-
},
51-
{
52-
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
53-
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
54-
},
55-
{
56-
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
57-
loader: 'file-loader'
58-
},
59-
{
60-
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
61-
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
45+
test: /\.(png|jpg|gif|svg)$/,
46+
loader: 'file-loader',
47+
options: {
48+
name: 'assets/img/[name].[ext]?[hash]'
49+
}
6250
},
6351
],
6452
},
@@ -75,8 +63,9 @@ module.exports = {
7563
template: 'index.html', //Name of template in ./src
7664
hash: true,
7765
}),
78-
new webpack.optimize.CommonsChunkPlugin({
79-
names: ['vendor', 'manifest'],
66+
new MiniCssExtractPlugin({
67+
filename: "[name].css",
68+
chunkFilename: "[id].css"
8069
}),
8170
],
82-
};
71+
};

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.