About me
4 |-
5 |
- Vitalii Ruban 6 |
- Head of Front-End department in Itera 8 | 9 |
- Member of the program committee JsFest Ukraine 11 | 12 | 13 |
- Love #webperf and #websec 14 |
- 15 | LinkedIn, 16 | Twitter 17 | 18 |
This course is for
24 | 25 |-
26 |
- Beginners 27 |
- Who already knowns HTML/CSS/JavaScript and 28 |
- Want to learn React 29 |
We will talk about
35 | 36 |-
37 |
- 38 | 40 | What is React 41 | 42 | 43 |
- 44 | 46 | How to start react application from scratch 47 | 48 | 49 | 50 |
- 51 | 53 | What is React Component 54 | 55 | 56 |
- 57 | 59 | How build react components 60 | 61 | 62 | 63 |
And about
69 |-
70 |
- 71 | 73 | How to style react 74 | 75 | 76 |
- 77 | 79 | What is change detection 80 | 81 | 82 | 83 |
- 84 | 86 | Managing State in React 87 | 88 | 89 |
- 90 | 92 | Dealing with Forms 93 | 94 | 95 | 96 |
And about
102 |-
103 |
- 104 | 105 | 107 | 108 | Routing in React 109 | 110 | 111 | 112 |
- 113 | 114 | 116 | React and network 117 | 118 | 119 | 120 |
- 121 | 122 | 124 | 125 | UI Libraries 126 | 127 | 128 | 129 |
- 130 | 132 | React and Tests 133 | 134 | 135 | 136 |
33 |
67 |
68 |
69 |
70 |
71 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/presentations/pet-project/body.html:
--------------------------------------------------------------------------------
1 | About me
4 |-
5 |
- Vitalii Ruban 6 |
- 7 | Head of Front-End department in Itera 8 | 9 |
- 10 | Member of the program committee 11 | JsFest Ukraine 12 | 13 |
- Love #webperf and #websec 14 |
- 15 | LinkedIn, 21 | Twitter 22 | 23 |
Part of my projects
28 | 29 |-
30 |
-
31 | Chrome Extension -
32 | HabroSanitizer
34 |
35 |
38 |
39 | - 40 | Visual Studio Extension - Angular 2 Web template - 30k downloads 41 | 42 | 43 |
-
44 | NPM project - IsNumberStrict
45 |
46 |
47 | - And others ... 48 |
However - much more of them was completely failed
53 |What is a Pet Project
59 |What is the main difference between Pet and Learning Project?
63 |Main goal for a learning project - is to generate some knowledge
67 |Main goal for a pet project - is to be fun ?
71 |To me - main goal for a pet project - is to be both fun and released
75 |Considering Pet project - always think about the release
79 |And what about the demo project?
83 |84 | A demo project is something that should demonstrates your skills. It should not be fun or 85 | released. Just show how good you are. 86 |
87 |Hot to pick a theme
93 |Good theme is super important
97 |98 | The good theme will support you during the development and attract other people after the 99 | release 100 |
101 |Never pick a PetProject that doesn't resonate with your heart
105 |Two ways to pick a good theme
109 |Something fun
113 |Something painful
117 |Example - the Shooter Log
121 |Planing
127 |Pet project is a race against yourself - until you get bored and tired
131 |When doing pet project you will not have much time for a detailed planning
135 |-
139 |
- Set one (maximum two) goals 140 |
- 141 | Categorize all work as must have (the solution is useless without such features) and nice to 142 | have 143 | 144 |
- Implement only must have features 145 |
- Note nice to have features somewhere just not to forget 146 |
For the first 2-3 projects
151 | 152 |-
153 |
- Not more than 16-20 hours 154 |
- Not more than 2-3 weeks 155 |
Remember - something unplanned will happen, be prepared to X3 time
160 |Time management tips
Set aside some dedicated time for your project
167 |Pet project is not something unserious
168 |Work on a regular basis
172 | 173 |Better to work 2 hours every day, rather than 6 -> 2 -> 0
174 |Focus on a one task at a time
178 |Define -> Code -> Commit -> Relax
179 |Pitfalls
185 |Underestimates
189 | 190 |Don't try to create a new FaceBook (at least from the first attempt)
191 |Avoid adding non crucial features
195 | 196 |Implement only the features that are absolutely needed for the project
197 |Minimize infrastructure work
201 |For the small projects, hard automatization takes more time than actually coding
202 |Release should be you primary focus
203 |Pausing
207 |Work regularly and avoid pause
208 |Abandoning
212 |Abandoning project might lead you to the lack of self-esteem
213 |Thus, first project better to be small and 99% doable
214 |Turn it into work
218 |Pet project HAVE to be fun, it should makes you proud and happy
219 |What about:
225 |Team work
229 |The same except each new teammate increase general velocity for 0.8 then previous
230 |Things after release
234 |235 | Don't be shy to promote your project. You will gain extra experience, your first users and, 236 | might be even become a unicorn! 237 |
238 |
34 |
100 |
101 |
102 |
103 |
104 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/presentations/react-change-detection/body.html:
--------------------------------------------------------------------------------
1 | What is change detection
4 |Change detection - mechanism that tracks data changes and notifies appropriate listeners
8 |As an example - look on the BtnWithCounter:
12 |state = {counter: 0}
13 | ⬇️
14 | Clicked 0 times
15 | 🖱️ Click
16 | ⬇️
17 | setState({counter:1})
18 | ⬇️
19 | Clicked 1 times
20 | It looks very simple from the first sight but imagine:
24 |-
25 |
- Rich data 26 |
- Rich user interaction 27 |
- Backend interaction 28 |
🤯🤯🤯
30 |Two ways to track changes
34 |39 | Implicit change detection strategy 40 |
41 |Angular way
44 |
45 | class CalculatorService {
46 | income: number;
47 | setIncome(newIncome){
48 | this.income = newIncome;
49 | }
50 | }
51 |
52 |
53 |
54 | {{income}}
55 |
56 | 60 | No special actions to inform framework that data changes 61 |
62 |In Angular this works because of NgZone and patching all DOM 67 | events 68 |
69 | 70 |Whenever something happens - click, network, input - Angular starts checking changes
71 |React uses another way - explicit
78 |With explicit way you have to somehow notify framework that data changes
82 |Usually this achieved with using special methods
83 |For class based components - setState
87 |setState({})For functional components - useState hook
92 |const [counter, setCounter] = useState({});
93 | setCounter(1);
94 | Ok, we notified react that data changed. What next?
99 |-
103 |
- After the notification React will recalculate all components which
104 |
-
105 |
- changed props 106 |
- changed state 107 |
- all child functional components for p.1 and p2 108 |
110 | - Build new Virtual DOM based on the results 111 |
- Find the diff 112 |
- Updates real DOM to match new Virtual DOM 113 |
Typical mistakes
119 |123 | 💔 Ignoring state when data is subject to change 124 |
125 | 126 |const data = { counter: 0 };
127 | const MyBtn = () => {
128 | return <button onClick={() => (data.counter += 1)}>
129 | {data.counter}
130 | </button>;
131 | };
132 | 💔 Mutating state directly, without special methods
137 |const MyBtn = () => {
138 | const [data] = useState({ counter: 0 });
139 | return <button onClick={() => (data.counter += 1)}>
140 | {data.counter}
141 | </button>;
142 | };
143 | 💔 Also applicable for Class based components
148 |class MyBtn extends Component {
149 | state = { counter: 0 };
150 | render() {
151 | return (
152 | <button onClick={() => (this.state.counter += 1)}>
153 | {this.state.counter}
154 | </button>
155 | );}
156 | }
157 | 💔 Mixing approach
162 |163 | Using this.setState() with functional components 164 |
165 | 166 |167 | Using useState with class-based components 168 |
169 |If you data is supposed to change - use state and don't mutate it directly
173 | 174 |-
175 |
- setState for class components 176 |
- useSate for functional components 177 |
34 |
71 |
72 |
73 |
74 |
75 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/presentations/react-components/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
116 |
117 |
118 |
119 |
120 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/presentations/react-cra/body.html:
--------------------------------------------------------------------------------
1 | Starting new React project from scratch using create-react-app
4 |Open VsCode's console with CTRL+`
9 |
10 | npx create-react-app myproj --template typescript
11 |
12 |
13 | Let's read it
17 | 18 |
19 | npx create-react-app myproj --template typescript
20 |
21 | -
22 |
- 23 | npx - the npm tool that allow you to download npm package and execute it 24 | 25 |
- 26 | create-react-app - npm package from Meta (Facebook) that creates new project 27 | with default structure and all dependencies 28 | 29 |
- 30 | myproj - name of the project 31 | 32 |
- 33 | --template typescript - template to use for project scaffolding. We will use 34 | template with typescript 35 | 36 |
42 | Download the create-react-app package from npm and execute it with parameter template equals to 43 | typescript 44 |
45 |Project structure
51 |
55 |
59 | /public
60 | index.html // root file to load
61 | manifest.json // web app metadata
62 | /src
63 | App.css // styles related to the App component
64 | App.test.tsx // tests related to the App component
65 | App.tsx // App component
66 | index.css // Global styles
67 | react-app-env.d.ts // extra types
68 | reportWebVitals.ts // performance metrics report
69 | setupTests.ts // test configuration
70 | .gitignore // git ignore configuration
71 | package-lock.json // all project dependencies
72 | package.json // project configuration file
73 | tsconfig.json // typescript configuration file
74 |
75 |
76 |
77 | Files you need to know
83 |Index.html
87 | 88 |
89 | index.tsx
93 | 94 |
95 | App.tsx
99 | 100 |
101 | App.test.tsx
105 |
106 | package.json
110 |
111 | Predefined commands
117 |Start
121 |Start application for local development
122 |npm startTest
127 |Tests application
128 |npm testBuild
133 |Builds application for production - bundling, minification, etc
134 |npm run buildEject
138 |Converts create-react-app to the regular front-end app
139 |npm run eject⚠️ It's one time action
141 |Code examples
147 |-
151 |
- Open the folder with VsCode 152 |
- Hit CTRL ~ to start terminal 153 |
- type npm start in the console 154 |
159 |
164 | import "./App.css";
165 |
166 | function App() {
167 | return (
168 | <div className="App">
169 | hello world
170 | </div>;
171 | );
172 | }
173 |
174 | export default App;
175 |
176 |
177 |
178 | Line by line
181 |
182 | import "./App.css";
183 |
184 | function App() {
185 | return (
186 | <div className="App">
187 | hello world
188 | </div>;
189 | );
190 | }
191 |
192 | export default App;
193 |
194 |
195 |
196 | 200 | Feel free to alter the code inside the div. You can add any other HTML tag you know or 201 | text. However, tags are not HTML - it's TSX 203 |
204 | 205 |206 | After saving the file React will update the UI automatically. This called Hot Module Reloading 207 |
208 |
214 | import "./App.css";
215 |
216 | const data = { greetings: "Hello World!" };
217 |
218 | function App() {
219 | return ({data.greetings});
220 | }
221 |
222 | export default App;
223 |
224 |
225 | Alternatives
232 |Vite
236 | 237 |npm init viteVite benefits
242 |-
243 |
- Very fast HMR 244 |
- Less dependencies 245 |
Vite cons
250 |-
251 |
- Needs more tuning - like linters 252 |
- It's not a webpack 253 |
34 |
121 |
122 |
123 |
124 |
125 |
130 |
131 |
132 |
--------------------------------------------------------------------------------
/presentations/react-forms/code/default-form.tsx:
--------------------------------------------------------------------------------
1 | import React, { ChangeEvent, Component, FormEvent, PureComponent } from "react";
2 | import { createRoot } from "react-dom/client";
3 |
4 | class MyForm extends PureComponent {
5 | state = { email: "test" };
6 | render() {
7 | return (
8 |
19 | );
20 | }
21 |
22 | private _handleSubmit = (e: FormEvent
34 |
96 |
97 |
98 |
99 |
100 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/presentations/react-hooks/code/useReducer.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useCallback, useReducer } from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import reportWebVitals from "./reportWebVitals";
5 |
6 | enum ActionType {
7 | SET_NAME,
8 | INCREMENT_SALARY,
9 | FIRE,
10 | }
11 |
12 | type NumberAction{employeeName} is fired
65 | );
66 |
67 | type EmployeeInterfaceProps = {
68 | employeeName: string;
69 | salary: number;
70 | onSalaryIncrement: () => void;
71 | onFired: () => void;
72 | };
73 |
74 | const EmployeeInterface: FC
82 |
91 | );
92 | };
93 |
94 | ReactDOM.createRoot(document.getElementById("root")!).render(Employee: {employeeName}
83 |Salary: {salary}
84 |
87 |
90 |
34 |
107 |
108 |
109 |
110 |
111 |
116 |
117 |
118 |
--------------------------------------------------------------------------------
/presentations/react-intro/img/old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/react-intro/img/old.png
--------------------------------------------------------------------------------
/presentations/react-intro/img/pb24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/react-intro/img/pb24.png
--------------------------------------------------------------------------------
/presentations/react-intro/img/react-ang-vue-downloads-020422.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/react-intro/img/react-ang-vue-downloads-020422.png
--------------------------------------------------------------------------------
/presentations/react-intro/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
107 |
108 |
109 |
110 |
111 |
116 |
117 |
118 |
--------------------------------------------------------------------------------
/presentations/react-network/code/fetch-axios.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from "react-dom/client";
2 | import Axios from "axios";
3 | import { PureComponent, useEffect, useState } from "react";
4 |
5 | const FREE_API_URL =
6 | "https://api.publicapis.org/entries?auth=null&cors=no&category=animals";
7 |
8 | const axios = Axios.create();
9 | axios.interceptors.response.use((response) => {
10 | console.log(`${response.request.responseURL}:${response.status}`);
11 | return response;
12 | });
13 |
14 | const useFreeApi = () => {
15 | const [data, setApi] = useState({ errored: false, apis: [] });
16 | useEffect(() => {
17 | const abort = new AbortController();
18 | async function updateApi() {
19 | try {
20 | const { data } = await axios.get(FREE_API_URL, {
21 | signal: abort.signal,
22 | timeout: 1500,
23 | });
24 | const { entries } = data;
25 | setApi({ errored: false, apis: entries });
26 | } catch (error) {
27 | setApi({ errored: true, apis: [] });
28 | }
29 | }
30 | updateApi();
31 |
32 | return () => abort.abort();
33 | }, []);
34 | return data;
35 | };
36 |
37 | const FreeApi = () => {
38 | const { errored, apis } = useFreeApi();
39 | return errored ? (
40 | Something went wrong
41 | ) : (
42 | -
43 | {apis.map(({ API, Link }) => (
44 |
- 45 | {API}::{Link} 46 | 47 | ))} 48 |
Something went wrong
24 | ) : (
25 | - {apis.map(({ API, Link }) => (
26 |
- 27 | {API}::{Link} 28 | 29 | ))} 30 |
Something went wrong
28 | ) : (
29 | -
30 | {apis.map(({ API, Link }) => (
31 |
- 32 | {API}::{Link} 33 | 34 | ))} 35 |
Something went wrong
56 | ) : (
57 | -
58 | {apis.map(({ API, Link }) => (
59 |
- 60 | {API}::{Link} 61 | 62 | ))} 63 |
32 | {api}::{link}
33 |
34 | ))}
35 |
36 | );
37 |
38 | class App extends PureComponent {
39 | render() {
40 | return
34 |
105 |
106 |
107 |
108 |
109 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/presentations/react-new-component/code/counter-cb.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { createRoot } from "react-dom/client";
3 | import "./index.css";
4 |
5 | type BtnWithCounterProps = {
6 | onAfterChange: (v: number) => void;
7 | };
8 |
9 | class BtnWithCounter extends React.PureComponent{message}
;
11 | }
12 | }
13 |
14 | const MyApp = () => {message}
9 | );
10 |
11 | const MyApp = () =>
34 |
113 |
114 |
115 |
116 |
117 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/presentations/react-router/code/react-routing.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, FC } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import "./index.css";
4 |
5 | import {
6 | BrowserRouter,
7 | Routes,
8 | Route,
9 | useParams,
10 | Navigate,
11 | Link,
12 | Outlet,
13 | } from "react-router-dom";
14 |
15 | const UserPage = () => {
16 | const { userName } = useParams();
17 | return (
18 |
19 | Hello user: {userName}
20 |
30 | );
31 | };
32 |
33 | type UserData = { user?: { authenticated: boolean } };
34 |
35 | const UserPageGuard: FC
21 | View:
23 |
24 | Default view
25 |
26 |
27 | Posts view
28 |
29 |
34 |
115 |
116 |
117 |
118 |
119 |
124 |
125 |
126 |
--------------------------------------------------------------------------------
/presentations/react-state-management/code/index_ctx.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, FC, useContext } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import "./index.css";
4 |
5 | // Context that acts as a store
6 | const Context = createContext({
7 | nationality: "unknown",
8 | setNationality: (_: string) => {},
9 | });
10 |
11 | type UserInputProps = {};
12 |
13 | // Component to show user details
14 | const L3: FC = () => {
15 | const { nationality } = useContext(Context);
16 | return {nationality};
17 | };
18 |
19 | // Some component #2
20 | const L2: FCMy App
60 |My App
52 |My App
63 |My App
66 |
34 |
114 |
115 |
116 |
117 |
118 |
123 |
124 |
125 |
--------------------------------------------------------------------------------
/presentations/react-styling/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
105 |
106 |
107 |
108 |
109 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/presentations/react-testing/imgs/failed-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/react-testing/imgs/failed-example.png
--------------------------------------------------------------------------------
/presentations/react-testing/imgs/pyramide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/react-testing/imgs/pyramide.png
--------------------------------------------------------------------------------
/presentations/react-testing/imgs/snapshottesting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/react-testing/imgs/snapshottesting.png
--------------------------------------------------------------------------------
/presentations/react-testing/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
98 |
99 |
100 |
101 |
102 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/presentations/react-ui-lib/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
98 |
99 |
100 |
101 |
102 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/presentations/shared/helpers.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --footer-size: 2rem;
3 | }
4 |
5 | .left {
6 | text-align: left;
7 | }
8 |
9 | pre > code.pre-code-l {
10 | max-height: 500px;
11 | }
12 |
13 | .reveal .green {
14 | color: #17ff2e;
15 | }
16 |
17 | .reveal .red {
18 | color: red;
19 | }
20 |
21 | .scrollable-slide {
22 | height: 100%;
23 | overflow-y: auto !important;
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | width: 6px;
28 | }
29 | ::-webkit-scrollbar-track {
30 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
31 | }
32 | ::-webkit-scrollbar-thumb {
33 | background-color: #333;
34 | }
35 | ::-webkit-scrollbar-corner {
36 | background-color: #333;
37 | }
38 |
39 | .footer {
40 | position: absolute;
41 | display: flex;
42 | bottom: 0;
43 | max-height: var(--footer-size, 32px);
44 | width: 100%;
45 | flex-direction: row-reverse;
46 | }
47 |
48 | .footer img {
49 | max-height: var(--footer-size, 32px);
50 | }
51 |
52 | .ukraine {
53 | color: #fff;
54 | line-height: 1em;
55 | overflow-wrap: anywhere;
56 | background: linear-gradient(to bottom, #015bbb 50%, #fed500 50%);
57 | padding: 1.5rem 0.5rem;
58 | }
59 |
60 | .two-column {
61 | display: flex;
62 | text-align: left;
63 | flex-direction: row;
64 | }
65 |
--------------------------------------------------------------------------------
/presentations/shared/imgs/39900370_1138320566319759_9157901823137284096_n.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/shared/imgs/39900370_1138320566319759_9157901823137284096_n.jpg
--------------------------------------------------------------------------------
/presentations/shared/imgs/Itera-logo-white-fuchsia.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/shared/imgs/Itera-logo-white-fuchsia.jpg
--------------------------------------------------------------------------------
/presentations/shared/imgs/babich.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/shared/imgs/babich.jpg
--------------------------------------------------------------------------------
/presentations/shared/imgs/njsr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/shared/imgs/njsr.png
--------------------------------------------------------------------------------
/presentations/shared/imgs/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/shared/imgs/title.png
--------------------------------------------------------------------------------
/presentations/shared/index.css:
--------------------------------------------------------------------------------
1 | @import './vscode.css';
2 | @import './helpers.css';
3 |
--------------------------------------------------------------------------------
/presentations/shared/init.js:
--------------------------------------------------------------------------------
1 | import Reveal from 'reveal.js';
2 | import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
3 | import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
4 |
5 | (function init() {
6 | const reveal = new Reveal({
7 | plugins: [Markdown, Highlight],
8 | hash: true,
9 | });
10 |
11 | function resetSlideScrolling(slide) {
12 | slide.classList.remove('scrollable-slide');
13 | }
14 |
15 | function handleSlideScrolling(slide) {
16 | if (slide.scrollHeight >= 800) {
17 | slide.classList.add('scrollable-slide');
18 | }
19 | }
20 |
21 | reveal.addEventListener('ready', function (event) {
22 | handleSlideScrolling(event.currentSlide);
23 | });
24 |
25 | reveal.addEventListener('slidechanged', function (event) {
26 | const isFirstSlide = event.indexh === 0 && event.indexv === 0;
27 | const display = isFirstSlide ? 'flex' : 'none';
28 | const footer = document.querySelector('.footer');
29 | footer && (footer.style.display = display);
30 | if (event.previousSlide) {
31 | resetSlideScrolling(event.previousSlide);
32 | }
33 | handleSlideScrolling(event.currentSlide);
34 | });
35 |
36 | reveal.initialize();
37 | })();
38 |
--------------------------------------------------------------------------------
/presentations/shared/vscode.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Visual Studio 2015 dark style
3 | * Author: Nicolas LLOBERA
4 | SOLID можна запам'ятати за 1 один день.
А зрозуміти через 5 п'ять років.
Навіщо взагалі цей SOLID?
9 |Принцип єдиної відповідальності
15 |Кожен об'єкт має виконувати лише один обов'язок або мати єдину причину для зміни
19 |
23 | export function User() {
27 | const [user, setUser] = useState<User | null>();
28 |
29 | useEffect(() => {
30 | getUser().then(setUser);
31 | }, []);
32 |
33 | if (!user) {
34 | return <div>Loading...</div>;
35 | }
36 |
37 | return <p>Hello, {user.fullName}</p>;
38 | }
39 |
40 | function getUser() {
41 | return fetch('https://jsonplaceholder.com/users/1')
42 | .then((response) => response.json())
43 | .then(({ firstName, secondName }) => ({
44 | fullName: `${firstName} ${secondName}`,
45 | }));
46 | }
47 | Головна ідея - зменшити крихкість коду та складність його окремих елементів
52 |Принцип відкритої закритості
63 |
73 | Найпростіший приклад
77 |fetch('https://test.org', { method: 'GET' });
78 | // and / /
79 | fetch('https://test.org', { method: 'POST' });
80 | Приклад з React
85 |type MoneyProps = {
86 | value: number;
87 | currency: "₴" | "$" | "€";
88 | };
89 |
90 | export function Money({ value, currency }: MoneyProps) {
91 | const amount = value.toFixed(2);
92 | if (currency === "$") {
93 | return (
94 | <span className="currency">
95 | {currency} {amount}
96 | </span>
97 | );
98 | }
99 |
100 | if (currency === "₴") {
101 | return (
102 | <span className="currency">
103 | {amount} {currency}
104 | </span>
105 | );
106 | }
107 | }
108 | 118 | Головна складність - така гнучкість зменшує наочність коду, що погіршує його читабельність та 119 | може збільшити складність 120 |
121 |Принцип підстановки Лісков
127 |
Простий приклад
140 |class SomeComponent extends PureComponent {
141 | render() {} /*😈*/
142 | }
143 | Трохи хитріше
148 | 149 |class SomeComponent extends PureComponent {
150 | setState = null; /*😈*/
151 | render() {
152 | return <>He-he-he</>;
153 | }
154 | }
155 | Принцип розділення інтерфейсу
167 |
173 | interface IUser {
177 | name: string;
178 | login: () => Promise<void>;
179 | }
180 |
181 | function UserGreeting({ user }: { user: IUser }) {
182 | return <>Hello, {user.name}</>;
183 | }
184 |
185 | function App() {
186 | return <UserGreeting user={{ name: "Vitalii", login: () => Promise.resolve() }} />;
187 | }
188 | // ✅ Use this
203 | function UserGreeting({ userName }: { userName: string }) {
204 | return <>Hello, {userName}</>;
205 | }
206 |
207 | // ⛔ Not this
208 | function UserGreeting({ user }: { user: User }) {
209 | return <>Hello, {user.userName}</>;
210 | }Принцип інверсії залежностей
217 |
class UserApi {
232 | getUser(id) {
233 | return fetch(`https://.../user/${id}`);
234 | }
235 | }export function User() {
240 | const [user, setUser] = useState<User | null>();
241 |
242 | useEffect(() => {
243 | fetch('https://jsonplaceholder.com/users/1')
244 | .then((response) => response.json())
245 | .then(setUser);
246 | }, []);
247 |
248 | if (!user) {
249 | return <div>Loading...</div>;
250 | }
251 |
252 | return <p>Hello, {user.fullName}</p>;
253 | }
254 | 
265 |
34 |
100 |
101 |
102 |
103 |
104 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/presentations/solid/isp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/solid/isp.jpg
--------------------------------------------------------------------------------
/presentations/solid/iuser-big.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/solid/iuser-big.png
--------------------------------------------------------------------------------
/presentations/solid/lsp-false.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/solid/lsp-false.png
--------------------------------------------------------------------------------
/presentations/solid/ocp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/solid/ocp.jpg
--------------------------------------------------------------------------------
/presentations/solid/owl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/solid/owl.png
--------------------------------------------------------------------------------
/presentations/solid/srp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Drag13/react-learning-course-short/748b4afdae58313d6cb12f2264c40d185db5aab5/presentations/solid/srp.jpg
--------------------------------------------------------------------------------
/presentations/typescript-intro/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
106 |
107 |
108 |
109 |
110 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/presentations/web-tools/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
34 |
99 |
100 |
101 |
102 |
103 |
108 |
109 |
110 |
--------------------------------------------------------------------------------
/templates/_body.html:
--------------------------------------------------------------------------------
1 | {{#keyPoints}}
2 |
3 | {{{.}}}
6 |
34 |
120 |
121 |
122 |
123 |
124 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/templates/_readme.md:
--------------------------------------------------------------------------------
1 | [](https://savelife.in.ua/en/donate/)
2 |
3 | # {{title}}
4 |
5 | ## [Watch on YouTube](https://www.youtube.com/channel/UCg-txtmOEQ8BniR8008O1mA)
6 |
7 | ## About
8 |
9 | **DISCLAIMER:**
10 | All requests to "remove politics" will be removed completely without any comments. If you have another opinion - just skip this course.
11 |
12 | This repo dedicated to the course "React for Beginners". The course was created to support Ukraine 🇺🇦 and Ukrainians in the war against russia. It's completely free and open-sourced. Feel free to contribute or make any relevant suggestions.
13 |
14 | - Full program is [here](PROGRAM.md)
15 | - Presentations can be found here - [https://drag13.io/react-learning-course-short/react-intro](https://drag13.io/react-learning-course-short/react-intro) where is the name of the lesson
16 | - Changelog is [here](CHANGELOG.md)
17 | - Video - published [here](https://www.youtube.com/channel/UCg-txtmOEQ8BniR8008O1mA)
18 | - Technical details are [here](devlog.md)
19 |
20 | ## Roadmap
21 |
22 | * Course program - done ✅
23 | * Repository setup - done ✅
24 | * Prepare materials - done ✅
25 | * On-line - done ✅
26 | * Retrospective - done ✅
27 | * Updates - done ✅
28 | * Second iteration - done ✅
29 |
30 | ## PreRequisites
31 |
32 | Basic knowledge with HTML/CSS/JS
33 |
34 | Self check:
35 |
36 | - Example of the block element, how to draw a button
37 | - What is the width of block element, how to center element (vertically and horizontally)
38 | - What does `.map` returns, how to sum all values in array
39 |
40 | Basic knowledge with GIT:
41 |
42 | Self Check:
43 |
44 | - How to create new repository, how to push to remote
45 |
46 | Existing account at [https://github.com](https://github.com)
47 | Installed [Node.JS](https://nodejs.org/en/) with NPM
48 | Installed [VsCode](https://code.visualstudio.com/)
49 |
50 | ## Program summary
51 |
52 | {{#lessons}}
53 | ### {{i}}: {{#link}}[{{title}}]({{{.}}}){{/link}}{{^link}}{{title}}{{/link}}
54 |
55 | {{/lessons}}
56 | ## Donations
57 |
58 | All donations are highly welcomed. You can donate any amount to the [National Bank of Ukraine directly](https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi) or to the well known [charity fund Come Back Alive](https://www.comebackalive.in.ua/donate).
59 |
60 | Feel free to contact me directly if any question
61 |
62 | ## Sponsors
63 |
64 | [](itera.com)
65 |
66 | ## Information support
67 |
68 | [](https://t.me/beerJSZhytomyr)
69 |
70 | [](http://node.recipes/)
71 |
72 | [](https://t.me/toisamyibabich)
--------------------------------------------------------------------------------
/tools/docs.js:
--------------------------------------------------------------------------------
1 | const { render } = require('mustache');
2 | const { readFile, writeFile } = require('./fs');
3 |
4 | function renderProgram(data) {
5 | const template = readFile('./templates/_full-program.md');
6 | const res = render(template, data);
7 | writeFile('PROGRAM.md', res);
8 | }
9 |
10 | function renderReadme(data) {
11 | const template = readFile('./templates/_readme.md');
12 | const res = render(template, data);
13 | writeFile('README.md', res);
14 | }
15 |
16 | (function cli() {
17 | const data = require('../course.json');
18 | const lessons = data.lessons.filter((x) => !x.hidden);
19 | data.lessons = lessons.map((l, i) => {
20 | const presentation = l.published
21 | ? `https://drag13.io/react-learning-course-short/${l.name}`
22 | : '';
23 | const link = l.youtube ?? presentation;
24 |
25 | return { ...l, i, presentation, link };
26 | });
27 | renderProgram(data);
28 | renderReadme(data);
29 | })(process.argv.splice(2));
30 |
--------------------------------------------------------------------------------
/tools/encode.js:
--------------------------------------------------------------------------------
1 | const { readFile, writeFile } = require("./fs");
2 | const { join } = require("path");
3 |
4 | (function name(params) {
5 | const filePath = params[0] ?? `../sample.tsx`;
6 | const fullPath = join(__dirname, filePath);
7 | const file = readFile(fullPath);
8 | const text = file.replaceAll("<", "<").replaceAll(">", ">");
9 | const result = `${text}