Learning React for my university project! Watching tutorials makes me feel I'm good at coding but when I start practicing my own I can't even write a single line 🥺

Single line you say?

npx create-react-app helloMf

There you go.

Did you start from create-react-app?
I already knew vanilla JS and the DOM api and I used them extensively, so I found it much better to just install react, react-dom and Babel for jsx and fuck around on a basic page. It gave me a better understanding of what React actually does.

Typescript is a good first addition, it also saves you a Babel config, but mainly because it's simply easier to write for newbies than randomly guessing at JS APIs or scavenging the documentation.

I just got the Github Copilot preview approved.
That AI can now write lines of code :D

copy and change, copy and change until it become second nature and you can just come up with own new code.

When copying make sure you understand each part.

You have to first understand the fundamentals, the concepts, the philosophy behind the technology before you can feel confident to write your own code, I find.

I know that ReactJS was modeled as a semi-MVC and is focused on components and data flow. With that knowledge, I know that if I want to create a simple component that does things, I have to give it certain behaviors and properties and isolate those.
I know that I will have to look at how I will render my component and I know that everything will be linked together, even if separated (for maintenance and security concerns). I know a piece of the code is for rendering, another is for OO, etc.

My professor once said: "Once you understand the story of programming, it will all make sense at once. It's like a little story that is told..".

@danielstaleiny That last sentence is important. You can get very far by just copying code, changing it and seeing what works, but that's how you get cargo cult programmers.

@CaptainRant I really don't understand how React works, all I know is the public API. I don't even know what's the exact algorythm to identify a component besides "when in doubt, use a key", and I don't know when state updates are executed besides "almost certainly in the same task, probably in the same microtask".

@lbfalvy Okay, well then I suggest to dive in deeper and take a look at the fundamentals.

When I was first learning react wtf I was learning class based and now they say the correct way is to use functional components? Different syntaxes confusing at first. Unlike Angular all class based and no JSX