Tutorial hell: The escape (part two)

joaoHass — Thu, 05 May 2022 15:24:40 +0000

Hi!

I've made some progress on the project since my first post here! First, I wanna show a quick overview of what I've implemented so far:

User can now add/remove cards

Tasks are now stored on localStorage

Now displaying the number of cards in each stack and the name of the stack (hey, it's a feature, ok?)

Yes, I know these are basic things (looking from a perspective of who's already have some experience with frameworks), but that's fine, I'm learning at my own pace 😄

What I struggled with

There are a couple of things and concepts that went over my head, even when I tried over and over again. I'll cover one by one to keep things organized!

Ability to create new cards

Seriously, I just couldn't figure out how to properly implement it. I was like "ok, how am I supposed to do it?". Only after reading multiple times the docs, googling, and writing down what I expected the component to do, I was able to implement it and understand why it works (that's the most important thing for me).

The difference between declaring a variable inside and outside the component (even on the same file)

To be honest, I'm not 100% sure that I understand completely this, so if you know any source explaining in-depth this, I'd be happy to read it! 😃

This one was trickier for me. I just couldn't wrap my head around the fact that I needed to use hooks in order to the component keep track of the state that I wished. It took me more than I like to admit (hours) to grasp the concept.

How to pass information up

To be honest, It wasn't that difficult to understand, I just had to get some real practice to get comfortable with how it works. (thinking of it, I already used the concept of passing functions as parameters, but I didn't make the link until now).

Typo ☠

sighs. I spent like 30 minutes checking the logic of my code trying to debug why the new tasks weren't being added properly when I created them. Then I gave up.
Just kidding 😁
I found out that the bug was related to each child in a list not having a unique key (but, they did have), but I just couldn't see where I was making a mistake, so I asked for help (thank you, Sinc02). Turns out that my problem was a typo! I had added an extra 's' on my code. It should have been task.id but I coded as tasks.id, which messed up the rest of the functionality of the code.
So, I removed that sneaky extra letter, and everything worked like a charm!

Final thoughts

I have a lot to do, but I'm happy with my progress. The next step is to implement the ability to drag the cards around to change their current state (in progress, done, etc). I've also learned more about prop drilling, component composition and, the context api.

Doing this project has been fun so far and things look promising. I had a lot of difficulties and problems along the way, but these hard things taught me a lot, so in the end, they were good things.

I'm still learning how to write these blog posts, but I think I'm getting the handle of it 😄

Well, I gotta go for now! Thanks for reading and I wish you the best, fellow stranger! Godspeed.

Tutorial hell: The escape (part one)

joaoHass — Tue, 03 May 2022 13:50:36 +0000

Hi!

Sooo, after months of postponing it, I'll finally start to develop a project from the ground up using React. I tried a few times following tutorials, but I always got that feeling of "Ok, what do I do know? So, this time I decided to not follow any tutorials because:

I want to escape tutorial hell;
I want to improve my problem-solving skills;
Why not?

Oh, I'm João, by the way! I currently live in Brazil and I'm a 20 years old self-taught developer. It's nice to have you here, fellow stranger! 😄

The Project

I'm going for a kanban-styled app. You didn't read it wrong, it's not a to-do list! yikes

I plan to develop new features gradually, a*s I get more comfortable* with the logic and with React. I thought of plan everything from the get-go, but that was overwhelming, so I decided to go with basics first, features later.

Structure

The project, at the current stage, has the following structure:

    \---modules
        \---kanban
            +---Card
            |       Card.css
            |       Card.jsx
            |
            +---ColumnStack
            |       ColumnStack.css
            |       ColumnStack.jsx
            |
            \---KanbanApp
                    KanbanApp.css
                    KanbanApp.jsx

Now, explaining each component:

KanbanApp: contains the entire project;
ColumnStack: the column of cards (to do, in progress, in revision, concluded). Each column holds its respective cards.
Card: contains the info from each task; belongs to one of the columns.

Ok, I know that a lot of things are missing (add new cards, edit existing cards, move cards arounds, etc), but as I said, I plan to implement these things later, for now I just want to get started.

Oh, And i'm following the modules/domain structure!

What to expect?

Frankly, I don't think I'll be able to write daily about the project, but you can stay tunned on my github repo! I do plan to fully develop this app, or at least, most of it, because I know that's the only way to keep moving forward.

Also, I know that I need to improve my writing skills. I have to make things enjoyable not only for me, but for you as well, dear reader. English is not my primary language, so I know that creating the habit of writing a blog or something will greatly improve my fluency.

Buuut I'm enjoying racking my brains, trying to figure things out on my own. You see, when you follow a tutorial, you are just... following. So, starting fresh with no directions is kinda freeing and exciting?

Well, I gotta go back to develop this little project of mine. I really hope to see you here next time, fellow stranger. Godspeed! 😊

DEV Community: joaoHass