Permalink
Switch branches/tags
Nothing to show
Find file Copy path
378 lines (242 sloc) 26.4 KB

ReactJS

Curriculum

Preface

Prerequities

Experience with the basic web technologies ie. HTML, CSS & JavaScript will help. Having a good grasp on ES6 / ES7 & functional javascript is essential.

Why ReactJS ?

React is an open source javaScript library for building user interfaces by Facebook inc.

  • View in MVC – ReactJS acts as the view layer for your application and it provides a robust infrastructure to build scalable and performant front ends.

  • Virtual DOM – This is probably why most developers are so attracted to React. React manages its own DOM in memory. The most expensive operation most web apps suffer is mutating the DOM. React's approach is to maintain a virtual representation of the DOM which allows it to calculate differences in the DOM so that it only mutates the part of the DOM that actually needs to be updated. This is a huge benefit!

  • Declarative – Design simple views for each state in your application, and React provides an innovating abstraction layer which efficiently updates just the right components when your data changes.

  • Component-Based – Build encapsulated components that manage their own state, then compose them to make complex UIs.

  • Server Side Rendering – Combining a NodeJS server and ReactJS helps us build even more complex applications by pre-rendering the initial state of our ReactJS components.

  • Javascript – It is JavaScript after all. We can use latest JavaScript goodies by transpiling our code with the tools we prefer like webpack, browserify, rollup, babel etc

  • Non-Opinitated – It doesnt make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

  • Testability – React components simplify testing greatly. As a proof of it's simplicity, our new web client has more tests than any of our other clients.

  • Functional Programming – ReactJS stateless components act like pure functions while composition is highly enforced instead of inheritance to reuse code between components.

Philosophy

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Best practices with react JSConf EU Medium ReactJS/thinking-in-react 1 hours

Tasks :

  • Take an application like Instagram and plan on what parts of it are re-usable and make a component.

Getting Started

Trying React

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Trying out React EggHead React Armory ReactJS/installation 6 hours

Tasks :

  • Make a HTML file with ReactJS as script tag in the head.
  • Make a simple km to miles converter in that one file.

Create React App

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Create-React-App boilerplate EggHead FacebookIncubator/cra ReactJS/installation 2 hours

Tasks :

  • Use create-react-app and create a sample React app.
  • Convert km to miles converter that you built previously into this application that you created now.
  • Build the application using create-react-app
  • Install serve by npm i -g serve and serve build to test the appliction that you built.

JavaScript XML Syntax

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
JSX EggHead ReactEnlightment ReactJS/jsx 6 hours

Components

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Custom components EggHead ReactArmory ReactJS/components 8 hours

Tasks :

  • Create a modified h1 tag which has underline and blue colored text. You should be able to use it as <Modh1>Some text</Modh1>

Additional Tasks:

  • Build a simple markdown app
  • Make a coursel
  • Make any component that you find will accelerate your work, like
    • A table component to quickly create tables
    • A responsive menu component
    • Anything else you could thing of!
  • A simple TODO APP

Rendering

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Rendering component EggHead ReactArmory ReactJS/rendering-elements 4 hours

Tasks :

  • Create an Time Application which updates automatically and always shows the current time. Time should be in the format HH:MM:SS AM/PM.

Conditional Rendering

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Rendering component EggHead RrobinWieruch ReactJS/conditional-render 3 hours

Tasks :

  • Create an application with component <Greet /> which displays "Good morning/evening/night" based on the time.
  • Create a website where you show different images based on the user input
    • Examples would be a user selecting a car type, and you display car images depending on the user input.
  • Create a website which only displays a page if you enter the right password, you don't need to implement the backend!

Data flow

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
State and Props EggHead LucyBain ReactJS/state 8 hours

Tasks :

  • Create a BMI calculator application.
    • This should internally contain two components, inputs for height and weight.
    • Display the result in the BMI component itself.
    • We should be able to use it as <BMICalc />

Lifecycle

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Component Lifecycle methods Frontend Masters ReactArmory ReactJS/state-and-lifecycle 6 hours

Tasks :

  • Build an application which has a search bar. When we enter any Github username in it, show the user's details in a card below.
    • The card should make use of all the component lifecycle methods.

Events

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Events handler EggHead JamesKNelson ReactJS/handling-events 10 hours

Tasks :

  • Build a todo application with following requirements
    • Input field to add new todos
    • Click on todo to toggle completion. Maybe strikethrough if its completed.
    • Double click on a todo to delete it.

Forms

Controlled Components

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Controlled forms EggHead LorenStewart ReactJS/forms 8 hours

Tasks :

  • Build an app which has a sign up form for students.
    • Year of passing should be dropdown and should contain only 5 years back from now.
    • Take in the date of birth and show his age next to dob input
    • Suggest a few interested topics to select from a list of suggestions. These suggestions should appear as a type-ahead.

Uncontrolled Components

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
UnControlled forms EggHead LeftDevel ReactJS/uncontrolled 8 hours

Tasks :

  • Built an app that shows a red color rectangle using canvas elements.

Composition

Lifting state up

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Lifting state Youtube Gerardnico ReactJS/lifting-state 2 hours

Tasks:

  • Create an application with an Image and like button as a child component. Have a count in the parent which has the Image. When we press like button, the count should be incremented.

Composition vs Inheritance

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
composition vs inheritance ViennaJS Brew ReactJS/comp-vs-inher 1 hours

Tasks:

  • Create an application with a Sidebar component <Sidebar></Sidebar> which can take any number of other component/elements to display in the sidebar.

Context

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Context ReactCast JSPlayground ReactJS/context 4 hours

Tasks:

  • In the todo app that you built previously built, change it to use context instead of props.

Tools

Developer Tools

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Dev tools & Experience Youtube Facebook/React-DevTools ReactJS/dev-ex 1 hours

Tasks :

Type System

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
PropTypes EggHead Facebook/PropTypes ReactJS/prop-types 1 hours
Flow Flow Flow Documentation 1 - 5 hours
Typescript Typescript Starter Kit Typescript Handbook 5 - 8 hours

Tasks :

  • Create an application similar with a component printer taking some text to display as a prop.
    • Use propTypes to check whether the prop passed is string or not.

Error Boundaries

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Error Boundaries EggHead Bugsnag ReactJS/error-boundaries 1 hours

Tasks :

  • Create an application with an <ErrorWrapper> component which catches errors in its children components and displays an error message if some error occurs.
  • Implement Error boundaries in most of the previous react applications you built.

In depth discussions

JSX in depth

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
JSX in details EggHead PoonyFo ReactJS/jsx-in 12 hours

Synthetic Events

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
React events Youtube Kirupa ReactJS/Events 12 hours

React Without JSX

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
React without JSX EggHead Brain Mock ReactJS/no-jsx 2 hours

Tasks :

  • Create a stopwatch application without any JSX.

React without ES6

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
React without es6 LiveCodin Medium ReactJS/no-es6 2 hours

Tasks :

  • Recreate the same stopwatch application without writing any ES6 code.

Reconcilation - Diff Algorithm

Resources

Concept Best Video Resource Best Text Resource Documentation Duration
Reconcilation Chariot Solutions Medium ReactJS/Reconcilation 10 hours

Courses