Code Monkey home page Code Monkey logo

into-the-reactjs's Introduction

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 developement server using npm start.

  • 14 to 23
    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

into-the-reactjs's People

Contributors

vigzmv avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.