chore: add redux, react-testing-library

README.md

@@ -8,7 +8,7 @@ Ideal method for creating React apps from beginning
 - React 16.8 (with Hooks)
 - React-dom 16.8
 - React-router 4.3
-- Styled-components 4.1
+- Styled-components 4.3
 
 ## Installation
 

package.json

@@ -5,7 +5,13 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-redux": "^7.1.0",
+    "react-router": "^5.0.1",
+    "react-scripts": "3.0.1",
+    "redux": "^4.0.1",
+    "redux-actions": "^2.6.5",
+    "styled-components": "^4.3.2",
+    "typescript": "^3.5.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +33,16 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/react": "^8.0.1",
+    "@types/jest": "^24.0.15",
+    "@types/node": "^12.0.10",
+    "@types/react": "^16.8.22",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-redux": "^7.1.0",
+    "@types/react-router": "^5.0.2",
+    "@types/redux-actions": "^2.6.1",
+    "@types/styled-components": "^4.1.16"
   }
 }

src/App.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+// This is example of styled-components
+const Container = styled.main`
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+// This is example of styled-components with TypeScript or you can make interface of props
+const Header = styled("header")<{ toggleState: boolean }>`
+  background: linear-gradient(#eee, #333);
+  -webkit-background-clip: text;
+  color: ${({ toggleState }) => (toggleState ? "grey" : "black")}
+  transition: 0.5s ease-in-out;
+  font-size: 3rem;
+  font-weight: 900;
+  text-transform: uppercase;
+`;
+
+// This is example of react-hooks with TypeScript
+function useToggle(defaultValue: boolean) {
+  const [toggleState, setToggleState] = useState(defaultValue);
+
+  function onMouseOver() {
+    setToggleState(true);
+  }
+
+  function onMouseOut() {
+    setToggleState(false);
+  }
+
+  return { toggleState, onMouseOver, onMouseOut };
+}
+
+function App() {
+  const toggle = useToggle(false);
+  return (
+    <Container className="App">
+      <Header {...toggle} className="App-header">
+        react, typescript, styled-components
+        <br />
+        boilerplate
+      </Header>
+    </Container>
+  );
+}
+
+export default App;

src/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es2020",
+    "lib": [
+      "es6",
+      "es7",
+      "dom",
+      "es2017.object",
+      "esnext.asynciterable",
+      "es2016.array.include"
+    ],
+    "typeRoots": ["./src/types/alltypes.d.ts", "../../node_modules/@types"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts"
+  ],
+  "include": ["src"]
+}