- Exercise Solution
- 💯 Extra Credit
We start by working with a barebones HTML file. Using the default JavaScript DOM APIs, we can generate the container <div>, specify its class name/s, and write the text Hello World contained within the element.
Interestingly, we can skip the <!DOCTYPE html>, <html>, and <head> tags when writing the code for this exercise - the browser seems to automatically generate the missing tags even if we skip to only writing the <body> tag containing the code for our exercise!
- Exercise Solution
- 💯 Extra Credit
We are introduced to the APIs React provides for creating DOM nodes. Instead of creating an empty element, setting its attributes, and defining its content, with React we can imperatively do all those tasks with its own createElement method. using React's API, we just specify the element type, pass its props (similar to attributes), and we can even specify the component's children as additional arguments!
Upon doing the Extra Credit for this exercise, we might encounter a react-warning-keys warning if we pass the children directly to the children prop. We can make the warning go away (for now) by simply passing the children as additional arguments to the createElement call - we'll learn more about what these keys mean in a future section...
- Exercise Solution
- 💯 Extra Credit
We are introduced to JSX, which is really just syntactic sugar to make working with the React API more intuitive and similar to working with HTML. Using JSX requires Babel to convert the JSX into the plain JavaScript that the browser can actually understand.
The Extra Credit exercises offer a deeper dive into the more fancy stuff we can do with JSX, such as interpolation and spreading variables into a component's props and/or children. Taking a peek at how this JSX compiles into the raw React API using Babel, we can start to appreciate the beauty of the React API with how it organizes the props and the children into its createElement method.
- Exercise Solution
- 💯 Extra Credit
We are introduced to the concept of components, which is a way to share code between JSX elements by abstracting into separate functions.
The Extra Credit exercises delve into how to create components step-by-step, starting from the raw React.createElement API and progressively changing our code as we use JSX instead of the raw React.createElement API. We also take another peek into how our JSX is interpreted by Babel when we use different naming conventions (i.e. camelCase, PascalCase, etc.), offering a greater insight to how React works under the hood.
Additional Extra Credit exercises also demonstrate propTypes, which is a way to indicate during development whether we passed the wrong type of value for a prop (which is also something that using a statically-typed language like TypeScript makes redundant).
Finally, we also try out React Fragments to render multiple elements without needing to specify a parent element first, which is something that may be useful when working with complex layout grids or tables.
- Exercise Solution
- 💯 Extra Credit
We learn two different ways to style React components: Defining styles inline using the style prop, and defining styles with regular CSS then applying the styles through the className prop. With JSX, we see just how closely working with styles is to regular HTML, but here with JSX React offers a bit more flexibility by offering ways to combine styles using interpolation, and then using interpolation to help abstract the implementation details of these styles, as demonstrated in the Extra Credit exercises.
- Exercise Solution
- 💯 Extra Credit
In this exercise, we learn how React handles forms and what abstractions React provides to help make working with forms easier and also provide additional APIs to interact with forms beyond what we can do with regular DOM APIs and JavaScript.
The Extra Credit exercises introduce some new React APIs that help us manage forms: Using refs as an alternative to get the current value of a certain input, and using state variables to provide additional features to forms such as input validation (and displaying error messages as needed) and even programmatically controlling what kind of values a certain input can have.
- Exercise Solution
- 💯 Extra Credit
We are introduced to an interesting quirk React has with regards to rendering arrays. We learn exactly what the react-warning-keys error shown in a previous exercise was for, and why React needs keys to keep track of array elements as they get changed, added, removed, or even shuffled.
As a bonus, the Extra Credit shows a demo of a bug one might encounter when incorrectly setting keys - Without proper keys for React to use to keep track of elements, form inputs lose whatever part is highlighted as the inputs get shuffled around, and the focused element becomes hard to track as the focus does not follow the input as it gets moved to a new position in the array. With a proper setting of keys, this problem pretty much gets eliminated entirely.
- Exercise Solution
- 💯 Extra Credit
Looks pretty much the exact same as the main branch.
- Exercise Solution
- 💯 Extra Credit
Again, pretty much the same as the main branch but the Extra Credit exercises go a bit more in-depth with nesting elements.
- Exercise Solution
- 💯 Extra Credit
First two Extra Credit exercises were the same as the main branch, and two additional Extra Credit exercises were added to demonstrate the power of JSX.
- Exercise Solution
- 💯 Extra Credit
The Extra Credit exercises involving PropTypes were removed (because we'll be using TypeScript in these next branch workshops to sove pretty much the same issue). Instead we have another Extra Credit exercise where we use custom props to help render the children of a component.
- Exercise Solution
- 💯 Extra Credit
This is a new exercise that introduces TypeScript for the purposes of the Epic React workshops. We start by learning the basics of TypeScript, from adding simple type annotations to our functions, to exploring some of the capabilities empowered by TypeScript in the Extra Credits such as adding autocomplete for custom types, deriving types from objects, and reducing duplication for type annotations by using Records and Constrained Identity Functions (CIF).
- Exercise Solution
- 💯 Extra Credit
We now go back to the rest of the exercises featured in the main branch, but this time we use TypeScript to provide type annotations to the custom components that we make. To help with this, we can use the generic types provided by React, and we can even extend these generics with our own custom props as needed via intersection types.
- Exercise Solution
- 💯 Extra Credit
We practice more TypeScript with React by working with forms. We use the different generic types that React provides for working with forms and its inputs/event handlers/etc. We also learn how to improve the typing for forms by extending the generic types and overriding some types to accomodate our custom inputs. This exercise also has a different Extra Credit exercise for controlled form inputs, which demonstrates a couple more generics provided by React for TypeScript.
- Exercise Solution
- 💯 Extra Credit
This exercise greatly improves from the previous version in the main branch. We now implement the code to render the array of items ourselves, and adding the key prop is now moved into an Extra Credit exercise with a much more detailed explanation.