Dissecting React JS


React Course Introduction

This section of the course introduces the project that we'll build in the course along with generating the application and examining the file system.

Outcomes:
  • Build a basic React application.
  • Construct the React application dependencies.
  • Demonstrate multiple methods for installing dependencies into a React application.
  • Explain the role of the src directory in React.
  • Describe the role of Webpack in a React application.
  • Defend the importance of Babel in React.
  • Identify the responsibilities of the package.json file in React.
React JS fundamentals

This section of the course walks through fundamentals in React development, including: components, state, props, and much more.

Outcomes:
  • Explain the role of components in React.
  • Discover the differences between Class and Functional components.
  • Identify the elements required by a class component.
  • Build custom looping functions that render multiple components on a page.
  • Describe the key differences between JSX and HTML.
  • Explain the recommended process for changing a component's state.
React Router

This section of the course examines how to implement routing in a React JS application.

Outcomes:
  • Explain the difference between routes in React vs traditional applications.
  • Demonstrate how to implement routes in a React application.
  • Build a catch all route in React.
  • Demonstrate how to access URL values in React routes.
API Communication

This section of the course walks through how to utilize APIs to communicate with outside services.

Outcomes:
  • Describe the role of an API in a React project.
  • Explain the request/response lifecyle of an API.
  • Assess the data response from an API call.
  • Build an API call with React and Axios.
  • Demonstrate how to parse and render API data in a React application.
  • Demonstrate three ways to access API data in React.
React JS Style Integration

This section walks through how to integrate and organize styles in a React JS application.

Outcomes:
  • Construct a master style file that imports multiple Scss files.
  • Describe the process for importing and using custom fonts in React.
  • Demonstrate how to build a flexbox based navigation component in React.
  • Combine Scss with the React Router active styles to change styles when a user is on a specific page.
  • Explain how to use inline styles in JSX.
React JS Authentication

This section walks through how to integrate authentication into a React JS application by leveraging HTTP Only Cookies.

Outcomes:
  • Describe the role of authentication in a React application.
  • Build out an authentication system that logs a user into an application.
  • Demonstrate how to update a component's state with form elements.
  • Construct a route guard in React to secure specific pages.
  • Describe how components can update the state in other components.
  • Explain the role of the HTTP cookie as it applies to authentication.
Portfolio Manager Build Out

In this section of the course we're going to build out the portfolio manager feature for the application. This will include learning how to work with form objects, uploading images, installing and configuring Dropzone, and populating data on the page based on API responses and no page refresh.

Outcomes:
  • Design the ability to create records via API calls from a React JS application.
  • Build React JS components that pass bi-directional data.
  • Explain how to upload images from a React JS application.
Updating and Deleting in React

This section of the course explains how to utilize React to update and delete records in an application.

Outcomes:
  • Demonstrate working with the DELETE HTTP method in React
  • Build a React component that functions for both create and edit features.
  • Explain how to show and hide components based on state values in React.
Building a Blog in React

This section explains how to build a blog feature in React JS, including walking through how to work with modals, infinite scrolling, rich text editors, and data loaders.

    Unsupported Browser

    devCamp does not support ancient browsers.
    Install a modern version for best experience.