React Essentials

If you have some programming experience and want to learn how to build responsive web applications using React, this course is for you or your team. In this 4-day course, students craft responsive websites and tame complexity through maintainable user interface components. Students get a very brief refresher on CSS, HTML and Javascript as they dive into the React framework. Students then learn the ins and outs of the React framework so that they can build solid, responsive React applications.

Who Should Take This Course

• Native developers who want to create a web presence that supports an app, grows a user base, and collects user feedback.

• Backend developers who need to create full-stack web apps.

• Web developers transitioning to ReactJS.

Prerequisites

• In this course we use HTML and CSS to create elements, animations, and responsive content. If you are not familiar with them, study Codecademy’s Intro to HTML and Intro to CSS.

• In order to focus on React, we also assume you already know modern JavaScript. If you are not familiar with JavaScript, study Codecademy's Intro to JavaScript.

• Before class starts, make sure you have the right tools installed. You will need a browser, an IDE, and Node 18. We recommend Chrome for your browser and VS Code as your IDE.

• We recommend using a Mac or Linux computer for the course, but Windows does work.

Syllabus

React Components

• Build functional React components.

• Split your interfaces into easily-managed, reusable components.

• Utilize JSX to describe how the interfaces should be rendered.

• Learn React Hooks such as useState, useEffect, useMemo, useRef, and useCallback.

• Create a responsive web page with CSS Grid Layout, Flexbox, and Media Queries.

• Write event handlers for clicks and form submissions.

• Use HTML5 form elements to create an order form.

• Ensure correct input with client-side validation.

Build Complete React Applications

• Manage routing to multiple pages with React Router.

• Handle complex state objects with a state reducer via useReducer.

• Pass data between components with props.

• Validate props with PropTypes.

• Share state with multiple components with React Context.

• Asynchronous API interaction with React hooks and promises.

• Handle and display API errors.

• Build a login form and limit functionality to specific users.

• Use a websocket to keep data constantly in sync.

• Enforce code style using ESLint.

Testing React

• Test components and flows with Jest and React Testing Library.

• Mock API calls with Mock Service Worker.

• Write end to end tests with Cypress.

• Compare testing methods and suggest when each is useful.