mitchell/react-starter
1
0
Fork 0
mirror of https://github.com/mgerb/react-starter synced 2026-01-09 16:42:48 +00:00
Code Issues Releases Wiki Activity

updates

Browse Source
This commit is contained in:
mgerb42
2018-01-03 22:36:25 +01:00
parent ff21d15083
commit f4b5cd04a5
12 changed files with 787 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@@ -1,3 +1,3 @@
{ {
"presets": ["es2015", "react", "stage-0"] "presets": ["env", "react", "stage-0"]
} }

3
.prettierrc
View File

@@ -1,5 +1,6 @@
{ {
"singleQuote": true, "singleQuote": true,
"tabWidth": 2, "tabWidth": 2,
"trailingComma": "all" "trailingComma": "all",
"printWidth": 140
} }

1
@types/all/index.d.ts vendored
View File

@@ -1 +1,2 @@
// for libraries that don't have types
declare module 'this-is-a-test-module'; declare module 'this-is-a-test-module';

22
README.md
View File

@@ -1,17 +1,17 @@
# Starter project for React # Starter project for React
- [Typescript](https://www.typescriptlang.org/)
- Typescript - [React 16](https://reactjs.org/)
- React 16 - [React Router 4](https://reacttraining.com/react-router/)
- React Router 4 - [Webpack 3](https://webpack.js.org/)
- Webpack 3 - [Yarn](https://yarnpkg.com/lang/en/docs/install/)
- Yarn
Install yarn
https://yarnpkg.com/lang/en/docs/install/
## Commands ## Commands
- yarn install - yarn install
- yarn run dev - yarn start
http://localhost:8080 http://localhost:8080
## Note
There is currently a bug with yarn not updating package.json when upgrading packages.
[See more here](https://github.com/yarnpkg/yarn/issues/2042#issuecomment-269601927).
I added the `update-latest` script in package.json for a temporary fix.

12
app/components/Navbar/Navbar.scss
View File

@@ -2,9 +2,9 @@
.Navbar__nav { .Navbar__nav {
height: 40px; height: 40px;
border-bottom: 1px solid $light3; border-bottom: 1px solid $light1;
display: flex; display: flex;
background-color: $light1; background-color: $gray--lighter;
} }
.Navbar__header { .Navbar__header {
@@ -14,7 +14,7 @@
justify-content: space-between; justify-content: space-between;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background-color: $dark2; background-color: $background;
} }
.Navbar__item { .Navbar__item {
@@ -27,15 +27,15 @@
&:hover { &:hover {
color: $fontSecondary; color: $fontSecondary;
border-bottom: 2px solid $primaryBlue; border-bottom: 2px solid $blue;
} }
& + .Navbar__item { & + .Navbar__item {
border-left: 1px solid $light3; border-left: 1px solid $gray;
} }
} }
.Navbar__item--active { .Navbar__item--active {
color: $fontSecondary; color: $fontSecondary;
border-bottom: 2px solid $primaryBlue; border-bottom: 2px solid $blue;
} }

2
app/pages/NotFound/NotFound.tsx
View File

@@ -12,7 +12,7 @@ export default class NotFound extends React.Component<Props, State> {
super(props); super(props);
} }
render() { public render(): any {
return <div className="NotFound">404 Not Found</div>; return <div className="NotFound">404 Not Found</div>;
} }
} }

4
app/scss/style.scss
View File

@@ -4,7 +4,7 @@ html {
body { body {
color: $fontPrimary; color: $fontPrimary;
background-color: $light2; background-color: $white;
} }
.fa { .fa {
@@ -18,6 +18,6 @@ a {
transition: all 0.1s linear; transition: all 0.1s linear;
&:hover { &:hover {
color: $primaryBlue; color: $blue;
} }
} }

32
app/scss/variables.scss
View File

@@ -1,21 +1,15 @@
// colors $dark-blue: #1d2938;
$primaryBlue: #42adf4; $gray: #293341;
$white: darken(white, 10%); $gray--lighter: #3A4553;
$blue: #258de5;
$blue--lighter: saturate(lighten($blue, 10%), 100%);
$green: #39ce83;
$red: #e95779;
$white: #fff;
$light1: #e9eef2;
$gray1: #2e3136; $background: $dark-blue;
$gray2: #2a2d32; $foreground: #53718a;
$gray3: #23262a;
$gray4: #2e3136;
$gray5: #282b30;
$gray6: #1e2124;
$light1: #fff; $fontPrimary: lighten($gray, 50%);
$light2: #f4f4f4; $fontSecondary: lighten($gray, 60%);
$light3: #e3e3e3;
$dark2: #3a3f41;
$dark1: lighten($dark2, 5%);
$dark3: darken($dark2, 5%);
$fontPrimary: darken($light3, 10%);
$fontSecondary: darken($light3, 20%);

2
index.html
View File

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
</head> </head>
<body> <body>

58
package.json
View File

@@ -1,47 +1,49 @@
{ {
"name": "todoapp", "name": "react_starter",
"version": "1.0.0", "version": "1.0.0",
"description": "A seed for a simple react application with typescript.", "description": "A seed for a simple react application with typescript.",
"scripts": { "scripts": {
"build": "webpack -p --progress --colors", "build": "webpack -p --progress --colors",
"dev": "webpack --progress --colors --watch",
"c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --history-api-fallback", "c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --history-api-fallback",
"dev": "webpack-dev-server --inline --history-api-fallback", "start": "webpack-dev-server --inline --history-api-fallback",
"watch": "webpack --watch" "update-latest": "rm -rf node_modules && rm yarn.lock && ncu --upgrade --upgradeAll && yarn install"
}, },
"author": "Mitchell Gerber", "author": "Mitchell Gerber",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/react": "^16.0.10", "@types/react": "^16.0.34",
"@types/react-dom": "^16.0.1", "@types/react-dom": "^16.0.3",
"@types/react-router-dom": "^4.0.2", "@types/react-router-dom": "^4.2.3",
"autoprefixer": "^7.1.5", "autoprefixer": "^7.2.4",
"babel-core": "^6.21.0", "babel-core": "^6.26.0",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-es2015": "^6.18.0", "babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.16.0", "babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.16.0", "babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^0.1.14", "clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.7", "css-loader": "^0.28.7",
"extract-text-webpack-plugin": "3.0.1", "extract-text-webpack-plugin": "3.0.2",
"file-loader": "^1.1.5", "file-loader": "^1.1.6",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.24.1", "html-webpack-plugin": "^2.30.1",
"node-sass": "^4.5.3", "node-sass": "^4.7.2",
"normalize.css": "^7.0.0", "normalize.css": "^7.0.0",
"postcss-loader": "^2.0.8", "postcss-loader": "^2.0.9",
"prettier": "^1.7.4", "prettier": "^1.9.2",
"react": "^16.0.0", "react": "^16.2.0",
"react-dom": "^16.0.0", "react-dom": "^16.2.0",
"react-router-dom": "^4.0.0", "react-router-dom": "^4.2.2",
"resolve-url-loader": "^2.2.1",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"style-loader": "^0.19.0", "style-loader": "^0.19.1",
"ts-loader": "^2.0.3", "ts-loader": "^3.2.0",
"tslint": "^5.7.0", "tslint": "^5.8.0",
"tslint-config-airbnb": "^5.3.0", "tslint-config-airbnb": "^5.4.2",
"typescript": "^2.2.2", "typescript": "^2.6.2",
"url-loader": "^0.6.2", "url-loader": "^0.6.2",
"webpack": "3.7.1", "webpack": "3.10.0",
"webpack-dev-server": "2.9.2" "webpack-dev-server": "2.9.7"
} }
} }

69
webpack.config.js
View File

@@ -7,68 +7,69 @@ const webpack = require('webpack');
module.exports = { module.exports = {
entry: { entry: {
app: './app/app.tsx', app: './app/app.tsx',
vendor: ['react', 'react-dom'] vendor: ['react', 'react-dom'],
}, },
output: { output: {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js' filename: '[name].[hash].js',
}, },
resolve: { resolve: {
extensions: ['.ts', '.tsx', '.js'] extensions: ['.ts', '.tsx', '.js'],
}, },
module: { module: {
rules: [{ rules: [
{
test: /\.(js|jsx)$/, test: /\.(js|jsx)$/,
use: ['babel-loader'] use: ['babel-loader'],
}, { },
{
test: /\.ts(x)?$/, test: /\.ts(x)?$/,
use: ['babel-loader', 'ts-loader'] use: ['babel-loader', 'ts-loader'],
},{ },
{
test: /\.scss$/, test: /\.scss$/,
use: ExtractTextPlugin.extract({ use: ExtractTextPlugin.extract({
fallback: 'style-loader', fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader' use: ['css-loader', 'postcss-loader', 'sass-loader'],
}) }),
}, { },
{
test: /\.css$/, test: /\.css$/,
use: ExtractTextPlugin.extract({ use: ExtractTextPlugin.extract({
fallback: 'style-loader', fallback: 'style-loader',
use: 'css-loader' use: ['css-loader'],
}) }),
}, { },
test: /\.svg$/, {
use: 'url-loader?limit=65000&mimetype=image/svg+xml&name=static/[name].[hash].[ext]' test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
}, { use: [
test: /\.woff$/, {
use: 'url-loader?limit=65000&mimetype=application/font-woff&name=static/[name].[hash].[ext]' loader: 'file-loader',
}, { options: {
test: /\.woff2$/, name: 'static/[name].[hash].[ext]',
use: 'url-loader?limit=65000&mimetype=application/font-woff2&name=static/[name].[hash].[ext]' }
}, { },
test: /\.[ot]tf$/, ],
use: 'url-loader?limit=65000&mimetype=application/octet-stream&name=static/[name].[hash].[ext]' },
}, { ],
test: /\.eot$/,
use: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=static/[name].[hash].[ext]'
}]
}, },
plugins: [ plugins: [
new CleanWebpackPlugin(['dist'], { new CleanWebpackPlugin(['dist'], {
verbose: true verbose: true,
}), }),
new ExtractTextPlugin({ new ExtractTextPlugin({
filename: '[name].css', filename: '[name].[hash].css',
disable: false, disable: false,
allChunks: true allChunks: true
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: 'index.html', filename: 'index.html',
template: './index.html' template: './index.html',
}), }),
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'manifest'], name: ['vendor', 'manifest'],
minChunks: 'Infinity' minChunks: 'Infinity',
}), }),
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
] ],
}; };

1057
yarn.lock
View File

File diff suppressed because it is too large Load Diff