Skip to content

🚀 Code samples for my 'Getting started and advancing with ReactJs' Workshop at Facebook Dev Circle.

Notifications You must be signed in to change notification settings

vigzmv/Into-the-ReactJs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

🚀 Code samples for my 'Getting started and advancing with ReactJs' Workshop at Facebook Dev Circle.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published