Skip to content

🔥 A hands-on workshop on building Web Apps with React 💻

License

Notifications You must be signed in to change notification settings

saadyousafarbi/react-workshop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💥 react-workshop 💥

A hands-on workshop 💻 on building Web Apps with React

Table of Contents

Environment Setup

For this workshop, we use the following set of tools and technologies:

Project Setup

The demo project can be setup by the procedure mentioned below.

Run the following commands in the exact order in order to download project dependencies and start the project.

  • $ cd react-workshop
  • $ yarn install
  • $ yarn start

ES6 Primer

The next (and much better) version of JavaScript that helps write consistent and error-free code.

  • let / const
  • template literals
  • Classes
  • Arrow functions
  • Object Literal Enhancements
  • Default Parameter Values
  • Object Spread Operator
  • Destructuring
  • Module Exports / Imports

Study Links:

⬆ back to top


Introduction to JSX

JSX allows writing Markup in JavaScript. It's a utility that helps developers create React components quickly and seamlessly.

  • Code: LessonJSX

Study Links:

⬆ back to top


React Elements

Elements are the basic building blocks of React apps. They represent how DOM should look like at a certain time.

  • Code: LessonElements

Study Links:

⬆ back to top


Components and Props

Components can be used to build complete views in React. Each component needs some data to display or to work with. This data is known as Props.

  • Code: LessonCompProps

Study Links:

⬆ back to top


State and Lifecycle

React's state allows us sto store and manipulate data in a component. Lifecycle hooks enable us to perform operations during certain points in the execution lifecycle of the component.

  • Code: LessonStateLifeHooks

Study Links:

⬆ back to top


Event Handling in React

Similar to DOM event handling with a few convention differences as well as knowledge of binding functions with classes.

  • Code: Lessons.js / LessonState.js / LessonHooks.js / Profile.js

⬆ back to top


Study Links:

⬆ back to top


State Lift-up

Move components' state to common ancestors when state trees start to get duplicated in children components.

  • Code: LessonStateLiftUp > part1 / part2 > TemperatureCalculator

Study Links:

⬆ back to top


Container vs Presentational

Fundamental design pattern of React for managing and separating Logic / Data processing and View / Markup.

  • Code: LessonContainerPresentational

Study Links:

⬆ back to top


Handling User data

Getting data from users via Forms in React can be done via Controlled components where each HTML Form element behaves like a React component.

  • Code: LessonUserData

Study Links:

⬆ back to top


API Integration

Integrate / Load data from any 3rd party source via RESTful APIs / AJAX calls but in a way that conforms to React's programming model.

  • Code: LessonAPIIntegration > PracticeAPIIntegration > GitDashboard

Study Links:

⬆ back to top


Navigation or Routing

Navigation is a cross-cutting concern and we need a declartive solution for implementing Navigation in our app. Fortunately React Router v4 is the solution already available to us.

  • Code: branch: react-router-integration

Study Links:

⬆ back to top


Global Storage

Global Storage is required in all Single Page Apps for better data handling. Redux is the most popular and robust solution available.

Study Links:

⬆ back to top


About

🔥 A hands-on workshop on building Web Apps with React 💻

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 86.3%
  • CSS 11.4%
  • HTML 2.3%