├── .gitignore ├── README.md ├── public └── main.css ├── tsconfig.json ├── index.html ├── src ├── header.tsx ├── custom-date.tsx ├── fruit-loops.tsx └── index.tsx ├── webpack.config.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Total React Tutorial 2 | 3 | documentation coming soon. -------------------------------------------------------------------------------- /public/main.css: -------------------------------------------------------------------------------- 1 | .primary-header { 2 | color: #62a3e5; 3 | font-size: 24px; 4 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "jsx": "react", 5 | "watch": true, 6 | "target": "es5", 7 | "lib": ["es6", "dom"] 8 | } 9 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Our project 4 | 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /src/header.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type HeaderProps = { 4 | text: string 5 | } 6 | 7 | function Header(props : HeaderProps) { 8 | React.useEffect(() => { 9 | alert(document.querySelector('#myHeader')); 10 | }) 11 | 12 | return ( 13 |

{props.text}

14 | ) 15 | } 16 | 17 | Header.displayName = "Header"; 18 | 19 | export { 20 | Header 21 | } -------------------------------------------------------------------------------- /src/custom-date.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | function CustomDate() { 4 | let [time, setTime] = React.useState("") 5 | 6 | let getTime = () => { 7 | setTime(new Date().toTimeString()); 8 | } 9 | 10 | return ( 11 |
12 | {time} 13 | 14 |
15 | ) 16 | } 17 | 18 | CustomDate.displayName = "CustomDate"; 19 | 20 | export { 21 | CustomDate 22 | } -------------------------------------------------------------------------------- /src/fruit-loops.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type FruitLoopsProps = { 4 | fruit : Array 5 | } 6 | 7 | function FruitLoops(props : FruitLoopsProps) { 8 | return ( 9 | 14 | ) 15 | } 16 | 17 | FruitLoops.displayName = "FruitLoops"; 18 | 19 | export { 20 | FruitLoops 21 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: "./src/index.tsx", 5 | devtool: "inline-source-map", 6 | output: { 7 | filename: "bundle.js", 8 | path: path.resolve(__dirname, 'dist') 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.tsx?$/, 14 | use: 'ts-loader', 15 | exclude: /node_modules/ 16 | } 17 | ] 18 | }, 19 | watch: true, 20 | resolve: { 21 | extensions: [".ts", ".tsx", ".js"] 22 | } 23 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { Header } from './header'; 4 | import { CustomDate } from './custom-date'; 5 | import { FruitLoops } from './fruit-loops'; 6 | 7 | let fruit : Array = [ 8 | "red", 9 | "green", 10 | "blue", 11 | "yellow", 12 | "pink", 13 | "brown" 14 | ] 15 | 16 | ReactDOM.render( 17 |
18 |
19 | 20 | 21 |

this is a paragraph

22 | Click me 23 |
, 24 | document.querySelector('#root') 25 | ) 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_tutorial", 3 | "version": "1.0.0", 4 | "description": "A react tutorial by Chris Hawkes", 5 | "main": "index.ts", 6 | "scripts": { 7 | "build": "webpack", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "Chris Hawkes", 11 | "license": "ISC", 12 | "dependencies": { 13 | "react": "^16.11.0", 14 | "react-dom": "^16.11.0" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^12.12.7", 18 | "@types/react": "^16.9.11", 19 | "@types/react-dom": "^16.9.4", 20 | "ts-loader": "^6.2.1", 21 | "typescript": "^3.7.2", 22 | "webpack": "^4.41.2", 23 | "webpack-cli": "^3.3.10" 24 | } 25 | } 26 | --------------------------------------------------------------------------------