React updates

Vets-Who-Code · Mar 13, 2021 · 013b75e · 013b75e
1 parent 30bb683
commit 013b75e
Show file tree

Hide file tree

Showing 36 changed files with 86 additions and 17 deletions.
diff --git a/weekOne/dayOne.md → week 01/dayOne.md b/weekOne/dayOne.md → week 01/dayOne.md
diff --git a/weekOne/dayTwo.md → week 01/dayTwo.md b/weekOne/dayTwo.md → week 01/dayTwo.md
diff --git a/weekTwo/curateDontConsume.md → week 02/curateDontConsume.md b/weekTwo/curateDontConsume.md → week 02/curateDontConsume.md
diff --git a/weekTwo/dayFour.md → week 02/dayFour.md b/weekTwo/dayFour.md → week 02/dayFour.md
diff --git a/weekTwo/dayOne.md → week 02/dayOne.md b/weekTwo/dayOne.md → week 02/dayOne.md
diff --git a/weekTwo/dayThree.md → week 02/dayThree.md b/weekTwo/dayThree.md → week 02/dayThree.md
diff --git a/weekEleven/dayTwo.md → week 02/dayTwo.md b/weekEleven/dayTwo.md → week 02/dayTwo.md
diff --git a/weekTwo/index.html → week 02/index.html b/weekTwo/index.html → week 02/index.html
diff --git a/weekThree/dayOne.md → week 03/dayOne.md b/weekThree/dayOne.md → week 03/dayOne.md
diff --git a/weekSeven/weekSeven.md → week 07/weekSeven.md b/weekSeven/weekSeven.md → week 07/weekSeven.md
diff --git a/week 11/README.md b/week 11/README.md
@@ -0,0 +1,67 @@
+# Week 11
+
+## Intro to React
+
+### Overview
+
+React is a Javascript library that makes it easier to build scaleable UIs for the browser.
+
+### Main concepts
+
+- Library vs Framework
+- DOM manipulation
+- Scaling challenges
+- History (The "framework wars")
+- Why we chose React
+
+#### Library vs. framework
+
+A framework is a whole bunch of code that dictates how you write an app. On the other hand a library is like a bag from which you can grab helpers. There's usually some tension in conversations between whether React is a library vs framework. The important thing here is that React itself is an extremely light (in terms of bytes) library. However, when you work with it you'll use a lot of other libraries together, which ends up turning it into a framework.
+
+The [simplest React app](./simplest-react-component.html) I could think of.
+
+#### DOM manipulation
+
+There are a large number of DOM manipulation libraries out there. It's pretty crazy how long the list is. Check out the growing list: [Todo MVC](https://todomvc.com/). The DOM is a pretty painful API to work with, so folks come up with a bunch of different solutions.
+
+JQuery is a great example of a library that's job is to manipulate DOM elements on a page. It does this job extremely well and that's why it's one of the longest living DOM libraries out there.
+
+```javascript
+// Javascript
+document.querySelector('button').addEventListener('click' () => {});
+
+// JQuery
+$('button').click(() => {});
+```
+
+#### Scaling issues
+
+Some challenges that pop up when working directly with the DOM:
+
+- Code organization
+  - Where do you put your event listeners so you can find them later?
+  - Where do you put "state variables"?
+  - There aren't really any solid pattern that makes sense across teams and organizations. Each company will have their own flavor of spaghetti.
+- Templates
+  - How to include html in other parts of your app?
+  - There are tons of templating languages out there to do this. (Pug, EJS, Handlebars)
+- State
+  - Think of state as variables that are just kinda there and sometimes an event happens (like a click) and the variable changes, when it changes something happens. But multiple things need to know about state. Check out some state examples at [reactjs.org](https://reactjs.org).
+
+React solves these problems by using a JavaScript component based architecture to handle state and you can template all your HTML using JSX.
+
+#### The Framework wars
+
+Back in 2017 the framework wars meant choosing between Angular vs React vs Vue for a JS framework. However, the discussion as to how best to write frontend browser code has been going on long before and as of writing this in 2021 we have tons of new frameworks. It's of this author's opinion that new devs choose a framework/library and stick with it instead of dabbling in a bunch of different ones. Mastering one way of doing things will help you internalize the reason the tech was built in the first place. Then you'll be able to move between frameworks much more easily.
+
+#### Why we chose React
+
+Our focus is to get vets hired as developers. To that end the job market is strong for React. The framework is used by startups and FAANGM companies. It has the largest job market for developers. Folks can challenge React's solutions and say that maybe Vue is a cleaner solution. You could also say that Angular's batteries included solution is the better way to go. We are focused on building careers and lives here.
+
+#### Resources
+
+- [Library vs. Framework](https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/#:~:text=The%20technical%20difference%20between%20a,in%20charge%20of%20the%20flow.)
+- [Todo MVC](https://todomvc.com/)
+- [caniuse](https://caniuse.com/clipboard)
+- [React](https://reactjs.org/)
+- [Framework wars](https://www.reddit.com/r/javascript/comments/97hpck/im_looking_for_veterans_of_the_js_framework_war/)
diff --git a/week 11/simplest-react-component.html b/week 11/simplest-react-component.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script
+  crossorigin
+  src="https://unpkg.com/react@17/umd/react.development.js"
+></script>
+<script
+  crossorigin
+  src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    ReactDOM.render(React.createElement('h1', null, `Hello, world!`), document.getElementById("root"));
+  </script>
+</body>
+</html>
diff --git a/weekEleven/dayFour.md → week 14/dayFour.md b/weekEleven/dayFour.md → week 14/dayFour.md
diff --git a/weekFifteen/dayOne.md → week 14/dayOne.md b/weekFifteen/dayOne.md → week 14/dayOne.md
diff --git a/weekEleven/dayThree.md → week 14/dayThree.md b/weekEleven/dayThree.md → week 14/dayThree.md
diff --git a/weekFifteen/dayTwo.md → week 14/dayTwo.md b/weekFifteen/dayTwo.md → week 14/dayTwo.md
diff --git a/weekFifteen/dayFour.md → week 15/dayFour.md b/weekFifteen/dayFour.md → week 15/dayFour.md
diff --git a/weekFourteen/dayOne.md → week 15/dayOne.md b/weekFourteen/dayOne.md → week 15/dayOne.md
diff --git a/weekFifteen/dayThree.md → week 15/dayThree.md b/weekFifteen/dayThree.md → week 15/dayThree.md
diff --git a/weekFourteen/dayTwo.md → week 15/dayTwo.md b/weekFourteen/dayTwo.md → week 15/dayTwo.md
diff --git a/weekFourteen/dayFour.md → week 16/dayFour.md b/weekFourteen/dayFour.md → week 16/dayFour.md
diff --git a/weekSixteen/dayOne.md → week 16/dayOne.md b/weekSixteen/dayOne.md → week 16/dayOne.md
diff --git a/weekFourteen/dayThree.md → week 16/dayThree.md b/weekFourteen/dayThree.md → week 16/dayThree.md
diff --git a/weekSixteen/dayTwo.md → week 16/dayTwo.md b/weekSixteen/dayTwo.md → week 16/dayTwo.md
diff --git a/weekEleven/dayOne.md b/weekEleven/dayOne.md
diff --git a/weekSixteen/dayFour.md b/weekSixteen/dayFour.md
diff --git a/weekSixteen/dayThree.md b/weekSixteen/dayThree.md
diff --git a/weekThirteen/dayFour.md b/weekThirteen/dayFour.md
diff --git a/weekThirteen/dayOne.md b/weekThirteen/dayOne.md
diff --git a/weekThirteen/dayThree.md b/weekThirteen/dayThree.md
diff --git a/weekThirteen/dayTwo.md b/weekThirteen/dayTwo.md
diff --git a/weekTwelve/dayFour.md b/weekTwelve/dayFour.md
diff --git a/weekTwelve/dayOne.md b/weekTwelve/dayOne.md
diff --git a/weekTwelve/dayThree.md b/weekTwelve/dayThree.md
diff --git a/weekTwelve/dayTwo.md b/weekTwelve/dayTwo.md
diff --git a/weekTwo/dayTwo.md b/weekTwo/dayTwo.md