NOTE: THIS IS THE STARTER CODE. FOR EACH CONCEPT COVERED, VIEW THE RELEVANT BRANCHES.
In this mini-project, we'll cover the basics of React JS by rewriting the below Todo App written in HTML and Vanilla JS in React.
- Component Architecture
- JSX
- Prop Basics
- Destructuring Assignment
- Lists and Keys
- React Fragments
- React Children
- State
- Events in React
- Controlled Inputs
useEffect
- React CRUD operations with JSON-server
- React x Tailwind CSS
- Node 18+
- JSON Server
- Live Server extension (VS Code).
- ES7 React/Redux/GraphQL/React-Native snippets. (click here to install)
- A browser capable of running JavaScript (Chrome, Firefox, Safari, or Edge)
- Operating System (Windows 10+, MacOS, Linux, etc.)
- A text editor capable of running JavaScript (Visual Studio Code, Vim, Nano, Emacs, Atom, Sublime Text, etc.)
- RAM >= 4GB
- Disk space >= 1GB
To use this repo, follow these steps:
-
Open the terminal/CLI on your computer.
-
Clone the repository by running the following command:
git clone https://github.com/oyieroyier/todo-app.git
-
Change directory to the repo folder:
cd todo-app
-
Open it in your Code Editor of choice. If you use VS Code, run the command:
code .
-
On the top right corner of this page there is a button labelled
Fork
. -
Click on that button to create a copy of the repository to your own account.
-
Follow the process described in
Alternative One
above. -
Remember to replace your username when cloning.
git clone https://github.com/your-github-username-here/todo-app.git
-
In the file tree, click on the
html-demo
folder -
Right click on the
todo.html
file to show the context menu and selectOpen with Live Server
option. -
This will open the file in your browser.
-
If using VS Code and don't have Live Server installed CLICK HERE to install it and repeat the second step.
-
Open the integrated terminal in your code editor and install the project dependencies:
npm install
-
Once done with the installation, run the development server in your terminal.
npm run dev
-
You should see the notification
Your application running on port 5173 is available.
at the bottom of your editor. -
If using VS Code, click the
Open in Browser
button. -
If using any other editor, copy the link in the terminal and open it on your browser.
http://localhost:5173/
When both versions of the application are running, you should see something similar on the browser windows where they are open.