DEV Community

Shiho Kazama | mia
Shiho Kazama | mia

Posted on

5 2

Why did I fail to study React once? Things to keep in mind before a coding beginner learns to React.

Hello. I'm a college student majoring in web development.
My academic classes are almost over. Now, I'm preparing to job hunting to become a front-end developer such as resume, portfolio, LinkedIn so on and so forth.
If you are interested in my portfolio, here is the link. https://shihokazama-portfolio-miacan2021.vercel.app/

Today, I'll share my experience of how I learned React. Hopefully, It will be helpful to someone who is a beginner at coding and struggling to understand React.

Where did I start from learning?

I entered my college in Apr 2021.
I've already understood HTML and CSS and basic Javascript until June.
As for "basic Javascript", I could handle DOM; apply a new class name by event listener and then fire animation etc.
I put the link to the Landing page I created in June. It's also mobile-friendly. I made it for one week or so.
https://eager-knuth-847dfa.netlify.app/

I started studying React in June but It didn't work. I couldn't understand React at all, even after watching several tutorials and googling "React for beginners" lots of times.
How come? I analyzed the reasons.

I've been neglecting my Javascript studies.

Some web developers said you don't need to study Javascript a lot, we don't use Javascript. We use React. So, you have to study React, not Javascript.
That's true! Most of the companies don't use only Vanilla JS, they mainly use React, Vue, Angular etc.
However, I think web developers shouldn't say that to beginners like me! Now I see there is a big difference between developers and beginners about the level "Don't need to study Javascript so much".
When I thought I've already had enough knowledge of Javascript, it was time to start learning React!, but I was at the level just understood about DOM manipulations.
I didn't have knowledge of how to handle arrays and objects, what is class, and when I needs to write asynchronous functions.
Believe it or not, I didn't know the difference between "map" and "forEach".
I highly recommend that you take longer than you think is enough to understand Javascript before starting to study React for beginners.
React is a JavaScript library.
Don't neglect to study Javascript, or you'll get stuck in your React studies.

Finally, I could create an EC website from scratch in vanilla Javascript.

I wrote the whole code (add cart, delete cart, shop items are in class etc...) in Javascript. I didn't copy others' code at all, I thought myself how I operate it in Javascript. I was sure I have a solid knowledge of vanilla JS at last!
Here is the link - https://gracious-khorana-5ef5d7.netlify.app/

Restart learning React

I restarted my React learning in September. I could understand it easily!!!

I created my first React project in September it was a chatbot.
https://vigorous-hoover-828c01.netlify.app/

And I made a weather app using API in September.
https://happy-hawking-f6969d.netlify.app/

I wrote an article about React Hooks in December.
https://dev.to/miacan2021/my-memorandum-react-hooks-usecontext-usereducer-usememo-usecallback-useref-3i4k

And then, I created React Redux project in December.
https://focustube.vercel.app/

I'm sure I'm growing as a front-end developer very fast.
Now, I'm searching for a job!

Through this process, I think I have escaped from being a complete programming beginner. I learned that understanding a programming language takes a certain amount of time and that it is important to build up a solid knowledge base.
Thank you.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post →

Top comments (2)

Collapse
 
anni profile image
Anietie Brownson

I love your article and it seems we have a lot in common (or had in your case)
I 'm at the stage where I have to go back to JS to relearn some of those basics again and I'm working on an e-commerce store too
Any tips on the steps you took to complete the project?

Collapse
 
jialudev profile image
Jared

thank you for sharing. are you chinese?

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️