A hands-on workshop 💻 on building Web Apps with React
Slides Link: Building React apps - Slides
- Environment Setup
- Project Setup
- ES6 Primer
- Introduction to JSX
- React Elements
- Components and Props
- State and Lifecycle
- Event Handling in React
- State Lift-up
- Container vs. Presentational
- Handling User data
- API Integration
- Navigation / Routing
For this workshop, we use the following set of tools and technologies:
- Node.js v8.10+
- Yarn!
- WebStorm / Sublime 3
- Google Chrome v60+
- React Developer Tools (Browser Extension)
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
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:
JSX allows writing Markup in JavaScript. It's a utility that helps developers create React components quickly and seamlessly.
- Code:
LessonJSX
Study Links:
Elements are the basic building blocks of React apps. They represent how DOM should look like at a certain time.
- Code:
LessonElements
Study Links:
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:
- React components Explained
- React Components, Elements and Instances
- React Props Basics
- Typechecking with PropTypes
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:
- The Component Lifecycle
- A Visual Guide to State in React
- How to Work with and Manipulate State in React
- How to handle state in React - The missing FAQ
- Intro to debugging ReactJS applications
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
Study Links:
- Events in React
- YouTube: React events in depth
- Why and how to bind methods in your React component classes?
- React and ES6 - Binding Approaches
- React, ES6, Autobinding, and createClass()
- React Binding Patterns: 5 Approaches for Handling
this
Move components' state to common ancestors when state trees start to get duplicated in children components.
- Code:
LessonStateLiftUp > part1 / part2 > TemperatureCalculator
Study Links:
Fundamental design pattern of React for managing and separating Logic / Data processing and View / Markup.
- Code:
LessonContainerPresentational
Study Links:
- Presentational and Container Components
- Leveling Up with React: Container Components
- Content vs Container
- Reusable state for React UI components
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:
- React.js Forms: Controlled Components
- Managing React Controlled Component State
- Content vs Container
- Controlled and uncontrolled form inputs in React don't have to be complicated
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:
- How to make AJAX requests in React?
- How to fetch data in React
- Where to Fetch Data: componentWillMount vs componentDidMount
- Loading data from APIs in React
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:
- react-router-4-practical-tutorial
- All About React Router 4
- React Router v4: The Complete Guide
- Using React Router v4 with create-react-app
- Server Rendering, Code Splitting, and Lazy Loading with React Router v4
- Advanced React Router concepts: recursive path, code splitting, animated transitions, and more
- Protected Routes and Authentication with React Router v4
- Role-based authorization using React-Router
- How to Build a React Application with User Login and Authentication
Global Storage is required in all Single Page Apps for better data handling. Redux is the most popular and robust solution available.
Study Links:
- Redux Official Docs
- Beginner Video Course on Redux by its creator
- An Introduction to Redux - Smashing Magazine
- Redux Fundamentals - Video
- React Redux Tutorial for Beginners: The Definitive Guide (2018)
- Leveling Up with React: Redux
- Redux: From Twitter hype to Production
- Redux Fundamentals - Reactathon Slides
- A Cartoon Introduction to Redux
- Redux Diagrams