Introduction

React logo

This workshop is An Introduction to React JS, which will introduces you the core of React.

This Workshop will Cover

  • Core API of React
  • common use cases when using React JS e.g. making api call, routing, testing, code splitting
  • React hook feature

This Workshop will NOT Cover

  • Basics of HTML, CSS, & Javascript
  • React Class Component
  • Advanced React Patterns e.g. Higher Order Components and Render Props
  • Tooling to use with React, e.g. webpack, Babel, ESLint. We’ll use Create React App to abstract away all the tooling. If you’re interested to learn about those tools, refer to version 1 of this workshop.
  • Redux
  • Typescript/Flow

Prerequisite

This workshop assumes that:

  • you have at least basic understanding of HTML/CSS/JS. If you know how to add a button element in a HTML and a script tag to make clicking the button do something interactive like a popup, then you’re good to go. If you’re not ready, go through this Introduction to Web Development workshop.
  • you have at least basic experience using command line interface. If you know how to change directory with cd and create folder with mkdir, then you’re good to go. If you’re not, go through this Codecademy course - Module 1 (Navigating the File System) and Module 2 (Viewing and Changing the File System) are sufficient for this course.

Nice to have:

  • skim through the contents of this workshop. The more familiar with the concepts of the workshop, the more you will absorb from this workshop.

Setup

To avoid the workshop time being spent on downloading and installing tools, make sure you have the following software installed before the workshop starts:

  • node.js and npm (Download)
  • git (Download)
  • VS code (Download) - you can use other editor if you wish, but when discussing editor integration, this workshop will focus on VS code only.

Besides, sign up a GitHub account if you doesn’t have one yet.

What is Expected of You

  • Do the coding exercise
  • Ask questions
  • Help others
  • Report issue (using the red icon at the top right of the page)

Why Learn React

  • It trains you to be a good JS developer - learn functional programming and JS standards
  • It is popular - good job prospect!