Add state excercise hints to the code

Author: Barta, Jan

README.md

@@ -1,5 +1,19 @@
 # Vytváření webových aplikací v Reactu
 
+## Před začátkem
+
+Prosím spusťte:
+
+```bash
+git clone https://github.com/msd-code-academy/intro-to-react.git
+cd intro-to-react
+npm ci # tenhle příkaz může chvíli trvat
+```
+
+---
+
+## Intro
+
 - Začátek: 18:05
 - Přestávka (10 minut): 19:30 - 19:40
 - Struktura
@@ -17,18 +31,6 @@
 
 ---
 
-## Před začátkem
-
-Prosím spusťte:
-
-```bash
-git clone https://github.com/msd-code-academy/intro-to-react.git
-cd intro-to-react
-npm ci # tenhle příkaz může chvíli trvat
-```
-
----
-
 ## HTML + CSS + JavaScript ~= Webová aplikace @Honza
 
 - Webové stránky a aplikace se skládají z několika částí
@@ -147,6 +149,7 @@ const Search => () {
 > - className (JSX) == class(HTML)
 
 > [Ukázka 1](./src/exercises/01-hello-world/App.jsx)
+> - vysvětlit strukturu projektu a imports
 
 > [Cvičení 1](./src/exercises/01-hello-world/App.jsx)
 
@@ -387,7 +390,7 @@ class Search extends React.Component {
 }
 ```
 
-*class field*
+*class field (preferovaná varianta)*
 
 ```jsx
 class Search extends React.Component {
@@ -409,12 +412,12 @@ class Search extends React.Component {
 - Stav se nikdy nesmí měnit přímým přiřazením nového stavu, pouze přes funkci `setState`
 
 ```js
+// Správně:
+this.setState({loading: true});
+
 // !!! Chybné !!!:
 this.state.loading = true;
 this.state = {loading: true};
-
-// Správně:
-this.setState({loading: true});
 ```
 
 > #### Virtual DOM
@@ -444,7 +447,7 @@ const [searchText, setSearchText] = useState('abc');
 setSearchText('cde')
 ```
 
-- chytré a hloupé (také kontrolované) komponenty
+- "chytré" a "hloupé" komponenty
   - pattern, který předchází nepřehlednému zacházení se stavem na více místech
   - některé komponenty záměrně nemají žádný stav, ale raději jej přijímají od rodičovských komponent přes propsy - tzv. kontrolované komponenty
   - jiné komponenty pak udržují stav i pro ostatní komponenty - tzv. chytré komponenty

src/exercises/01-hello-world/App.jsx

@@ -37,7 +37,6 @@ export class App extends React.Component {
             Results for <span id="search-text-results">abc</span>
           </h2>
 
-          {/* TODO: add few static search results shown in a <table></table> */}
         </div>
       </div>
     );

src/exercises/03-state/App.jsx

@@ -40,6 +40,13 @@ const resultsFromAPI = [
  *  */
 
 export class App extends React.Component {
+
+  // 1) zde inicializujte stav. Bud pomoci konstruktoru nebo class fieldu
+  // stav by mel mit jeden prvek, prazdne pole "results"
+
+  // 3) vytvorte novou funkci handleSearchClick
+  // 4) pomoci this.setState() nastavte ve funkci "results" na "resultsFromAPI"
+
   render() {
     return (
       <div className="App">
@@ -51,9 +58,12 @@ export class App extends React.Component {
           <div>
             <div className="logo"></div>
             <SearchInput />
+            {/* 2) do SearchButtons pridejte novou props onSearch */}
             <SearchButtons />
           </div>
         </div>
+        {/* 5) pouzijte this.state.results k vykresleni vysledku dynamicky z promenne */}
+        {/* vyuzijte metodu map: this.state.results.map(result => <ResultItem>) */}
         <Results searchQuery="abc">
           <ResultItem
             link="/Result-1"