Chapter 0: Before we start
- 0.1 Disclaimer
- 0.2 Assumptions: Things to have before we start
Chapter 1: Building the simplest possible React app
- 1.0 What is React?
- 1.1 Install React Developer Tools in your Browser
- 1.2 Let’s build the simplest possible React app
- 1.3 Run our default React app and examine it in the browser
- 1.4 Inspecting the app using React Developer Tools
- 1.5 What happens when we run the
npx create-react-app <appName>? - 1.6 Understanding our default React app’s folder and file structure
- 1.7 Inspecting the contents of
package.json - 1.8 Altering the default app
Chapter 2: Serving React from a CDN and running it without a build step
- 2.1 Re-building the simplest app without a build step using Codepen.io
- 2.2 Load another node into another div
- 2.3 Challenge: Render three more
h2headings - 2.4 Adding HTML attributes using React.createElement
- 2.5 What happened to the DOM?
- 2.6 Some Conclusions
- 2.7 Optimizing our simplest example’s code, the React way: introducing JSX
- 2.9 Exercise: Find at least one interesting React Codepen
- 2.10 Making our simplest app a bit more dynamic, using JSX
Chapter 3: Build React Apps Locally Without a Build Step
- 3.1 Build React Apps Locally Without a Build Step, pt 1 (no HTML attributes)
- 3.2 Build React Apps Locally Without a Build Step, pt 2 (with HTML attributes)
- 3.3 Build React Apps Locally Without a Build Step, pt 3 (nested HTML elements)
- 3.4 Build React Apps Locally Without a Build Step, pt 4 (improved nested HTML code)
Chapter 4: What is JSX?
- 4.1 Adding HTML-like code as a parameter to the root.render() call
- 4.2 Using the ternary operator in JSX
- 4.3 Using variables in JSX
- 4.4 Why does JSX look like HTML?
Chapter 5: Components and props
- 5.1 The simplest possible app using a component
- 5.1 Is it
renderorreturn? - 5.2 You must have a single wrapping element when returning JSX
- 5.3 Props in React
- 5.4 The hierarchy of React components
- 5.5 Transpiling JSX using Babel to inspect the props object
- 5.6 The list of completed learning objectives
Chapter 6: Assets in React
- 6.1 Working with images
- 6.2 Working with JSON
Chapter 7: JSX and styling
- 7.1 How to include CSS in plain HTML?
- 7.2 Some of the possible ways to style components in React
- 7.3 Importing styles using the
linkelement - 7.4 Inline styles using object literals
- 7.5 Inline styles using variables
- 7.6 Composable styles using the spread operator
- 7.7 Third-party styling libraries
Chapter 8, Build a Static Bootstrap Layout
- 8.1 Prototyping our website layout’s components
- 8.2 Adding the Bootstrap navbar
- 8.3 Adding Bootstrap’s CSS
- 8.4 Extracting MainMenu component and importing it into App.js
- 8.5 Adding another component (the Jumbotron)
- 8.6 Adding the Card component and repeating it multiple times
- 8.7 Working with the children prop
- 8.8 Using the children prop in the CardsWrapper component
- 8.9 Adding the footer component
Chapter 9: Looping over data (repeating cards)
- 9.1 The starting app for Chapter 9 (with non-repeating cards)
- 9.2 Extracting data to a separate object
- 9.3 Looping over JSON data
- 9.4 Improving readability of the passed-in data with props
- 9.4.1 Bonus: Calling a single prop in the rendered Car component in
App.js - 9.4.2 Bonus 2: Cleaning up code using object destructuring
- 9.4.3 Bonus 3: Taking object destructuring one step further (destructuring nested objects)
Chapter 10: The very basics of data and events in React
- 10.1 Data in React
- 10.2 Working with state data in a React component
- 10.3 Updating the state data in a React component using events
- 10.4 Exercise
Chapter 11: Conditional rendering
- 11.1 Product component example app
- 11.2 Using if-else in a component to render it conditionally
- 11.3 Rendering classNames conditionally using ternary operators
- 11.4 Simplifying rendering classNames conditionally using ternary operators
- 11.5 When rendering a list of items, skipping an item if a prop value is an empty string
- 11.6 Conditionally returning a different string than the one passed in from a prop
- 11.7 Conditionally rendering different components
- 11.8 Extracting the return values as variables
- 11.9 Extracting the return values as variables, and rendering them using the ternary operator
- 11.10 Conditionally rendering components using the logical AND operator (the
&&operator)
Chapter 12: Understanding the useState hook
- 12.1 Updating a component’s state using the useState hook
Chapter 13: Forms in React
- 13.1 Forms in React
- 13.2 Watch for input changes in React
- 13.3 Detecting and handling the
onChangeevent on an input - 13.4 Adding the built-in event object
- 13.5 Adding state to the form input
- 13.6 The proper way of updating the state object in React
- 13.7 Controlled components in React
- 13.8 Other form inputs: radio buttons, checkboxes, textareas, and selects
- 13.9 The useRef hook, controlled and uncontrolled components
- 13.10 The useRef hook, focus and blur
- 13.11 The useRef hook, scrollIntoView
- 13.12 The useRef hook, setInterval and clearInterval
- 13.13 The useRef hook, requestAnimationFrame and cancelAnimationFrame
- 13.14 The useRef hook, file input use case
- 13.15 Using the useRef hook to create custom hooks
Chapter 14: Build a todo app
- 14.1 Render a list of pre-defined todos in a state variable
- 14.2 A form to add new todos
- 14.2.1 Adding the form
- 14.3 Handling the submission of a new todo
- 14.4 Improvements to the app
- 14.5 Exercise and recap
- 14.6 Conclusion
Chapter 15: Testing your todo app
- 15.1 Planning for testing: a general outline of steps
- 15.2 Implementing our tests
- 15.3 Run the tests
- 15.4 The updated app with passing tests
- 15.4 Red-green-refactor: Conquering your todo app with confidence
- 15.5 Red-Green-Refactor Cycle example in TodoList.test.js
- 15.6 Continuing testing: Refine and Expand
- 15.7 Conclusion
Chapter 16: Test-Driven Development (TDD) with React: Building a Todo App
- Step 1: Setting up the project
- Step 2: Writing the first test
- Step 3.1: Declare state for todos using the useState hook
- Step 3.2: Intermission: Tracking it with git
- Step 3.3: Implement the addTodo function
- Step 3.4: Render the TodoForm and TodoList components
- Step 4: Write a failing test for the TodoForm component
- Step 5: Make the test pass
- Step 6: Commit your changes
- Step 7: Write a failing test for the TodoList component
- Step 8: Make the test pass
- Step 9: Commit your changes
- Step 10: Continue with the rest of the app
Chapter 17: Popular form libraries
- 17.1 Formik
- 17.2 React Hook Form
- 17.3 React-hook-form vs Formik
- 17.4 Yup
- 17.5 Conclusion
- 17.6 One more point
Chapter 18: Components and keys
- 18.1 Rendering components: a revision
- 18.2 The usage of keys in React
- 18.3 Why keys?
- 18.4 An example of the problem with keys
- 18.5 Fixing the problem with keys
- 18.6 Conclusion
Chapter 19: Popular component libraries
- 19.1 React Bootstrap
- 19.2 Chakra UI
- 19.3 Material-UI
- 19.4 Conclusion
Chapter 20: The useEffect hook
- 20.1 Side effects
- 20.2 Pure and impure functions in React
- 20.3 How to deal with side effects in React
- 20.4 Understanding the dependency array
- 20.5 Using the useEffect hook
Chapter 21: Comparing hooks: useRef vs useEffect
- 21.1 Scroll to top of page: useRef vs useEffect
- 21.2 Log to console: useRef vs useEffect
- 21.3 Update the document’s title: useRef vs useEffect
- 21.4 Updating the DOM in React: useRef vs useEffect
- 21.5 Fetching data from the web in React: useRef vs useEffect
- 21.6 Trigger animation: useRef vs useEffect
- 21.7 Toggle visibility: useRef vs useEffect
- 21.8 Capture user input: useRef vs useEffect
- 21.9 Validate form: useRef vs useEffect
- 21.10 Timer countdown: useRef vs useEffect
- 21.11 Conclusions
Chapter 22: Build an improved todo app
- 22.1 The app’s requirements
- 22.2 Implementing the app
- 22.3 The app’s code explained
- 22.4 Coding a new Todo app from scratch
- 22.5 Todo App, v3
- 22.6 Summary
Chapter 23: Working with custom hooks
- 23.1 What are custom hooks?
- 23.2 Creating a custom hook
- 23.3 Using a custom hook
- 23.4 Using state in a custom hook
- 23.5 Using effects in a custom hook
- 23.6 Using multiple hooks in a custom hook
- 23.7 Using a custom hook in a component
- 23.8 Using multiple custom hooks in a component
- 23.9 A practical example
- 23.10 Why even bother with a custom useFetch hook?
- 23.11 Conclusion
Chapter 24: Working with the useReducer Hook
- 24.1 Understanding useReducer
- 24.2 Basic Example: Using useReducer
- 24.3 Comparing useState and useReducer
- 24.4 Managing Multiple State Variables with useReducer
- 24.5 Handling Lists with useReducer
- 24.6 Best Practices with useReducer
- 24.7 Conclusion
Chapter 25: React Context
- 25.1 What is React context?
- 25.2 Why use React context?
- 25.3 How to use React context?
- 25.4 The simplest possible app that uses React context
- 25.5 Revising things learned about React context
- 25.6 Exercise: Build your own React context app
- 25.7 Passing multiple state variables using a single React context
- 25.8 Passing multiple state variables to multiple components using React context
- 25.9 Using multiple React contexts
- 25.10 Practice makes perfect
- 25.11 Solutions and conclusion
Chapter 26: React Router
- 26.1 What is React Router?
- 26.2 Installing React Router
- 26.3 The simplest possible React Router application
- 26.4 Adding React Router to an existing app
- 26.4.1 Creating the Home component and the About component
- 26.4.2 Adding routes
Chapter 27: Build a multi-page site in React and deploy it to Netlify
- 3.1 The design
- 3.2 The code
- 3.3 Improving the app
- 3.4 Final touches
- 4. Deploying to Netlify
- 5. Conclusion