├── .gitignore ├── LICENSE ├── README.md ├── assets └── img │ ├── function_scope.png │ ├── honza.jpeg │ ├── js-logo-msd-big.png │ ├── tereza.jpg │ └── veronika.png ├── brief-history-of-react.md ├── lesson-0 ├── README.md ├── environment.md ├── git_basics.md ├── intro_to_js.md ├── js_homework.md ├── motivation.md └── who-we-are.md ├── lesson-1 ├── README.md ├── jquery │ ├── current.html │ ├── v1.html │ └── v2.html └── react │ ├── current │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ └── v1 │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js ├── lesson-2 ├── README.md ├── function-return-function.md └── idea-journal │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── solution │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── components │ │ ├── App.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── NewNoteModal.js │ │ ├── Note.js │ │ └── NoteList.js │ │ ├── index.js │ │ ├── logo.png │ │ ├── registerServiceWorker.js │ │ └── styles │ │ ├── App.css │ │ ├── Footer.css │ │ ├── Header.css │ │ ├── NewNoteModal.css │ │ ├── Note.css │ │ ├── NoteList.css │ │ └── index.css │ └── src │ ├── components │ ├── App.js │ ├── Header.js │ ├── NewNoteModal.js │ └── NoteList.js │ ├── index.js │ ├── logo.png │ ├── registerServiceWorker.js │ └── styles │ ├── App.css │ ├── Footer.css │ ├── Header.css │ ├── NewNoteModal.css │ ├── Note.css │ ├── NoteList.css │ └── index.css ├── lesson-3 ├── README.md ├── coalition │ ├── .editorconfig │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Coalition.js │ │ ├── PartiesList.css │ │ ├── PartiesList.js │ │ ├── Party.css │ │ ├── Party.js │ │ ├── election-results.json │ │ ├── functions.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── registerServiceWorker.js │ │ └── setupTests.js ├── inspiration │ ├── Party.js │ ├── Party.test.js │ └── functions.test.js └── solution │ ├── Party.js │ ├── Party.test.js │ └── functions.test.js ├── lesson-4 ├── .editorconfig ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src-solution │ ├── components │ │ ├── App.js │ │ ├── EditNoteModal.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── NewNoteModal.js │ │ ├── Note.js │ │ ├── NoteList.js │ │ └── Spinner.js │ ├── config │ │ └── api.js │ ├── index.js │ ├── logo.png │ ├── registerServiceWorker.js │ └── styles │ │ ├── App.css │ │ ├── EditNoteModal.css │ │ ├── Footer.css │ │ ├── Header.css │ │ ├── NewNoteModal.css │ │ ├── Note.css │ │ ├── NoteList.css │ │ ├── Spinner.css │ │ └── index.css ├── src │ ├── components │ │ ├── App.js │ │ ├── EditNoteModal.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── NewNoteModal.js │ │ ├── Note.js │ │ ├── NoteList.js │ │ └── Spinner.js │ ├── config │ │ └── api.js │ ├── index.js │ ├── logo.png │ ├── registerServiceWorker.js │ └── styles │ │ ├── App.css │ │ ├── EditNoteModal.css │ │ ├── Footer.css │ │ ├── Header.css │ │ ├── NewNoteModal.css │ │ ├── Note.css │ │ ├── NoteList.css │ │ ├── Spinner.css │ │ └── index.css └── upload-data.js ├── lesson-5 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── Reducer.js │ ├── components │ ├── App.js │ ├── Footer.js │ ├── Header.js │ ├── NewNoteModal.js │ ├── editNotesPage │ │ ├── EditNoteModal.js │ │ ├── EditNotesPage.js │ │ ├── Note.js │ │ └── NoteList.js │ └── summaryPage │ │ └── summaryPage.js │ ├── index.js │ ├── logo.png │ ├── registerServiceWorker.js │ └── styles │ ├── App.css │ ├── EditNoteModal.css │ ├── Footer.css │ ├── Header.css │ ├── NewNoteModal.css │ ├── Note.css │ ├── NoteList.css │ ├── SummaryPage.css │ └── index.css ├── lesson-6 ├── README.md ├── todos │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── Reducer.js │ │ ├── components │ │ ├── App.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── NewNoteModal.js │ │ ├── editNotesPage │ │ │ ├── EditNoteModal.js │ │ │ ├── EditNotesPage.js │ │ │ ├── Note.js │ │ │ └── NoteList.js │ │ └── summaryPage │ │ │ └── SummaryPage.js │ │ ├── index.js │ │ ├── logo.png │ │ ├── registerServiceWorker.js │ │ └── styles │ │ ├── App.css │ │ ├── EditNoteModal.css │ │ ├── Footer.css │ │ ├── Header.css │ │ ├── NewNoteModal.css │ │ ├── Note.css │ │ ├── NoteList.css │ │ ├── SummaryPage.css │ │ └── index.css └── webpack │ ├── app.js │ ├── hello.js │ ├── index.html │ ├── logo.png │ ├── package.json │ ├── styles.css │ └── webpack.config.js ├── lesson-7 ├── README.md ├── server │ ├── api.js │ ├── app.js │ ├── config.js │ ├── e2e-test │ │ ├── e2e.js │ │ └── todosSchema.json │ ├── package.json │ ├── requestHandler.js │ └── test │ │ ├── api.js │ │ └── requestHandler.js └── todos │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── Reducer.js │ ├── api.js │ ├── components │ ├── App.js │ ├── Footer.js │ ├── Header.js │ ├── NewNoteModal.js │ ├── editNotesPage │ │ ├── EditNoteModal.js │ │ ├── EditNotesPage.js │ │ ├── Note.js │ │ └── NoteList.js │ └── summaryPage │ │ └── SummaryPage.js │ ├── config │ └── api.js │ ├── index.js │ ├── logo.png │ ├── registerServiceWorker.js │ └── styles │ ├── App.css │ ├── EditNoteModal.css │ ├── Footer.css │ ├── Header.css │ ├── NewNoteModal.css │ ├── Note.css │ ├── NoteList.css │ ├── SummaryPage.css │ └── index.css ├── lesson-8 └── README.md └── lesson-9 └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional eslint cache 37 | .eslintcache 38 | 39 | # Optional REPL history 40 | .node_repl_history 41 | 42 | # Output of 'npm pack' 43 | *.tgz 44 | 45 | # Yarn Integrity file 46 | .yarn-integrity 47 | 48 | # IDE stuff 49 | *.iml 50 | /.idea 51 | 52 | # moved from nested .gitignore files 53 | /build 54 | .DS_Store 55 | 56 | # do not endorse out of date library versions (see README) 57 | package-lock.json 58 | yarn.lock 59 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 msd-code-academy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Code Academy](/assets/img/js-logo-msd-big.png) 2 | 3 | Materials for Javascript Code Academy, updated for second run starting October 2017. 4 | 5 | Please run `npm audit` before using any of our examples at a later date (the 3rd party dependencies might receive important security updates). 6 | 7 | ## Community 8 | 9 | We believe in giving back to the community. We are group of people who would like to see even more junior and senior developers to start using React. 10 | 11 | For any questions related to the Academy or its content we created **Slack room**. 12 | Join it and ask us about JavaScript, React, Redux, Webpack, API and lot more. Are you struggling with homeworks for next lesson or any other issues? Don't worry and let us help you. 13 | [Link to join JS CODE ACADEMY Slack](https://join.slack.com/t/msdcodeacademy/shared_invite/enQtMjUxMjYyMjQyODY5LWI1MTU2ZWY0M2Q2ZWVmYTQ1MWJkYWMwMzlkNDFjOTE0YTk3NDY4NDFjMzhkMDdkNzMwOGUzZjk2YjIxMzViNGU) 14 | 15 | ## Content 16 | 17 | * 0 (2017-10-05) [Lesson Zero](lesson-0) 18 | * 1 (2017-10-12) [jQuery vs React](lesson-1) 19 | * 2 (2017-10-19) [React Fundamentals](lesson-2) 20 | * 3 (2017-10-26) [React Testing](lesson-3) 21 | * 4 (2017-11-02) [React Async](lesson-4) 22 | * 5 (2017-11-16) [Redux](lesson-5) 23 | * 6 (2017-11-23) [Webpack](lesson-6) 24 | * 7 (2017-11-30) [Node.js](lesson-7) 25 | * 8 (2017-12-14) [Hackathon](lesson-8) + Beer 26 | -------------------------------------------------------------------------------- /assets/img/function_scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/assets/img/function_scope.png -------------------------------------------------------------------------------- /assets/img/honza.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/assets/img/honza.jpeg -------------------------------------------------------------------------------- /assets/img/js-logo-msd-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/assets/img/js-logo-msd-big.png -------------------------------------------------------------------------------- /assets/img/tereza.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/assets/img/tereza.jpg -------------------------------------------------------------------------------- /assets/img/veronika.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/assets/img/veronika.png -------------------------------------------------------------------------------- /lesson-0/README.md: -------------------------------------------------------------------------------- 1 | # Lesson Zero 2 | 3 | - [Who we are](who-we-are.md) 4 | - [Motivation to course](motivation.md) 5 | - [Slides from 1st run](https://www.slideshare.net/JaroslavKubek/javascript-code-academy-introduction) 6 | - **[Introduction to JavaScript world](intro_to_js.md)** 7 | 8 | ## Homework 9 | 10 | - [Git basics](git_basics.md) 11 | - [Environment setup](environment.md) 12 | - [JavaScript Homework](js_homework.md) 13 | -------------------------------------------------------------------------------- /lesson-0/environment.md: -------------------------------------------------------------------------------- 1 | # Environment setup 2 | 3 | The goal of this guide is to setup whole development environment, 4 | so you can run your first hello world application. 5 | 6 | ## node.js 7 | 8 | Although you might decide to never touch backend, you still need 9 | [node.js](https://nodejs.org/en/) to it's job - compile your source codes into single file, 10 | automatically reload your app when something has changed, run tests and much more. 11 | 12 | ## Setup 13 | 14 | Install node.js if you haven't done so: 15 | 16 | **macOS:** 17 | 18 | ```bash 19 | brew install node 20 | ``` 21 | 22 | **Windows** 23 | 24 | Download & install from [https://nodejs.org/en/download/](https://nodejs.org/en/download/) 25 | 26 | Check the installation after in your console: 27 | ```bash 28 | node -v 29 | # should print your node.js version, e.g. "v6.10.0" 30 | ``` 31 | 32 | ### More advanced setup 33 | 34 | These steps are left to you as optional exercise. 35 | 36 | Although the setup described previously is totally fine, 37 | it's usually much better to have a opportunity to switch 38 | between several versions of node.js on one machine: 39 | You may be assigned to older 40 | project that has to be run within certain version, yet it's nice to keep 41 | a chance for trying new stuff just by switching to the newest one. 42 | 43 | Please note that it's usually more safe to delete 44 | all your previous node.js installations, as you might risk running 45 | into conflicts with them. 46 | 47 | ***macOs***: [nvm](https://github.com/creationix/nvm) 48 | 49 | ***Windows***: [nvm-windows](https://github.com/coreybutler/nvm-windows) 50 | 51 | ### Run "Hello world" application 52 | 53 | Run following commands in your console: 54 | 55 | ```bash 56 | npm install -g create-react-app 57 | create-react-app my-app 58 | cd my-app/ 59 | npm start 60 | ``` 61 | 62 | By executing ```npm start``` at the end, browser should automatically open 63 | with the page containing React.js logo. If not, then navigate to `http://localhost:3000`. 64 | 65 | Note it might take some time before it downloads all dependencies. 66 | 67 | Try to play with it as you wish! 68 | 69 | *Optional exercises:* 70 | 71 | - Look into source code and break something, see what happened? 72 | - Create new file `src/HelloButton.js` with the following content 73 | and find out how to add this into page: 74 | ```jsx 75 | import React, {Component} from 'react'; 76 | 77 | class HelloButton extends Component { 78 | handleClick () { 79 | alert('Hello world!'); 80 | } 81 | 82 | render () { 83 | return ( 84 | 85 | ); 86 | } 87 | } 88 | 89 | export default HelloButton; 90 | ``` 91 | - button looks quite ugly heh? Let's improve that as well by some css... 92 | 93 | *More info about `create-react-app`*: [github.com/facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app) 94 | 95 | ## Docker 96 | 97 | TODO? 98 | -------------------------------------------------------------------------------- /lesson-0/git_basics.md: -------------------------------------------------------------------------------- 1 | # Git basics 2 | 3 | ## Instalation 4 | 5 | **macOS** 6 | 7 | On macOS it's usually more convenient to use [brew](https://brew.sh/) than download 8 | files from the web. 9 | 10 | ```bash 11 | brew install git 12 | ``` 13 | 14 | If you don't have [brew](https://brew.sh/), We highly recommend to install it. 15 | 16 | **Linux** 17 | 18 | Use your package manager, e.g. `apt-get install git` 19 | 20 | **Windows** 21 | 22 | Download Git from the official page: [https://git-scm.com/download/win](https://git-scm.com/download/win) 23 | 24 | ## How to start your work in the course 25 | 26 | 1. **Go to the project repository you want to work on**, e.g. [https://github.com/msd-code-academy/lessons](https://github.com/msd-code-academy/lessons) 27 | and *fork* the repository 28 | 29 | 2. **Clone your newly created repository:** 30 | 31 | ```bash 32 | git clone 33 | ``` 34 | 35 | Copypasting url from browser is enough. 36 | 37 | 3. **Create new branch** 38 | 39 | Don't push changes directly to the master, instead use branches so we can do Code Review with pull requests 40 | 41 | ```bash 42 | git checkout -b 43 | ``` 44 | 45 | 4. **Commit & push your changes** 46 | 47 | ```bash 48 | git add * 49 | git commit -m 'New cool stuff added' 50 | git push 51 | ``` 52 | 53 | 5. **Create pull request** 54 | 55 | - Go back to your Github repository 56 | - Click on "New pull request" 57 | - Select your branch in second dropdown you want to merge 58 | - You can use "Reviewers" in right panel to assign someone, e.g. some lectors, to review your changes 59 | 60 | *Tip*: Use ssh keys instead of username/password: 61 | 62 | - Go to [github.com/settings/keys](https://github.com/settings/keys) or by clicking on your icon in righ top panel > **settings** > **SSH and GPG keys** 63 | - Click on *new SSH key* and provide the ssh key (usually located in ~/.ssh/id_rsa.pub), the title doesn't matter, it's just info for you 64 | - See [Github help](https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/) if you need advice 65 | 66 | ## Useful resources 67 | 68 | - [git - the simple guide](http://rogerdudler.github.io/git-guide/) - Great introductory guide if you don't know much about git. 69 | - [Try Git](https://try.github.io) - Learn by doing, for beginners to git 70 | - [Learn Git Branching](https://learngitbranching.js.org/) - the most visual and interactive way to learn Git on the web 71 | - [Github Hello World](https://guides.github.com/activities/hello-world/) - Introductory guide to Github 72 | - [Git DOCs](https://git-scm.com/doc) - official docs 73 | - [Gitflow](http://nvie.com/posts/a-successful-git-branching-model/) - original article about common flow -------------------------------------------------------------------------------- /lesson-0/js_homework.md: -------------------------------------------------------------------------------- 1 | # JavaScript Homework 2 | 3 | Please review following topics and if you have no idea about it, please search and/or 4 | contact us about it. It's OK if you only have a vague idea, we will try to explain unclear concepts 5 | when we use them in future lessons. 6 | 7 | Basic topics: 8 | - if .. else, switch .. case 9 | - for .. in, for .. of, forEach 10 | - array map `[1,2] => [2,4]`, filter `[1,2] => [2]` 11 | - reduce array to number `[1,2] => 3`, reduce an object `{a: 1, b: 2} => {a: 2, b: 4}` 12 | - Promise 13 | - ES6 arrow functions, ... 14 | - HTML, CSS, DOM 15 | - JSON 16 | - synchronous vs asynchronous 17 | - callbacks 18 | 19 | Bonus topics for rainy weekends: 20 | - event loop 21 | - Web APIs 22 | - Object.prototype.myCoolMethod good or evil? 23 | - RegExp `/abc(\d+)/` 24 | - camelCase123, Constructor, IMMUTABLE_CONSTANT, stream$, \_privateButNotReally 25 | - curry `(a) => (b) => a + b` 26 | - semicolon insertion; 27 | - // comments 28 | - eslint 29 | - why not use `with` and `eval` 30 | - ... 31 | -------------------------------------------------------------------------------- /lesson-0/motivation.md: -------------------------------------------------------------------------------- 1 | # Motivation to course 2 | 3 | Maybe you already tried to jump into JavaScript and 4 | got stuck in the middle of all these super shiny libraries 5 | you absolutely need to know before you can write anything meaningful. 6 | 7 | Surprisingly, there is even article about it: [How it feels to learn JavaScript in 2016](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f) 8 | 9 | So you might be asking yourself - why learn JavaScript? 10 | 11 | ## Why JavaScript 12 | 13 | **It's everywhere!** not only in your browser: 14 | - [Electron](http://electron.atom.io/) - framework for desktop apps, 15 | used already by several companies, e.g. guess what's behind Slack... 16 | - [React Native](https://facebook.github.io/react-native/) for native mobile applications 17 | - [node.js](https://nodejs.org/en/), together with web framework like [Express](http://expressjs.com/), for your backend side 18 | 19 | [Why JavaScript Is and Will Continue to Be the First Choice of Programmers](https://dzone.com/articles/why-javascript-and-will) 20 | 21 | It's also the most active language on [Github](http://githut.info/), which is 22 | hugely empowered by robust ecosystem of libraries, 23 | that are maintained via [npm](https://www.npmjs.com/), package manager. 24 | 25 | But the most importantly, it's the *lingua franca* of the web. Browsers understand to only one language, and it's JavaScript. 26 | 27 | 28 | ## Why learn & keep learning? 29 | 30 | Rome wasn't built in a day. So your programming skills. It's completely natural 31 | to fail several times before you learn enough from your mistakes. 32 | And even then you have to keep going as technology around is evolving, so DON'T PANIC :) 33 | 34 | *“True self-confidence is “the courage to be open—to welcome change 35 | and new ideas regardless of their source.” Real self-confidence 36 | is not reflected in a title, an expensive suit, a fancy car, 37 | or a series of acquisitions. It is reflected in your mindset: 38 | your readiness to grow.”* 39 | 40 | \- Carol S. Dweck, Mindset 41 | -------------------------------------------------------------------------------- /lesson-0/who-we-are.md: -------------------------------------------------------------------------------- 1 | # Who we are 2 | 3 | ## Organisers 4 | 5 | - Veronika Gabrielova @lspdv - Chief Admin, Coffee Maker 6 | 7 | ![](../assets/img/veronika.png) 8 | 9 | - Jan Barta - Admin 10 | 11 | ![](../assets/img/honza.jpeg) 12 | 13 | - Tereza Vesela - MSD 14 | 15 | ![](../assets/img/tereza.jpg) 16 | 17 | ## Lectors 18 | 19 | - Peter Hozak 20 | - Viliam Elischer @vireliam 21 | - Jaroslav Minarik 22 | - Jaroslav Kubicek @KubajzHK 23 | - Pavel Vanecek @Corkscreewe 24 | - Ales Vondra @alesak23 25 | - Adam Blazek 26 | - Stefan Vonolfen 27 | - Pavel Gavlik @PavelGavlik 28 | - Petr Messner @messa_cz 29 | -------------------------------------------------------------------------------- /lesson-1/README.md: -------------------------------------------------------------------------------- 1 | # jQuery vs React 2 | 3 | Comparison of 2 approaches to web-app development (over-simplified): 4 | * "traditional" web app development using selectors, imperative style, plain-text ES5 5 | * "modern" declarative approach, separation of concerns using MV* (Model-View-Controller/Presenter/...) abstraction, 6 | compiled ES6+ 7 | 8 | ## jQuery, other Ajax libraries and modern Web API 9 | * [Ajax frameworks](https://en.wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript) 10 | * compare to native Web API: http://youmightnotneedjquery.com/ 11 | * http://caniuse.com/ provides a way to check feature support as well as a list of "modern" browsers 12 | * see also https://developer.mozilla.org/en-US/ 13 | 14 | _Exercise #1:_ 15 | * download and open [jquery/v1.html](jquery/v1.html) 16 | * edit to remove jQuery dependency, targeting IE11+ (assuming last 2 and "extended support" versions of other browsers) 17 | 18 | 19 | ## MV* frameworks 20 | 21 | For larger, more complicated dynamic applications, vanilla ES6 might be not enough. 22 | 23 | Comparison of simple-but-practical implementation of the same TODO app in various MV* frameworks, libraries 24 | and vanilla JS: http://todomvc.com/ 25 | 26 | ### React 27 | 28 | * official docs: https://reactjs.org/ 29 | * Create React App: https://github.com/facebookincubator/create-react-app#quick-overview 30 | 31 | _Exercise #2:_ 32 | * `git clone https://github.com/msd-code-academy/lessons.git` 33 | * `cd lessons/lesson-1/react/v1` 34 | * `npm i` 35 | * `npm start` 36 | * update the component to render static content similar to original jquery app 37 | * html title, main header, static button, static text 38 | * use life-cycle methods to add dynamic features 39 | 40 | _Exercise #3 (bonus):_ 41 | * add 3rd button to any of the solutions 42 | * change color of the text after pressing 'Blue' button to be more readable 43 | * add rounded corners for `.output1` element after pressing 'Red' button (border-radius CSS property) 44 | 45 | ## Conclusion 46 | 47 | MV* frameworks and React-family in particular focus on maintainability: 48 | * easy to read and understand 49 | * easy to debug, e.g. inspect element in browser and find corresponding code 50 | 51 | ## Homework 52 | 53 | * bonus exercise (if we didn't have enough time) 54 | * http://todomvc.com/ - review a few examples, e.g. for React 55 | -------------------------------------------------------------------------------- /lesson-1/jquery/current.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Selectors 5 | 17 | 18 | 19 | 20 | 21 |
22 |
Lorem ipsum, ...
23 | 24 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /lesson-1/jquery/v1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Selectors 4 | 18 | 19 | 20 | 21 | 22 |
23 |
Lorem ipsum, ...
24 | 25 | 29 | 30 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lesson-1/jquery/v2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Selectors 5 | 17 | 18 | 19 | 20 | 21 |
22 |
Lorem ipsum, ...
23 | 24 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /lesson-1/react/current/README.md: -------------------------------------------------------------------------------- 1 | Sample project with features similar to the `../jquery` sample project. 2 | -------------------------------------------------------------------------------- /lesson-1/react/current/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "current", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-dom": "^16.0.0", 8 | "react-scripts": "1.0.14" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /lesson-1/react/current/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/lesson-1/react/current/public/favicon.ico -------------------------------------------------------------------------------- /lesson-1/react/current/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lesson-1/react/current/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /lesson-1/react/current/src/App.css: -------------------------------------------------------------------------------- 1 | .App-output { 2 | background-color: yellow; 3 | margin: 10px; 4 | } 5 | 6 | .App-output1 { 7 | width: 50px; 8 | height: 50px; 9 | text-align: center; 10 | } 11 | 12 | .App-output2 { 13 | padding: 10px 14 | } 15 | 16 | .App-red { 17 | background-color: red; 18 | } 19 | 20 | .App-blue { 21 | background-color: blue; 22 | } 23 | -------------------------------------------------------------------------------- /lesson-1/react/current/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import './App.css' 3 | 4 | class App extends Component { 5 | // we will learn later when to use props, local state, redux store and how to combine the approaches 6 | state = { 7 | currentClass: '' 8 | } 9 | 10 | setRed = () => { 11 | // DO NOT this.state.currentClass = 'red' !!! 12 | this.setState({currentClass: 'App-red'}) 13 | } 14 | 15 | setBlue = () => { 16 | this.setState({currentClass: 'App-blue'}) 17 | } 18 | 19 | render() { 20 | const {currentClass} = this.state 21 | 22 | return ( 23 |
24 | 25 | 26 |
27 |
Lorem ipsum, ...
28 |
29 | ) 30 | } 31 | } 32 | 33 | export default App 34 | -------------------------------------------------------------------------------- /lesson-1/react/current/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-1/react/current/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /lesson-1/react/current/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /lesson-1/react/v1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "current", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-dom": "^16.0.0", 8 | "react-scripts": "1.0.14" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /lesson-1/react/v1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/lesson-1/react/v1/public/favicon.ico -------------------------------------------------------------------------------- /lesson-1/react/v1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lesson-1/react/v1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /lesson-1/react/v1/src/App.css: -------------------------------------------------------------------------------- 1 | e.App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /lesson-1/react/v1/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 | logo 11 |

