Into-the-ReactJs

Code content for my Session/Workshop on React.

Agenda

A deep dive into the React. Starting from the very basics, exploring what? why? how? the APIs work and levelling up to its advanced patterns.

1. Introduction: What is and Why should one do React?
2. The Basics: Exploring the basic elements of React with just one single HTML file. Building few core React APIs ourself and learning how they work.
3. Thinking in React: Setup and building simple React Front End. Create react App. Life Cycles. Synthetic Events. Lifting State. Dropping Props. Some Styling. Some Tooling. Different Component Patterns. Data Fetching. Data persistence with Firebase re-base. Deploying builds.
4. Advanced Patterns: Declarative Development, Compound Components, HOCs, Refs, Context, Portals and More! Learning by building real-world usages.

Slides

Vignesh M - React

Requirements

See Requirements

How to run

Execute npm install once in root folder and switch to the respective project folder to run the examples.

• 01 to 09
  Use any http-server and to open index*.html
  The starter code is in index-start.html and finished code is in index-finished.html

• 10 to 11
  Use any http-server (http-server/browser-sync) to open index*.html
  The starter code is in index-start.js and finished code is in index-finished.js
  You will have to swap out the src of js file in index.html

• 12 to 13
  These are created with create-react-app.
  Install node dependencies with npm install and then start development server using npm start.
  

• 14 to 24
  These are created as parceljs projects.
  Install parceljs globally using sudo npm install -g parcel-bundler once and run start the server using parcel index.html.
  

More Resources

• The Beginner's Guide to ReactJS - Kent C. Dodds
• ReactJs
• Create React App
• ParcelJs
• Rebase