Want to learn how to use AI to be a better student? Yesterday, I built and deployed a React app with ZERO javascript knowledge. Here's my tumultuous story of building with AI:
I've heard lots about AI-native coding from Amjad so I headed to Anthropic to try Artifacts— I've always wanted to learn frontend eng and I was playing around with WiFi QR codes, so I decided to build a generator to deploy on Replit:
"Create a React app that generates a QR Code from a Wi-Fi username, password, and authentication type"
I didn't expect this to work in one-shot (it didn't), but I had high hopes for Artifacts.
So it seemed like things were broken because qrcode.react wasn't available on Claude.
To be fair, Claude also provided a list of things to make this app work, so I headed to Replit to see if I could patch together something that worked.
Here's where building with AI gets fun— if you don't understand basic concepts, you'll have a bad time. Things I didn't know:
1. How React related to JavaScript
2. How Next.js related to React
3. How shadcdn/ui related to TailwindCSS
4. How all of these tied together
SO I tried (and failed) to setup projects with a smattering of components, folders, and failed installations. I quickly realized all of my errors were coming from weird component issues.
The code from Claude was good, but it assumed I knew what I was doing (I didn't).
This is why so many hackers opt for Python. `python main (dot) py` or a notebook is much simpler. BUT the secret to building with AI is:
1. Understand frameworks
2. Know what you don't know
3. Make instructions simple
What did I learn?
1. JavaScript is a language, TypeScript is a stricter version
2. React is a LIBRARY for JavaScript
3. Next.js is a FRAMEWORK for React
4. TailwindCSS is a FRAMEWORK for CSS
5. shadcn/ui is a COLLECTION OF COMPONENTS built with React and TailwindCSS
Logically:
1. I don't need TypeScript
2. I don't need Next.js
3. I should use something that makes React apps easy (I found Vite).
Once I did that, I had something that ran!
It wasn't polished, but now that I understood things I could spin up a Repl and start iterating— enough to establish a development environment.
A few hours later I had a responsive, functional web app.
Was it perfect? No. Was it production-ready? No.
But with a few iterations it got better. More importantly, I was able to improve it as I LEARNED React concepts. Now, I could build the same app in 15 mins.
I see many claim they don't want to use AI—they'd like to learn the fundamentals. But you CAN learn the fundamentals with AI. Learning and problem solving are pattern mapping exercises.
Those patterns are just more accessible the same way Stack Overflow was more accessible than text.
A bonus is that you get more done. In the time it took me to build this app, I'd still be working through a intro chapter in a "What is JavaScript" course
(Continued in comments)