├── LICENSE
└── README.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Walmyr
 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 | # Epic React
 2 | 
 3 | ## React Fundamentals
 4 | 
 5 | ### _Exercise 1 - Hello World using vanilla JavaScript_
 6 | 
 7 | It's essential to understand how to manipulate DOM nodes with pure JavaScript before jumping into React.
 8 | 
 9 | This exercise let us practice DOM manipulations such as element's creation, setting different kinds of attributes into elements, such as `id`, `textContent`, and `className`, and append elements to the DOM. This means that even with an "empty" HTML, with can still "tell" the browser what to render and make interactive web pages.
10 | 
11 | ### _Exercise 2 - Hello World using React and `ReactDOM` APIs_
12 | 
13 | As it is crucial to understand how to manipulate the DOM through its JavaScript API, this also applies to understand React's APIs before jumping into JSX.
14 | 
15 | While we use React to create elements, `ReactDOM` is used to render those elements into the DOM. They are separate things on purpose, and there are libraries such as `ReactNative`, which renders things on native apps instead of web browsers.
16 | 
17 | The property children used when creating a React component can accept a simple string, which defines the content of that element, or an array of sub-elements.
18 | 
19 | When it's time to grab the parent element to render our components into the DOM, we still use pure JavaScript to query the 'root' element `(document.getElementById('root')`).
20 | 
21 | For exercise purposes, it's ok to add React into a `script` tag. When running software in production, other approaches are recommended.
22 | 
23 | Components are reusable pieces of code that can compose web applications.
24 | 
25 | ### _Exercise 3 - JSX and Babel_
26 | JSX is a JS syntax sugar that allows us to create React components in a cleaner and more imperative way. JSX is powered by Babel, which transpile the code that the browser cannot understand into JavaScript code (e.g., `<MyDiv />` into `React.createElement('div')`).
27 | 
28 | We also import Babel inside of a script tag only for exercise purposes.
29 | 
30 | Babel's transpilation allows us to spread `props` into React components. It enables using any modern JavaScript logic (ES6+), such as template literals, shorthand property names, object, or array destructuring, etc.
31 | 
32 | To use Babel imported from a `script` tag, we use `<script type="text/babel">` instead of `type="module"`, besides its own tag with the `src` attribute.
33 | 
34 | ### _Exercise 4 - Components as functions and PropTypes_
35 | 
36 | React components are functions that return renderable elements or other components.
37 | 
38 | `PropTypes` can validate the types of properties passed to Components to expose their interface to developers consuming them and enforcing required `props`.
39 | 
40 | `PropTypes` can also be imported inside of a `script` tag for exercise purposes.
41 | 
42 | Finally, `PropTypes` are only used in development mode.
43 | 
44 | ### _Exercise 5 - Styling React Components_
45 | 
46 | The two most common ways of styling React Components are either inline CSS or CSS files and `className`s.
47 | For reusability purposes, React components should expose a straightforward API and defined default values when they're not provided.
48 | 
49 | The order of the `...rest` operator matters. If we want to allow our components to be "customized," it should go after the defaults. On the other hand, if we're going to enforce defaults, they should come first so that the defaults would override them.
50 | 
51 | When defining some default stylings but allowing for extension, the spread operator can be used instead of `Object.assign`, making the code more imperative.
52 | 
53 | CSS files can be imported inside JS code as we would import CSS into HTML with the `<style>` tag.
54 | 
55 | React components are exported as modules.
56 | 
57 | Interpolation allows us to navigate from JSX into JS or CSS in JS lands, and then back.
58 | 
59 | ### _Exercise 6 - Forms_
60 | 
61 | In React, forms aren't that different from HTML and JavaScript, although, when building SPAs, we can prevent the default browser refresh on form submission (`event.preventDefault()`).
62 | 
63 | Form components in React should receive event handlers as `props`.
64 | 
65 | Internally, we can handle form submission, changes in input elements, etc.
66 | 
67 | There are different ways of grabbing the value of the input fields. Some of them are fragile (e.g., `event.target.elements[0].value`), while others are more reliable (e.g., `event.target.elements.[inputFieldIdOrName].value`).
68 | 
69 | As in pure HTML, React components should be built with accessibility in mind, and it's essential to associate labels with inputs via `htmlFor` and `id`.
70 | 
71 | An alternative to getting the value of input fields through `event.target.elements...value` is to use `useRef`'s React Hook, which creates a reference to the element with a default value on the element through `ref={inputElementRef}`.
72 | 
73 | `useState`'s React Hook can be used on forms to solve different problems, such as defining an `error` state with its `setError` mechanism for changing the state or for determining the value of an input element, to mention a few examples.
74 | 
75 | Better than showing errors to our users telling them what is not allowed (such as uppercase characters on an input field), better to let them do it the way they feel comfortable and normalizing the data on the client-side (e.g., `event.target.value.toLowerCase()`).
76 | 
77 | ### _Exercise 7 - The `key` property on React lists_
78 | 
79 | In React, the `key` property is used in lists as a mechanism for keeping track of the right elements, especially in cases of event handlers such as `onClick` that add or remove elements to/from a list.
80 | 
81 | The value of every `key` property should be unique, ideally being identified by an `id`.
82 | 
83 | ___
84 | 
85 | Written with 💙 by [Walmyr Filho](https://walmyr.dev).
86 | 


--------------------------------------------------------------------------------