Learn-React.md

ReactJS

Curriculum

• Preface

  • Prerequities
  • Choosing ReactJS ?
  • Philosophy

• Getting Started

  • Trying React
  • Create React App
  • JavaScript XML Syntax

• Components

  • Custom Components
  • Rendering
  • Conditional Rendering
  • Data flow
  • Lifecycle
  • Events

• Forms

  • Controlled Components
  • Uncontrolled Components

• Composition

  • Lifting state up
  • Composition vs Inheritance
  • Context

• Tools

  • Developer Tools
  • Proptypes
  • Error Boundaries

• In depth discussions

  • JSX in depth
  • Synthetic Events
  • React Without JSX
  • React without ES6
  • Reconcilation - Diff Algorithm

• Complete Projects

• Opensource projects you can contribute to

Preface

Prerequities

Experience with the basic web technologies ie. HTML, CSS & JavaScript will help.

Choosing ReactJS ?

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

• View in MVC – ReactJS is the view layer in our applications and it does this job really well without trying to achieve anything more.

• 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 will efficiently update and render 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

Custom 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>

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.

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 :

• Inspect coderplex website to know what all are components and details of them.

Proptypes

Resources

Concept	Best Video Resource	Best Text Resource	Documentation	Duration
PropTypes	EggHead	Facebook/PropTypes	ReactJS/prop-types	1 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.

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

Complete projects that you can have a look

• Ivy Log

Opensource projects you can contribute to

• Coderplex frontend
• Wanna Todo
• Spectacle
• Nylas Mail