Introduction to React & the Next.js Framework

4-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Introduction to React & the Next.js Framework training course teaches attendees how to build rich client-side web applications using HTML, CSS, JavaScript, React, and Next.js. Students develop real-world JavaScript and React applications and learn how to use modern JavaScript programming techniques with an emphasis on core JavaScript concepts, the latest JavaScript syntax features, and popular user interface (UI) development with React. To further enhance the React application, the Next.js framework will be used to explore the page pattern of routing, server-side rendering, CSS-in-JS, etc… This class is for developers with modern JavaScript experience but wish to learn to React and Next.js. Vue.js and Angular developers looking to add a new UI library to their skillset will greatly benefit from this class. Also, this class is for developers who want to learn how to create UIs using these two popular and modern JavaScript libraries, React, and Next.js.

Students will build a project using React and to apply their JavaScript skills and to learn about modern UI development. Developers can do wonders with React and Next.js, an ecosystem that scales the React library into a framework using Next.js. This course teaches all that you need to know about React to create modern interactive web applications. Students will learn the basics, such as building components and displaying dynamic data, and then progress to advanced features such as using Jest for unit testing JavaScript and React applications, managing state with context, page-based routing, server-side rendering, and much more!

Course ObjectivesObjectives

  • Develop real-world JavaScript applications with React
  • Use the basic features of React such as JSX to create functional and class-based components
  • Use hooks to manage state and execute code during renders
  • Compare and contrast functional and class-based components
  • Managing state with context
  • Apply the principles and best practices of React
  • Leverage aspects of the React API used in Next.js programming
  • Styling Components with Styled JSX
  • Implement Routing with Next.js
  • Server-Side Render React on the Server
  • Work with data using SWR
  • Managing Start with Redux
  • How to build and deploy a web site using React and Next.js
  • Explore how to unit test JavaScript and React code
  • Apply testing techniques such as snapshot and shallow testing

Course PrerequisitesPrerequisites

Attendees should have a good working knowledge of HTML, CSS, ES2015 JavaScript and web development. Also, students should have general programming experience. Any experience with modern UI components and routing libraries such as Angular or Vue is a huge plus.

Course RequirementsRequirements

We teach all classes online using Zoom. Students will need to be able to join a Zoom session. We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and coding along with the instructor. All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources.

Course OutlineOutline

Note: The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Introduction to React & Next.js
    1. Modern Web Development Tooling
    2. Languages of the Web: HTML, CSS, JavaScript
    3. Role of Data
    4. What is React?
    5. What problem does React solve?
    6. What is Next.js?
    7. What problem does Next.js solve?
  2. Getting Started with React
    1. Create React App project generator
    2. Web Browser Developer Tools
    3. React Developer Tool Extension
    4. Running and Debugging a React Application
    5. Role of Node.js
    6. Purpose of React and ReactDOM
    7. ES2015 Modules
  3. Functional Components
    1. What are Components?
    2. Create Element and JSX
    3. Benefits of JSX
    4. Fragments
    5. JavaScript Arrow Functions
    6. JSX and Expressions
    7. Displaying Collections of Data
    8. JavaScript Array Maps and React Keys
    9. Passing Data with Props
    10. Validating Props with PropTypes
    11. Default Props
    12. Managing State with Context API
  4. Class-Based Components
    1. JavaScript Classes and Extends
    2. Configuring State
    3. Component Did Mount Lifecycle Method
    4. Context of Event Handlers
    5. Class Properties and Class Arrow Functions
    6. PropTypes and Default Props on Classes
  5. Hooks
    1. Overview of Hooks
    2. State Hook
    3. Effect Hook
  6. Styling React Components
    1. Style and Class Name Props
    2. CSS Modules
    3. CSS in JS
    4. Styled JSX
  7. Getting Started with Next.js
    1. Benefits of a React Framework
  8. Next.js Tooling
    1. Creating a Next.js Project
    2. Generated Project File Structure
    3. Configuration Files
    4. Building Projects
    5. Developing Projects
  9. Next.js Pages
    1. What is a Page Component?
    2. Routing and Page Components
    3. Linking Between Pages
    4. What is a Subcomponent?
    5. Reusing Component Logic Across Pages
    6. What is a Layout Component?
    7. Layout Components and CSS
    8. Using styled-jsx
    9. CSS Grid and Flexbox
  10. Server-Side Rendering
    1. Benefits of Server-Side Rendering
    2. Hosting Requirements
  11. Routing
    1. Index Route
    2. Nested Routes
    3. Dynamic Route Segments
    4. Accessing the Router
    5. Routing Imperatively
    6. Shallow Routing
  12. Lazy Loading
    1. Lazy Loading Modules
    2. Lazy Loading Components
  13. Working with Data
    1. Fetching Data the Next.js way
    2. Using the Fetch API (can be substituted with Axios)
    3. Fetching Data and Server-Side Rendering
    4. Fetching Data from a REST API
    5. Using the SWR Hook for Fetching Data
  14. Unit Testing with Jest
    1. What is Unit Testing?
    2. JavaScript Unit Testing
    3. Unit Testing with Jest
    4. Snapshot, DOM and Shallow Testing
    5. Handling Events
    6. Testing Functional Components
    7. Testing Class-based Component
Scroll to Top