React for beginners

Description

Training Overview

React is a declarative, efficient and flexible JavaScript library to build user interfaces created by Facebook a few years ago, and widely implemented ever since. In this training, you will learn how to think in React, discover and apply concepts such as React App CLI, State and Props and Redux.

During the first part of the workshop, we'll explain the basics of React and you’ll work on a set of exercises to put into practice the different covered topics. We will also cover best practices for state management, error handling, headless components, side effects and more.

Who is up for this HackCamp?

Software engineers, developers and designers who want to get started with and build robust single page applications with React and Redux.

What is the required knowledge to join this course?

You need to be comfortable writing JavaScript. You need to know what is the spread/rest operator, how to deal with async programming (typically fetching data from a server using Promises). The concept of this in JavaScript should not scare you. No prior React experience is required. Git knowledge is not required. Participants should be comfortable following the training in English.

What do you receive after the training?

• Participants will be granted access to all exercises covered during the workshop via Github repositories and will be able to download them for up to 1 month following the workshop.
• On top of that, Hackages participants will able to contact their mentor for up to 3 months following the workshop. This assistance includes one hour of discussion per participant on the topics covered in the training.
• Participants will receive a personalised certificate issued by Hackages that proves that they have successfully completed the workshop.
• Participants become part of a fast-growing community of developers and will be informed of upcoming community events.

Part 1: Thinking in React

• Thinking in React
• Green field, creating your first application using the Create React App CLI
• What is a Component
• State vs Props
• Using react’s debug tool to increase your productivity
• Mapping arrays to react Components
• Fetch, Axios and react
• Learn about React useEffect hook
• When to use it
• When not to use it
• React context
• Manage complex state with useReducer

Part 2: React Router

• React Router 4
• Pass parameters into the routes
• Combine routing with http requests
• Protect your application using private routes

Part 3: Best Practices and Redux

• React Best practices for state management
• Abstracting the state from your app using Redux
• Reducers, Actions,… Learn the Redux Jargon
• Write your first reducers and actions using a TDD approach
• Plug redux in a React react App

Part 4: Forms

• How to handle forms in React
• Simple state management
• Usage of a library
• Formik: the ins and outs
• Validation
• Form props

Part 5: Styled Components

• Style your React app using Styled Components
• Styled Components props
• Extension
• Animations
• Themes
• Responsiveness