stelmakh/.editorconfig

## .editorconfig
# EditorConfig
# https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true

# 4 space indentation
[*.{js,jsx,ts,tsx,css}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
quote_type = single

# Configs
[.*rc,*.{json,yml}]
indent_size = 2
indent_style = space
trim_trailing_whitespace = true

[*.html]
indent_size = 2
indent_style = space
trim_trailing_whitespace = true

## .eslintignore
*.css

## .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript',
    'plugin:@typescript-eslint/recommended'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json']
  },
  plugins: [
    'react',
    'react-hooks'
  ],
  rules: {
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
}

## .gitignore
node_modules

## index.css
body {
    color: gray;
}

## index.html
<!DOCTYPE html>
<html>

<head lang="en">
  <title>Dropticket</title>
</head>


<body>
  <div id="app-root" />
</body>

</html>

## index.tsx
import React, {useCallback, useState} from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'

const App = () => {
    const [count, setCount] = useState(0);
    const onClick = useCallback(() => {
        setCount(count+1)
    }, [count])

    return (
        <div>
            <h1>Count is {count}</h1>
            <button onClick={onClick}>+1</button>
        </div>
    )

}

const container = document.getElementById('app-root');
const root = ReactDOM.createRoot(container!)
root.render(<App/>)

## instructions.md

      
    Raw
  

              instructions.md
            
          
    Env

Make sure you have node installed
Init repo

mkdir dropticket
cd dropticket
npm init
Fill it up
git init
Add .gitignore
Dependencies setup

Add typescript
yarn add -D typescript
Add some configs
Add .editorconfig file
Add tsconfig.json file
Install Webpack & deps
yarn add -D webpack webpack-cli webpack-dev-server css-loader html-webpack-plugin mini-css-extract-plugin ts-loader
Add webpack.config.js file
Add start script to package.json
"start": "webpack serve --port 3000",
Install React & deps
yarn add react react-dom
yarn add -D @types/react @types/react-dom
Add src/index.tsx
Add src/index.css
Setup eslint

yarn add -D eslint
npx eslint --init
Select proper options
Add plugin for react hooks
y add -D eslint-plugin-react-hooks
Add .eslintignore
Update .eslintrc.js
Add project: ['./tsconfig.json'] to parserOptions
Add 'plugin:@typescript-eslint/recommended' to extends
Add 'react-hooks' to plugins
Rules:
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'import/prefer-default-export': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn'

Testing

yarn add -D jest

  
## tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "jsx": "react",
    "lib": [
      "dom",
      "esnext"
    ],
    "strict": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "strictPropertyInitialization": false,
  },
  "exclude": [
    "node_modules"
  ]
}

## webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        resolve: {
          extensions: ['.ts', '.tsx', '.js', '.json'],
        },
        use: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ]
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    new MiniCssExtractPlugin(),
  ],
};
	# EditorConfig
	# https://EditorConfig.org

	# top-most EditorConfig file
	root = true

	# Unix-style newlines with a newline ending every file
	[*]
	charset = utf-8
	end_of_line = lf
	insert_final_newline = true

	# 4 space indentation
	[*.{js,jsx,ts,tsx,css}]
	indent_style = space
	indent_size = 4
	trim_trailing_whitespace = true
	quote_type = single

	# Configs
	[.rc,.{json,yml}]
	indent_size = 2
	indent_style = space
	trim_trailing_whitespace = true

	[*.html]
	indent_size = 2
	indent_style = space
	trim_trailing_whitespace = true
	module.exports = {
	env: {
	browser: true,
	es2021: true
	},
	extends: [
	'plugin:react/recommended',
	'standard-with-typescript',
	'plugin:@typescript-eslint/recommended'
	],
	overrides: [
	],
	parserOptions: {
	ecmaVersion: 'latest',
	sourceType: 'module',
	project: ['./tsconfig.json']
	},
	plugins: [
	'react',
	'react-hooks'
	],
	rules: {
	'@typescript-eslint/no-non-null-assertion': 'off',
	'@typescript-eslint/explicit-function-return-type': 'off',
	'react-hooks/rules-of-hooks': 'error',
	'react-hooks/exhaustive-deps': 'warn'
	}
	}
	<!DOCTYPE html>
	<html>

	<head lang="en">
	<title>Dropticket</title>
	</head>


	<body>
	<div id="app-root" />
	</body>

	</html>
	import React, {useCallback, useState} from 'react'
	import ReactDOM from 'react-dom/client'
	import './index.css'

	const App = () => {
	const [count, setCount] = useState(0);
	const onClick = useCallback(() => {
	setCount(count+1)
	}, [count])

	return (
	<div>
	<h1>Count is {count}</h1>
	<button onClick={onClick}>+1</button>
	</div>
	)

	}

	const container = document.getElementById('app-root');
	const root = ReactDOM.createRoot(container!)
	root.render(<App/>)
	{
	"compilerOptions": {
	"target": "esnext",
	"module": "esnext",
	"moduleResolution": "node",
	"esModuleInterop": true,
	"jsx": "react",
	"lib": [
	"dom",
	"esnext"
	],
	"strict": true,
	"sourceMap": true,
	"noImplicitAny": true,
	"noUnusedLocals": true,
	"strictPropertyInitialization": false,
	},
	"exclude": [
	"node_modules"
	]
	}
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');

	module.exports = {
	mode: 'development',
	entry: './src/index.tsx',
	output: {
	path: __dirname + '/dist/',
	},
	module: {
	rules: [
	{
	test: /\.(ts\|tsx)$/,
	exclude: /node_modules/,
	resolve: {
	extensions: ['.ts', '.tsx', '.js', '.json'],
	},
	use: 'ts-loader',
	},
	{
	test: /\.css$/,
	use: [MiniCssExtractPlugin.loader, 'css-loader'],
	},
	]
	},
	devtool: 'source-map',
	plugins: [
	new HtmlWebpackPlugin({
	template: 'index.html',
	}),
	new MiniCssExtractPlugin(),
	],
	};