Skip to content
This repository has been archived by the owner on Nov 14, 2018. It is now read-only.

mesaugat/learn-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Learn React

A step-by-step guide to learn React and it's fundamentals.

Yes, yet another todo app.

Demo

Prerequisites

  • HTML/CSS
  • Basic JavaScript
  • ES6

Required Tools

Install create-react-app

create-react-app is a tool to build React apps in no time. It allows us to create React apps without any build configuration.

From your terminal, install create-react-app globally.

npm install -g create-react-app

create-react-app my-app
cd my-app
npm start

Let's get started.

Steps

Clone the repository.

git clone git@github.com:mesaugat/learn-react.git

git checkout <branch-name> in your terminal to the branch you want to navigate to.

  • step-0 - Initialize create-react-app
  • step-1 - The Hello World of React
  • step-2 - Add some HTML/CSS for the todo list
  • step-3 - Extract todo items to an array
  • step-4 - Create a TodoList component
  • step-5 - Extract a TodoItem component
  • step-6 - And TodoCount component and move files to a components directory
  • step-7 - Add InputBox component for adding a note
  • step-8 - Make App component stateful
  • step-9 - Add prop types validation
  • step-10 - Make a controlled input component
  • step-11 - Add event handler to change todo status
  • step-12 - Add a new component TodoFilter and it's event handlers
  • step-13 - Make HTTP request to fetch notes
  • step-14 - Deploy app
  • step-15 - Finalize

Resources

License

MIT


This guide is heavily inspired from kabirbaidhya/react-todo-app.