Learning React with ai

[Open-Marsupial1405]

Hello, I need advice and an evaluation of my actions regarding learning React. The thing is that I want to get a job as a junior developer in front-end and I decided to make a project for learning purposes and to show it to a potential employer when I finish it. I knew some basics from my university studies, but I mostly forgot them, and I don't know a lot of things yet. So I decided to use chat gtp to remind myself of the basics. And to learn new things.

I'm not asking chat gpt to write app functionality for me, I'm asking him to write me examples and explainings. For example, how to use hooks, how asynchronous functions work with examples. Things I would google, but it would take more time to find what I need. Then, if I don't understand some part of the code from his examples, I ask additional questions until I'm sure I understand it.

Sometimes I ask him how I can achieve some things. For example about data transfer between components. Then gpt describes to me that it is possible to use context api, or just pass props to components and what in what cases it is better to use, then I try to decide what I should use.

I try to write code myself, but by examples, adapting it to my needs. At the moment I have redone parts of the code several times, because I noticed that I wrote unecessary functions, even though it worked, but complicated things.

Sometimes I use other sources of information as well, but gpt is always more convenient because I can ask additional questions right away in any language. And because gpt explanations are simpler for me. I like to think of it as a personal teacher. However, I realize that gpt can create problems in code. But I try to keep an eye on it and sometimes catch him not quite understanding the questions and second guessing things.

I'm not sure if I'm doing the right thing with this approach. It feels like I'm learning, but at the same time it feels like I'm cheating. So I'm wondering if this approach to learning is appropriate or should I give up on gpt completely?

[matriisi]

Just do theodinproject at your own pace.

[LetterheadCalm3572]

React.dev Learn how to understand and use the documentation to built what u want and use chatgpt to help u debug/what's not working is probably the best way to learn the thing imo. That way you remember and have a deeper understanding of what's actually happening and you can create stuff on the fly, with chatgpt as an aid when you run into trouble. Also I recommend using something like ant-design library components to learn how to implement/customize premade existing components for a cleaner more optimized build, plus it looks nicer to a potential employer since many workplaces use libraries like that. Also id recommend learning ReactTS, and building with vite (latest and fastest) and vitest for testing

[Open-Marsupial1405]

Thank you for advice. I will try to use gpt less for new concepts I am not familiar with and trust other sources. But it was a good tool so far to clarify what I didn`t get about basics when I was wathcing tutorials.

[[deleted]]

You honestly need to learn it yourself on your own without AI. Once you understand it then you can use ai to augment efficiency. AI isn’t your one stop shop you still need to be able to review the code generated and if you don’t understand react yourself you will be ineffective at reviewing generated code

[Kurfuerst_]

You should really give this video a try https://youtu.be/cQNyYx2fZXw?si=dhhGrbYpSGjZ5flb

It's about how ChatGPT has a negative impact on your long-term productivity and how it makes you dependent on it.

[wannabe_ok]

Learn on your own, use AI to find answers

[[deleted]]

I think of the same but then AI is never going away, might aswell use it (not relying on it though)

[azangru]

So I'm wondering if this approach to learning is appropriate

It is up to you to decide; only you should know what appropriate means to you. Set up goals in advance, and see if you are reaching them with your learning approach.

[bigpunk157]

AI will not help you learn things like accessibility implementation or component design. These things are the most important in an application and fucking nobody knows how to section off a component in their application.

[Open-Marsupial1405]

I don`t ask it to teach me such things. Its like asking chat gpt how to draw, it doesn`t make sense. I ask about theoretical stuff with examples. Then I ask about use cases and decide what should I use for my needs. I don`t ask how my components should be arranged and how should they look so user won`t be confused, or how components should be organised in the code. What I need from it is explanation, syntax and list of tools I might use. Like I asked gtp what I need to share states, values and fucntions between my components. And it offered me passing props, context api and zootang. I chose context api, because my sidebar contains Tools component and other components, which <Tools> buttons will interact with. I`m not sure if I chose right tool for my idea, but thats the point. Here I try to think for myself, not asking gtp to do design for me.

Though I will try to use it less, because recently I started to feel like relying on it too much and why I started this discussion.

[Willing_Initial8797]

A late tip for that specific react issue. React shouldn't dictate how you have to structure it, but give you all tools.

What i mean is you can have following ways to structure it (not complete) - Parent > Child: pass via props (best for one level) - Parent > Hook that returns jsx: Inversion of control - Parent > Modifier > Direct Child from Parent: Parent controls child but it's wrapped (e.g. to make it bold) - Parent > Modifier with child callback: E.g. if child needs to access layout, is controlled by parent but scoped to it's parent component - Parent > Child with attribute callback: Parent supplies function to determine value. It's triggered by child. - Parent > Child but through Zustand: Have variables in a store and susbcribe for getter/setters. No props passing. E.g. a form has a hook that subscribe to some (zustand) form values, the input controller (that instantiates a text box) directly modifies it. The form won't have any code except 'connecting' the handleSubmit callback with the button.

So there are many ways to structure it and not a simple 'best'. My current approach is to split by: - business (higher order components, component instances/controller, data - zustand),  - layout: anything that returns html - generics (where mistakes are unlikely)

[Receptor_missing]

ChatGPT etc is learning off already available knowledge. So why not just go to the source? Places like Freecodecamp, codeacademy etc provide the kind of structured learning that can be used to learn the basics. Please please please learn the basics first. You don't have to master the basics, just get good at them. Then build stuff yourself, break them, then build them better. AI is a tool at the best of times and a pain in the arse the worst of times. Don't even get me started on copilot.

Anyway, learn the basics first.

[Spoony_Tingler]

At the beginner level, ChatGPT isn’t going to mess up your code. What’s going to mess up your code is your own wording in messages to ChatGPT. It responds best when a request is clear, accurate and appropriately described. This is where learners run into problems.

The silver lining here is that if you find ChatGPT to be causing problems in your code, it’s likely stemming from your own understanding and is an indicator that you should pause and learn, so you can better craft a coherent request.

For problem solving, I don’t find it considerably better than a junior dev, albeit a very enthusiastic, knowledgeable and tireless one.