Centriq Training Print Logo

Saturday

August 15 08:09 AM

See our response to COVID-19: Safe Social Distancing with Centriq’s Live Virtual Training.

Training Class:

  • Ways to Train:
  • Live Classroom
    Class is delivered at a Centriq location with a live instructor actually in the classroom.
  • Live Virtual Class
    Class is delivered live online via Centriq's Virtual Remote technology. Student may attend class from home or office or other location with internet access.
  • HD Class
    Class is delivered via award winning HD-ILT at Centriq's facility. Students view the live instructor utilizing a 60'' HD monitor.
  • Ways to Buy:
  • Retail
    Class can be purchased directly via check, credit card, or PO.
  • CV Centriq Vouchers
    Class is available for students using Centriq Vouchers.
  • CP Centriq Choice Pass Eligible
    Class is available to students utilizing Centriq Choice Pass program.
  • SA SATV Eligible
    Class is available for students utilizing Microsoft Software Assurance Training Vouchers.
  • CLC Cisco Learning Credit
    Class is available for students using Cisco Learning Credits.
Start Date End Date Duration Days Start Time End Time Time Zone Location Ways to Train Ways to Buy Price
Request a Date
Facebook’s React is a front-end web GUI library written in JavaScript and created in 2011. It has progressively improved and has added features while used on the Facebook site. Typically compared to Google’s Angular front-end framework, it is less complex and less opinionated than Google’s heavyweight framework making it more popular overall among developers. This course teaches the fundamentals of using React for business to develop a front-end GUI without any additional packages as well as using a complementary React GUI library, Material-UI.




Audience

A web page developer comfortable with creating code in HTML, CSS and especially JavaScript.


Prerequisites

The student should be familiar with creating HTML and CSS used in the web page development cycle. JavaScript is necessary at a fundamental level.


Course Completion

The student will become familiar with the workflow through the use of Microsoft’s Visual Studio Code IDE. They will learn how to use React for building basic web pages and using a component library.


View the Training Course Outline

The current version of React is 16.8 released February 6, 2019. The courseware is updated to conform to any changes as necessary.

Introduction

  • Front-end frameworks
  • History
  • Books
  • Structure
  • Functional makes it easy
  • Virtual DOM

React v.16

  • React v.16
  • create-react-app
  • Visual Studio Code
  • Chrome devtools for React

JSX

  • JSX vs non-JSX
  • JSX
  • JSX syntax
  • Immutability
  • Namespacing
  • JavaScript expressions
  • Map array to elements
  • Map object to elements

Properties

  • State vs properties
  • Properties
  • Props
  • this.props.children
  • this.props.<propertyName>
  • Typed props
  • Props are read-only
  • Render props

State

  • State
  • State initialization
  • States
  • State and props together
  • State updates
  • State update with callback
  • Guard operator - &&
  • Component without output
  • Using map for interative output
  • Keys required in loops
  • State management packages?

Components

  • Fragments
  • Functional components
  • ES6 destructured syntax
  • Functional over classes
  • Higher-order components
  • Controlled vs uncontrolled
  • Architecture

Events

  • Events
  • Event handling
  • Synthetic events
  • Inline event handler
  • Binding to this
  • No binding with class property lambda
  • Sending arguments to event handlers
  • Better lambdas
  • Binding to elements?

Forms

  • Forms
  • defaultValue
  • Controlled components
  • Controlled vs uncontrolled
  • Select values
  • Object schema validation and parsing
  • Form values
  • textArea
  • select
  • Name the fields
  • Redux -Form?
  • Formik

Hooks and lifecycles

  • Hook basics
  • setState( )
  • useEffect( )
  • useContext( )
  • Other hooks
  • custom hooks
  • ESLint plug-in

Context API

  • Context API

CSS, styles, themes

  • CSS styles
  • A styles object
  • CSS classes
  • Importing CSS
  • Reusable HTML elements
  • Icons
  • CSS-in-JS
  • Styled components
  • Material-UI themes

Architecture

  • Single responsibility principle
  • Dependency inversion
  • After basic concepts

Related packages

  • React Styleguidist
  • Apollo
  • Axios
  • Redux
  • Jest
  • Enzyme
  • Bit
  • Component libraries
  • Joi
  • React-motion
  • Blogs
Enroll Now!