Skip to content

Commit ef63c87

Browse files
author
Karen McAdams
committed
initial commit
0 parents  commit ef63c87

File tree

13 files changed

+389
-0
lines changed

13 files changed

+389
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.prettier‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"trailingComma": "all",
3+
"tabWidth": 2,
4+
"semi": false,
5+
"singleQuote": true
6+
}

‎README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Starter App set up
2+
3+
## Initial Setup - sans babel transpilation
4+
5+
- mkdir starter
6+
- cd starter
7+
- code .
8+
- npm i react react-dom
9+
- npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin html-webpack-loader clean-webpack-plugin typescript ts-loader prettier @types/react @types/react-dom
10+
- npm init -y
11+
- tsc --init
12+
- git init
13+
- .gitignore
14+
- touch .prettier webpack.config.js template.html src/index.tsc src/components/app.tsx
15+
- add tasks to package.json
16+
17+
## Development setup
18+
19+
### use case specific resources
20+
21+
install packages and configure webpack
22+
23+
- add bootstrap
24+
- add css
25+
- add images
26+
- add svg
27+
- add file
28+
- add sass
29+
- components?
30+
31+
## TEST setup
32+
33+
install test tools
34+
configure webpack
35+
add tasks to package.json
36+
37+
## Deployment setup
38+
39+
add deployment related resources
40+
add deployment tasks to package.json
41+
42+
## PRODUCTION Build setup
43+
44+
configure webpack for build optimizations
45+
46+
## List of recommended vscode extensions
47+
48+
install Fira Code
49+
50+
List of teachers whose recommendations lessons i consumed to create this

‎assets/favicon.ico‎

15 KB
Binary file not shown.

‎assets/template.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
6+
<title>THIS IS THE TEMPLATE</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "starter-tsx",
3+
"version": "1.0.0",
4+
"description": "Starter Setup",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no tests yet\" && exit 1",
8+
"watch": "webpack --watch",
9+
"build": "webpack ---config webpack.prod.js",
10+
"start": "webpack-dev-server --open --hot --config webpack.dev.js",
11+
"server": "node server/server.js",
12+
"json-server": "json-server ./server/db.json --static ./dist",
13+
"profile": "webpack --profile --json > dist/stats.json",
14+
"analyze": "webpack-bundle-analyzer dist/stats.json",
15+
"build-start": "npm run build && npm run json-server"
16+
},
17+
"keywords": [],
18+
"author": "",
19+
"license": "ISC",
20+
"dependencies": {
21+
"react": "^16.12.0",
22+
"react-dom": "^16.12.0"
23+
},
24+
"devDependencies": {
25+
"@types/node": "^13.7.2",
26+
"@types/react": "^16.9.19",
27+
"@types/react-dom": "^16.9.5",
28+
"clean-webpack-plugin": "^3.0.0",
29+
"css-loader": "^3.4.2",
30+
"file-loader": "^5.0.2",
31+
"html-webpack-loader": "0.0.5",
32+
"html-webpack-plugin": "^3.2.0",
33+
"json-server": "^0.16.1",
34+
"prettier": "^1.19.1",
35+
"style-loader": "^1.1.3",
36+
"terser-webpack-plugin": "^2.3.5",
37+
"ts-loader": "^6.2.1",
38+
"typescript": "^3.8.2",
39+
"webpack": "^4.41.5",
40+
"webpack-bundle-analyzer": "^3.6.0",
41+
"webpack-cli": "^3.3.10",
42+
"webpack-dev-server": "^3.10.3",
43+
"webpack-merge": "^4.2.2"
44+
}
45+
}

