Getting Started with React | Introduction to React Basics

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We’ll work with you to tune this course and level of coverage to target the skills you need most.

ES6 Primer (Overview)                                            
Prefer const and let over var                                      
Arrow functions                                              
Modules                                                    
Object.assign()                                              
Template literals                                               
The spread operator and Rest parameters                                       
Enhanced object literals                                          
Default arguments                                            
Destructuring assignments      

Your First React Web Application (Overview)                                  
Setting up your development environment                             
JavaScript ES6 /ES7                                               
Getting started                                                

Using Webpack with Create React App
JavaScript modules
Create React App
Exploring Create React App
Webpack basics
Making modifications
Hot reloading; Auto-reloading
Creating a production build
Ejecting  

Class and Functional Components
What’s a component?                     
Class components
Functional components - Motivation behind Hooks
How Hooks Map to Component Classes
Our first component                                           
Building The App                                                
Props - Making The App data-driven
Props – this.props vs props
Events - Your app’s first interaction
useEffect() Hook Example
State - Updating state
useState() Hook Example

JSX and the Virtual DOM (Overview)                                             
React Uses a Virtual DOM  
Why Not Modify the Actual DOM?
What is a Virtual DOM?
Virtual DOM Pieces
ReactElement

BONUS READING MATERIAL - JSX
JSX Creates Elements
JSX Attribute Expressions  
JSX Conditional Child Expressions
JSX Boolean Attributes
JSX Comments
JSX Spread Syntax
JSX Gotchas
JSX Summary  

Forms  
Forms 101
Text Input
Multiple fields
Validation

Routing
What’s in a URL?
React Router’s core components
Building the components of react-router  

Unit Testing & Jest (Time Permitting)
Writing tests without a framework
What is Jest?
Using Jest
Testing strategies for React applications
Testing a basic React component with Enzyme

Student Materials: Each participant will receive a digital Student Guide and/or Course Notes, code samples, software tutorials, step-by-step written lab instructions (as applicable), diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. In some cases we can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Course Recordings, Live Instructor Follow-on Support, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.