Become a React Developer

Description

In this course, you will learn :

• How to create declarative user interfaces for the web using React, as well as iOS and Android using React Native.
• How to use Redux to manage state more predictably in your applications.

Syllabus:

Course 1: React Fundamentals

• Why React
  • Identify why React was built
  • Use composition to build complex functions from simple ones
  • Leverage declarative code to express logic without control flow
  • Recognize that React is just JavaScript
• Rendering UI with React
  • Use create-react-app to create a new React application
  • Create reusable, focused Class components with composition
  • Leverage JSX to describe U
• State Management
  • Manage state in applications
  • Use props to pass data into a component
  • Create functional components focused on UI rather than behavior
  • Add state to components to represent mutable internal data
  • Use the this keyword to access component data and properties
  • Update state with setState()
  • Use PropTypes to typecheck and debug components
  • Use controlled components to manage input form elements
• Render UI with External Data
  • Conceptualize the lifecycle of a component
  • Use React’s componentDidMount lifecycle hook for HTTP requests
• Manage App Location with React Router
  • Use React Router to add different routes to applications
  • Use state to dynamically render a different “page”
  • Use React Router’s Route component
  • Use React Router’s Link component

Project MyReads: A Book Lending App

In this project, you will build a React application from the ground up and manage the user interface with React components. You'll build a virtual bookcase to house your books and keep track of what you're reading. As a React component, you will search for books and add them to a bookshelf using the provided Books API. Finally, you'll use React's setState to create the functionality that allows you to move books from one shelf to another.

 

Course 2: React & Redux

• Managing State
  • Recognize how state predictability improves applications
  • Create a store to manage an applications state
  • Leverage store API: getState(), dispatch(), and subscribe()
  • Create Actions and Action Creators that describe state changes
  • Create Reducers that return state
  • Use Reducer Composition to handle independent parts of state
• UI + Redux
  • Combine Redux with a user interface
  • Build intuition for when to use Redux
• Redux Middleware
  • Identify the benefits of implementing middleware in applications
  • Identify the role of middleware within the Redux cycle
  • Apply middleware to a Redux application
  • Build your own Redux middleware
• Redux with React
  • Combine Redux with the popular React library
  • Identify when to use component state vs. Redux state
• Asynchronous Redux
  • Learn the pitfall of asynchronous requests in Redux
  • Leverage Thunk middleware to support asynchronous requests
  • Fetch data from a remote API
• React-redux
  • Install the react-redux bindings
  • Leverage react-redux bindings to extend app functionality
  • Use the Provider to pass a store to component trees
  • Use connect() to access store context set by the Provider
• Real World Redux
  • Build a complex, real-world application with Tyler
  • Add Redux to an application scaffolded with Create React App
  • Normalize state shape to keep application logic simple with scale

Project: Would You Rather

Make use of Redux's strengths to create a "Would You Rather" application in which users are presented with questions and must select one of them. You will create this dynamic application from the ground up, combining Redux's state management features and the React component model. When finished, you'll be able to create your own sets of questions, select from them, and keep track of question popularity.

 

Course 3: React Native

• Up and Running with React Native
  • Identify the ideology behind React Native
  • Set up an ideal development environment
  • Inspect and debug applications
• React vs React Native
  • Identify fundamental differences between web and native apps
  • Identify differences between Android and iOS platforms
  • Leverage common React Native components
  • Create forms in React Native applications
    • Utilize AsyncStorage to persist global application data
  • Incorporate Redux to manage shared application state
• Styling & Layout
  • Style applications with CSS in JS
  • Identify differences and use-cases between styling with inline styles, object variables, and the Stylesheet API
  • Recognize the core philosophies and techniques of CSS flexbox
  • Identify key differences between flexbox on the web and React Native’s implementation of flexbox
  • Identify best practices in how professionals handle styling
• Navigation
  • Manage navigation through a React Native application
  • Utilize StackNavigator to render screens from a stack
  • Implement TabNavigator to switch between screens by using tabs
  • Utilize DrawerNavigator to switch between screens from a drawer menu
• Native Features
  • Leverage native APIs to extend app functionality
  • Incorporate Geolocation, Animations, Notifications, and ImagePicker to take advantage of device features and data
  • Prepare applications for the Google Play Store and the App Store

Project: Mobile Flashcards

In this project, you will create a mobile flashcard app using React Native. Users will be able to not only create custom cards and decks, but also set up notifications to remind them to study. To create a fully dynamic experience, you'll use React Native components, AsyncStorage, proper styling, and device APIs.

Show more