‎src/components/App.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * from React from "react";
2+
3+
type FormElem = React.FormEvent<HTMLFormElement>;
4+
interface ITodo {
5+
text: string;
6+
complete: boolean;
7+
}
8+
9+
export default function App(): JSX.Element {
10+
const [value, setValue] = React.useState<string>("");
11+
const [todos, setTodos] = React.useState<ITodo[]>([]);
12+
13+
const handleSubmit = (e: FormElem): void => {
14+
e.preventDefault();
15+
addTodo(value);
16+
setValue("");
17+
};
18+
const addTodo = (text: string): void => {
19+
const newTodos: ITodo[] = [...todos, { text, complete: false }];
20+
setTodos(newTodos);
21+
};
22+
const completeTodo = (index: number): void => {
23+
const newTodos: ITodo[] = [...todos];
24+
newTodos[index].complete = !newTodos[index].complete;
25+
setTodos(newTodos);
26+
};
27+
const removeTodo = (index: number): void => {
28+
console.log(index);
29+
const newTodos: ITodo[] = todos.filter((todo, i) => index !== i);
30+
setTodos(newTodos);
31+
};
32+
33+
return (
34+
<>
35+
<h1>TODO LIST</h1>
36+
<form onSubmit={handleSubmit}>
37+
<input
38+
type="text"
39+
required
40+
value={value}
41+
onChange={e => setValue(e.target.value)}
42+
/>
43+
<button type="submit">Add Todo</button>
44+
</form>
45+
<section>
46+
{todos.map((todo: ITodo, index: number) => (
47+
<React.Fragment key={index}>
48+
<div
49+
style={{ textDecoration: todo.complete ? "line-through" : "" }}
50+
>
51+
{todo.text}
52+
</div>
53+
<button type="button" onClick={() => completeTodo(index)}>
54+
{todo.complete ? "Incomplete" : "Complete"}
55+
</button>
56+
<button type="button" onClick={() => removeTodo(index)}>
57+
Remove {todo.text}
58+
</button>
59+
</React.Fragment>
60+
))}
61+
</section>
62+
</>
63+
);
64+
}

‎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+
import App from "./components/App";
4+
5+
const root = document.getElementById("root");
6+
ReactDOM.render(<App />, root);

‎tsconfig.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
{
2+
"compilerOptions": {
3+
/* Basic Options */
4+
// "incremental": true, /* Enable incremental compilation */
5+
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
6+
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
7+
// "lib": [], /* Specify library files to be included in the compilation. */
8+
"allowJs": true /* Allow javascript files to be compiled. */,
9+
// "checkJs": true, /* Report errors in .js files. */
10+
"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
11+
// "declaration": true, /* Generates corresponding '.d.ts' file. */
12+
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
13+
"sourceMap": true /* Generates corresponding '.map' file. */,
14+
// "outFile": "./", /* Concatenate and emit output to single file. */
15+
"outDir": "./public" /* Redirect output structure to the directory. */,
16+
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17+
// "composite": true, /* Enable project compilation */
18+
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
19+
// "removeComments": true, /* Do not emit comments to output. */
20+
// "noEmit": true, /* Do not emit outputs. */
21+
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
22+
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
23+
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
24+
25+
/* Strict Type-Checking Options */
26+
//"strict": true /* Enable all strict type-checking options. */,
27+
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
28+
"strictNullChecks": true,
29+
/* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */
30+
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
31+
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
32+
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
33+
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
34+
35+
/* Additional Checks */
36+
// "noUnusedLocals": true, /* Report errors on unused locals. */
37+
// "noUnusedParameters": true, /* Report errors on unused parameters. */
38+
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
39+
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
40+
41+
/* Module Resolution Options */
42+
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
43+
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
44+
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
45+
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
46+
// "typeRoots": [], /* List of folders to include type definitions from. */
47+
// "types": [], /* Type declaration files to be included in compilation. */
48+
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
49+
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
50+
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
51+
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
52+
53+
/* Source Map Options */
54+
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
55+
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
56+
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
57+
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
58+
59+
/* Experimental Options */
60+
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
61+
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
62+
63+
/* Advanced Options */
64+
//"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
65+
}
66+
}

‎webpack.common.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const path = require("path");
2+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3+
const HtmlWebpackPlugin = require("html-webpack-plugin");
4+
5+
module.exports = {
6+
target: "web",
7+
entry: {
8+
app: "./src/index.tsx"
9+
},
10+
module: {
11+
rules: [
12+
{
13+
test: /\.(t|j)sx?$/,
14+
use: { loader: "ts-loader" },
15+
exclude: /node_modules/
16+
},
17+
{
18+
test: /\.css$/i,
19+
use: ["style-loader", "css-loader"]
20+
},
21+
{
22+
test: /\.(svg|png|gif|jpg)?$/,
23+
use: ["file-loader"]
24+
},
25+
{
26+
test: /\.(woff|woff2|eot|ttf|otf)$/,
27+
use: ["file-loader"]
28+
}
29+
]
30+
},
31+
resolve: {
32+
extensions: [".ts", ".tsx", ".js", ".jsx"]
33+
},
34+
plugins: [
35+
// new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
36+
new CleanWebpackPlugin(),
37+
new HtmlWebpackPlugin({
38+
title: "Production",
39+
template: "./assets/template.html",
40+
favicon: "./assets/favicon.ico"
41+
})
42+
],
43+
output: {
44+
filename: "[name].bundle.js",
45+
path: path.resolve(__dirname, "dist")
46+
}
47+
};

0 commit comments

Comments
 (0)