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

• Thinking in React
• Components
• JSX in Depth
• State and Lifecycle
• The Beginner's Guide to ReactJS - Free Video Tutorial
• React FAQ

License

MIT

---

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