Welcome to React

12 |
13 |

14 | To get started, edit src/App.js and save to reload. 15 |

16 |
17 | ); 18 | } 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /lesson-1/react/v1/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-1/react/v1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /lesson-1/react/v1/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /lesson-1/react/v1/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lesson-2/README.md: -------------------------------------------------------------------------------- 1 | # React Fundamentals I 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). 4 | 5 | ## The Goal 6 | 7 | Finish all of bellow mentioned steps to manage Idea Journal store ideas in local state of the app. 8 | 9 | ## Practise & learn 10 | 11 | _Exercise #1:_ 12 | Clone it on your machine and then in project directory install npm modules and dependencies, run app in the development mode. 13 | 14 | ``` 15 | npm i 16 | npm start 17 | ``` 18 | 19 | ### React Components 20 | - Components are like JavaScript functions - they accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen 21 | - Class and Functional components 22 | - Always start component names with a capital letter 23 | - Components must return a single root element 24 | 25 | ### React JSX 26 | - What UI should look like, it's neither string nor HTML 27 | - JavaScript expressions are wrapped into {} 28 | - Specifying attributes are string literals or {JavaScript expressions} 29 | - camelCase property naming, e.g. className, tabIndex 30 | 31 | _Exercise (basics) #2:_ 32 | Create Note component displaying title and text of a note. 33 | 34 | _Exercise (basics) #3:_ 35 | Create Footer component containing `
` with style class `Footer` and add it to App component. 36 | 37 | ### React State 38 | - State is similar to props, but it is private and fully controlled by the component 39 | - Class Components 40 | - Initial this.state is assigned in class constructor 41 | - Do not modify state directly, use setState() 42 | 43 | _Exercise (state) #4:_ 44 | Display modal window to add a new note. 45 | 46 | _Exercise (state) #5:_ 47 | Display or hide text in Note component. 48 | 49 | ### React Props 50 | - Props are attributes of component 51 | - Read-only - component never modify its own props 52 | 53 | _Exercise (props) #6:_ 54 | Pass notes info via props from App to NoteList. 55 | 56 | _Exercise (props) #6:_ 57 | Pass note info via props from NoteList to Note. 58 | 59 | _Exercise (props) #7:_ 60 | Pass callback function from NewNoteModal to App and add a new note to a list. 61 | 62 | _EXTRA Exercise (props) #7:_ 63 | Pass callback function from Note to App and remove note from a list. 64 | 65 | To run solution 66 | ``` 67 | cd solution/ 68 | npm i 69 | npm start # or PORT=3001 npm start to run in parallel with working app 70 | ``` 71 | 72 | ## Useful resources 73 | 74 | - [React.js - Introducing JSX](https://facebook.github.io/react/docs/introducing-jsx.html) 75 | - [React.js - Rendering Elements](https://facebook.github.io/react/docs/rendering-elements.html) 76 | - [React.js - Components and props](https://facebook.github.io/react/docs/components-and-props.html) 77 | - [React.js - State and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html) 78 | - [React Patterns](http://reactpatterns.com/) 79 | - [The many faces of `this` in javascript](https://blog.pragmatists.com/the-many-faces-of-this-in-javascript-5f8be40df52e) -------------------------------------------------------------------------------- /lesson-2/idea-journal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "idea-journal", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-dom": "^16.0.0", 8 | "react-modal": "^3.0.3", 9 | "shortid": "^2.2.8" 10 | }, 11 | "devDependencies": { 12 | "react-scripts": "1.0.14" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/lesson-2/idea-journal/public/favicon.ico -------------------------------------------------------------------------------- /lesson-2/idea-journal/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "idea-journal", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.0.0", 7 | "react-dom": "^16.0.0", 8 | "react-modal": "^3.0.3", 9 | "shortid": "^2.2.8" 10 | }, 11 | "devDependencies": { 12 | "react-scripts": "1.0.14" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msd-code-academy/lessons/212bb14505cf4fdfd3f56b05f727fde113e509a8/lesson-2/idea-journal/solution/public/favicon.ico -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from './Header' 3 | import NoteList from './NoteList' 4 | import Footer from './Footer' 5 | import '../styles/App.css'; 6 | 7 | class App extends React.Component { 8 | constructor() { 9 | super() 10 | this.state = { 11 | notes: [{ 12 | title: 'MSD Code Academy', 13 | text: 'Let\'s crete React app with a few components.', 14 | uuid: 1 15 | }] 16 | } 17 | } 18 | 19 | addNoteToList = (note) => { 20 | const {notes} = this.state 21 | this.setState({ 22 | notes: notes.concat(note) 23 | }) 24 | } 25 | 26 | removeNoteFromList = (noteId) => () => { 27 | const {notes} = this.state 28 | const newNotes = notes.filter((note) => { 29 | return note.uuid !== noteId 30 | }) 31 | this.setState({ 32 | notes: newNotes 33 | }) 34 | } 35 | 36 | render() { 37 | const {notes} = this.state 38 | return ( 39 |
40 |
41 |
42 | 43 |
44 |
45 |
46 | ) 47 | } 48 | } 49 | 50 | export default App 51 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../styles/Footer.css' 3 | 4 | class Footer extends React.Component { 5 | render() { 6 | return ( 7 |
8 | MSD Code Academy 2017 9 |
10 | ) 11 | } 12 | } 13 | 14 | export default Footer 15 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NewNoteModal from './NewNoteModal' 3 | import logo from '../logo.png' 4 | import '../styles/Header.css' 5 | 6 | class Header extends React.Component { 7 | 8 | render() { 9 | const {...props} = this.props 10 | return ( 11 |
12 |
13 | logo 14 | IDEA JOURNAL 15 |
16 | 17 |
18 | ) 19 | } 20 | } 21 | 22 | export default Header 23 | -------------------------------------------------------------------------------- /lesson-2/idea-journal/solution/src/components/NewNoteModal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Modal from 'react-modal' 3 | import * as shortId from 'shortid' 4 | import '../styles/NewNoteModal.css' 5 | 6 | class NewNoteModal extends React.Component { 7 | constructor() { 8 | super() 9 | this.state = { 10 | modalIsOpen: false, 11 | note: {} 12 | } 13 | } 14 | 15 | toggleModal = () => { 16 | this.setState({ 17 | modalIsOpen: !this.state.modalIsOpen 18 | }) 19 | } 20 | 21 | handleChange = (field) => (e) => { 22 | let note = this.state.note 23 | note[field] = e.target.value 24 | this.setState({note}) 25 | } 26 | 27 | handleFormSubmit = (e) => { 28 | e.preventDefault() 29 | const {onAddNote} = this.props 30 | const {note} = this.state 31 | onAddNote({...note, uuid: shortId.generate()}) 32 | this.toggleModal() 33 | } 34 | 35 | render() { 36 | const {modalIsOpen} = this.state 37 | return ( 38 |
39 | ADD NOTE 40 | 45 |

Add a new note

46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 |