/learn-react

Step-by-step React

Primary LanguageJavaScriptMIT LicenseMIT

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

  • Node.js
  • NPM (Node Package Manager) - Comes installed with Node.js
  • Git

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 satushandlers
  • 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

License

MIT

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