Nobel prize winning Economist Paul Krugman made an ominous prediction recently saying AI like chat GPT won't change the world anytime soon the reason this is terrifying is that he's the same guy who also predicted in the 1990s that the internet was about as game changing as a fax machine when it comes to programming I've already seen enough the need to memorize syntax for programming is done the future is deterministic AI pseudocode and the future is now uh ladies and gentlemen if you will look right here today's video is yet another react. js tutorial just one of Millions on the internet but it's no ordinary tutorial it's the first tutorial to leverage the full power of AI to write code like a 10x developer even if you've never written a single line of code in your life what's crazy though is that this tutorial can be applied to any language or framework once you know some basic programming principles and how to prompt like a pro you can build almost anything in your imagination but it's not as simple as just asking chatgpt to build you a react app you will need some domain knowledge and understand how to execute and validate the code that the AI spits out let's go ahead and get started with your AI printing masterclass I'm assuming you know nothing about react other than it's a library for building uis I could sit here and teach you about react and ask you to buy my 500 react course but the truth is that gpt4 can teach you better than I can I hate to admit it but it's true if you want to learn something you know absolutely nothing about go ahead and prompt it to explain it like you're five in this case it'll explain how react. js components are like Lego bricks but for building websites which is the perfect metaphor from there I ask it for the most important Concepts that I should know it then explains components State and props and hooks if there's anything you don't understand here you can then prompt it to explain that one thing in more detail or explain that to you like your five one problem though is that llms tend to hallucinate AKA makes stuff up so as of today it's not really a replacement for the react.
js documentation which is excellent by the way however chat EBT has a browser plugin that's on a waitlist right now which will eventually solve that hallucination problem so the react. js docs are like the Bible and chatgpt is like a priest who makes all the money but sometimes invents his own ideas now once you have a general idea about the language or framework that you're trying to build with the next step is to set up a project that allows you to inject AI code in a safe and effective way there's an old programming proverb that says if code is not tested it doesn't work and that's especially true when working with an AI that acts like it's tripping bowls I'm freaking out man as someone who's done a lot of react development I'm just going to do it the old-fashioned way and set the project up the way I want it manually but doing things like this is very 2022. like yesterday on Twitter I saw this guy set up and build a project entirely from voice commands and then deploy it to versel which means it did in fact deploy dude it did it it nailed the background no way I'm using vs code for Microsoft as my editor it's not available today but GitHub copilot X is coming a plug-in for vs code that brings chat EPT directly into your editor make sure you're subscribed for the latest updates on that tool the only other tool you'll need is chat EPT ideally with gpt4 which is currently paid but 3.
5 will work as well here I have vs code open to my terminal with node. js installed in the future we'll have tools like GitHub copilot CLI that can find and explain commands for us but for now I'm just going to initialize a new react project with VJs we'll go ahead and use typescript because I have some typescript tricks to show you and then once inside that project we'll go ahead and install another tool called playwright for end-to-end testing in the browser When developing an app testing is technically not required but it's extremely important when working with AI because we need to validate that it does what it's supposed to the good news though is that AI can write its own test as we'll see shortly now the main component in the source directory is in the app. tsx file let's go ahead and prompt chatgpt to replace it with a more basic hello world gpt4 is kind of slow and can often be overly verbose so one thing you can do is just say code only to shorten the response that looks pretty good let's copy and paste it into our project now go to the terminal and run npm run Dev and you should get this hello world component but that's a little too simple let's go back to chat EPT and now have it modify this code with a button that will toggle the visibility of the hello world text when doing that it explains how we'll need to use react state to manage the visibility paste the updated code into your project save it and now you have a working interactive react app that's pretty cool but we want to make sure that the AI doesn't accidentally break this code in the future so let's ask it to write a test with playwright once again copy the code then go into the test directory and create a new file called app.
test.
