Nick/react intro

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:prettier/recommended',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:@typescript-eslint/recommended',
   ],
   parser: '@typescript-eslint/parser',
@@ -21,5 +22,14 @@ module.exports = {
   plugins: ['react', '@typescript-eslint', 'prettier'],
   rules: {
     'prettier/prettier': ['error', { singleQuote: true }],
+    'react/prop-types': 0,
   },
+  overrides: [
+    {
+      files: ['webpack.config.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': ['off'],
+      },
+    },
+  ],
 };

README.md

@@ -1,6 +1,6 @@
 # Minesweeper
 
-## Secture 1: Introduction
+## Section 1: Introduction
 
 ### Minesweeper presentation
 
@@ -16,6 +16,9 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/2)
 
+
+## Section 2: Typescript recap
+
 ### Typescript basic
 ### Parametric typing with generics
 ### Interfaces, Types and Union
@@ -30,16 +33,37 @@
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/4)
 
-## Secture 2: Jest and TDD
+## Section 3: React intro
 
-### Ecma TC39 and Babel
+### Create React App
 
-[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/5)
+[Create React App](https://create-react-app.dev/)
 
-[What is Babel?](https://babeljs.io/docs/en/)
+### JSX at Glance
+
+[Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)
+
+### JSX compilation
+
+[Introducing the New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
+
+### Props and conditional rendering
 
+### Ecma TC39 and Babel
+
+[What is Babel?](https://babeljs.io/docs/en/)
 [TC39](https://tc39.es/)
 
+### Webpack intro
+
+[Webpack Getting Started](https://webpack.js.org/guides/getting-started/)
+
+### Webpack dev server
+
+[React intro examples pull request](https://github.com/nickovchinnikov/minesweeper/pull/10/files)
+
+## Section 4: Jest, TDD and basic game logic
+
 ### Jest testing framework (TDD vs TLD)
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/6)
@@ -48,7 +72,7 @@
 
 [Jest and TDD](https://medium.com/@suvodeep4119/javascript-tdd-using-jest-9b535c6be7be)
 
-### Basic game logic
+### Basic game functionality
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/7)
 

babel.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
 };

examples/ReactIntro/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/ReactIntro/App.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <Header logo={logo}>
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload!!!
+        </p>
+        <Link href="https://reactjs.org">Learn React</Link>
+      </Header>
+    </div>
+  );
+}
+
+interface HeaderProps {
+  logo?: string;
+}
+
+const Header: FC<HeaderProps> = ({ children, logo }) => (
+  <header className="App-header">
+    {logo ? (
+      <img src={logo} className="App-logo" alt="logo" />
+    ) : (
+      'There is no any logo!'
+    )}
+    {children}
+  </header>
+);
+
+interface LinkProps {
+  href: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  rel?: string;
+}
+
+const Link: FC<LinkProps> = ({ children, ...restProps }) => (
+  <a className="App-link" {...restProps}>
+    {children}
+  </a>
+);
+
+Link.defaultProps = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+};
+
+export default App;

examples/ReactIntro/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

examples/ReactIntro/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/ReactIntro/index.tsx

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