Day 3 - Simple React Todo List

What can you do when you have grand plans for a big fancy project and time gets in your way? What do you do if you said you were going to release a project everyday and you find yourself coding past midnight, several problems in the app unsolved, falling asleep at your desk? Following the prudent advice of someone who successfully completed the 100 days of code- I went to bed. That means I'll do an extra project the next day I have free time- probably Saturday.

App Overview

Here is a simple todo list app I built using just a couple of class-based components. Todos are stored in the main application component's state and added and deleted by methods in the class.

Something I've begun to realize is that there are basically zero tutorials or exercises in React I've run across that really require create-react-app and the lesson I followed today confirmed that when we were instructed to "delete all of the files in both the src and public folders". Tomorrow I go back, happily, to nano-react-app.

Credits

FYI I built this following this wonderful Youtube tutorial: link here

It's election night in America. I'll be back tomorrow with a more substantial project. Friends abroad wish us luck :)

github repo - link here
deployed app - link here

Comments

[Ricardo Costa Alves dos Santos]

Nice work man!

Can you help me? How can i deploy my apps like you did it?

keep going :)

[James Hubert]

Hey Ricardo - I see you are on Day 4. Well done so far! Let's keep each other going!

There are a couple of ways to do it. Since you are building static html & css sites- I would recommend 3 possible places:

1. Netlify - my first choice
2. Github pages - you will want to deploy something here before your 100 days is over just for the experience. It's easy!
3. Hostinger - a good all-around web hosting site with a very easy user interface. Plans start at about $10.

If you want my advice though- I really love using Netlify.com. After you sign up for an account they give you 100gb of free hosting- which is really generous. They serve sites that are incredibly fast and have a great interface. So here are the steps:

1. Go to netlify.com and sign up for an account
2. After you sign up and log in, go to your dashboard. If you're lost just click on your profile image in the top-right corner and then in the dropdown click your username.
3. Once in the dashboard click "Sites" and that will lead you to your sites page; that's all the projects you have deployed.
4. From here, there are a couple of ways to deploy your site. You can either connect your Github and deploy a project from there, or you can drag and drop the project folder into their site and it will deploy automatically. Just make sure your root file is called "index.html".

Here's a complete tutorial: netlify.com/blog/2016/10/27/a-step...

Hope that helps!

[Ricardo Costa Alves dos Santos]

Hi James, how you doing? Hope you and your family are doing well with this covid situation.

Thank you so much for the explanation. Next time i'll deploy my site useing the netliy plataform :)

Let's keep going :) God bless you.

ps: sorry my miss spelling, english is not my first language :S

[James Hubert]

You’re doing great! Looking forward to seeing what you do next :)

[tykunk]

Quick question? when you building an application are you build from scratch like styling css. And also how do you learn React? is there from YT or any website can you share?