2024-02-04T05:08:49.256Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
97c834a6-b9a8-4b56-8c0a-7c6e89267826
d4deaa775d25595133a1ded31854760f9dd2e60db1d64d65b865defecedf0412
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Nobel Prize winning economist Paul Krugman made an ominous prediction recently, saying AI like ChatGPT won't change the world anytime soon.
The reason this is terrifying is that he's the same guy who also predicted in the 19 nineties 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 I mean, is done.
The future is deterministic AI pseudo code, and the future is now.
Uh, ladies and gentlemen, if you will, look right here.
Is today's video is yet another React JS tutorial, just one of 1,000,000 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 pruning 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 GPT 4 can teach you better than I can.
I hate to admit it, but it's true.
If you wanna learn something you know absolutely nothing about, go ahead and prompt it to explain it like you're 5.
In this case, it'll explain how React JS opponents 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 you're 5.
One problem though is that LLMs tend to hallucinate, AKA make stuff up.
So as of today, it's not really placement for the React.
Js documentation, which is excellent by the way.
However, ChatGPT has a browser plugin that's on a waitlist right now, which will eventually solve that hallucination problem.
So 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 which 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 it 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 balls.
I'm freaking out is, 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 Vercel.
Okay.
Deploying to Vercel.
Which means it did in fact deploy.
Dude, it did it.
It nailed the background.
No way.
I'm using Versus Code from Microsoft as my editor.
It's not available today, but GitHub Copilot X is coming, a plugin for Versus Code that brings ChatGPT directly into your editor.
Make sure you're subscribed for the latest updates on that tool.
The only other tool you'll need is ChatGPT, ideally with GPT 4, which is currently paid, but 3.5 will work is, well, here I have Versus 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 Vite JS.
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 dot tsx file.
Let's go ahead and prompt chatgpt to replace it with a more basic hello world.
GPT 4 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 gpt 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 in your project, save it, and now you have a working interactive React app.
That's pretty cool, but we wanna 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.ts.
Here's a pro tip as a proofing Engineer, you can use control v on your keyboard instead of doing right click paste to maximize your speed.
Now from there, we need to go into the package JSON file and set up a testing script.
If you already have Copilot installed, you can just type test and it should automatically detect Playwright and create the script for you, which is just Playwright test.
From there, we can open the terminal, run npm run test and Playwright will test this code on multiple browsers in parallel.
As you can see, it fails because we don't have the right local host port set up, so let's go ahead and modify that in our testing code and run it again.
This time it passes.
In the future, GitHub Copilot will know the full context of your project and won't makes silly mistakes like these.
This is cool and all, but what you'll find as your app grows more and more complex, it becomes harder and harder to prompt the AI effectively.
It's non deterministic, which means you can get results from the same prompt.
You never know what you're gonna get.
And that's complete madness for a programmer.
But now here's where things get really mind blowing, and we'll give you a limps into the future of programming.
At this point, you have the general idea of how React works, but you may not know JavaScript very well, or have it memorized all the little quirks in the framework.
Or if you're a React expert, and just don't want to go through the tedious process of writing perfectly structured code.
So what we can do next is have ChatGPT come up with a pseudocode language for React.
What this will do is allow us to agree on some general guidelines to represent the structure of a React component.
As you can see here, it looks kind of like and allows us to define state and then the rendering function or JSX.
And if we don't like the way it looks, we can tell it to come up with a different idea, like, maybe make it look more like Python.
Actually, no.
Let's make it look like a cooking recipe, which is surprisingly a very intuitive way to represent a React component.
And as an added benefit, you could write this in any human language and have it translate your pseudo code back to English.
But from a practical standpoint, I think you want something that kind of looks like YAML.
Overall, it's way more concise and doesn't require us to use precise syntax, but at the same time, it will give us relatively consistent results.
And we can make it even better by including relevant documentation or a style guide to force it to write code in a style that fits our project, because GPT 4 your can now handle up to 25,000 tokens.
The end result is your own custom AI pseudo code language.
As you can see here, I wrote out a relatively complex component in this language, and it's perfect React code as a result.
But most importantly, it generates the same code every time, most of the time, maybe 80% of the time.
This is pretty mind blowing because now any developer can have their own custom tailored pseudo code language that can transpile into complex code in virtually any language without understanding the underlying syntax.
In a previous video, I it did that someday there will be a universal AI language, but maybe I was wrong.
Maybe every developer gets to build their own AI language custom tailored to optimize their own productivity.
Sounds like chaos on a team, but AI can also translate your pseudo code into my pseudo code and my pseudo code into your pseudo code.
In fact, one thing we could do right now is take generated React code and converted into a superior framework like Svelte or Solid.
There's a 1,000,000 different JavaScript frameworks out there, but now we can use them without learning them.
In fact, we could use our pseudo code to build the same app and multiple frameworks at the same time, then benchmark their and just choose whichever one performs the best.
That's more of a futuristic idea, but currently, the main value of pseudo code is just getting things done faster without allowing the AI to become too magical.
Like in this example, you can see we're making an API call, but currently, we don't have any kind of interface for the response.
Generally speaking, GPT 4 will provide better when you have statically typed code like TypeScript or even just type hints in a language like Python.
In this case, I have a JSON object, and what I'll do is paste into ChatGPT to turn it into a TypeScript interface.
It's able to detect the 2 different entities of TV shows and actors, and now we can use it in our code.
Now that ChatGPT has this interface, we can also tell it to generate any kind of helper functions we'll need, like if we wanted to map this object to all of the actor names.
That's a pretty handy trick right now, but once again, in the future, it won't be necessary.
Tools like Copilot will be able to introspect any API to provide you with automatic end to end type safety without any effort on your part.
Now the final thing we need to do as a prompt engineer is document our code.
We simply take the code we've already generated and tell ChatGPT 82 document it.
Congratulations.
You're now a 10 x React prompt engineer.
The starting salary is about 335 k.
This productivity boost it's both exciting and scary.
Goldman Sachs just released a report saying that 300,000,000 jobs could be affected by AI in the near future, but there's no reason to be afraid.
Software systems in real life are complex beyond belief, and not even state of the art AI will want to touch that code.
I do believe that AI will make writing code significantly easier, but building complex software that powers the world will still be done by humans in the foreseeable future, and my goal with this channel is to teach you how to do exactly that.
Thanks for watching, and I will see you in the next one.

Speaker 0: Nobel Prize winning economist Paul Krugman made an ominous prediction recently, saying AI like ChatGPT won't change the world anytime soon. The reason this is terrifying is that he's the same guy who also predicted in the 19 nineties 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 I mean, is done. The future is deterministic AI pseudo code, and the future is now.

Uh, ladies and gentlemen, if you will, look right here. Is today's video is yet another React JS tutorial, just one of 1,000,000 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 pruning 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 GPT 4 can teach you better than I can.

I hate to admit it, but it's true. If you wanna learn something you know absolutely nothing about, go ahead and prompt it to explain it like you're 5. In this case, it'll explain how React JS opponents 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 you're 5. One problem though is that LLMs tend to hallucinate, AKA make stuff up. So as of today, it's not really placement for the React. Js documentation, which is excellent by the way. However, ChatGPT has a browser plugin that's on a waitlist right now, which will eventually solve that hallucination problem.

So 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 which 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 it 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 balls. I'm freaking out is, 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 Vercel. Okay. Deploying to Vercel. Which means it did in fact deploy.

Dude, it did it. It nailed the background. No way. I'm using Versus Code from Microsoft as my editor. It's not available today, but GitHub Copilot X is coming, a plugin for Versus Code that brings ChatGPT directly into your editor.

Make sure you're subscribed for the latest updates on that tool. The only other tool you'll need is ChatGPT, ideally with GPT 4, which is currently paid, but 3.5 will work is, well, here I have Versus 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 Vite JS. 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 dot tsx file. Let's go ahead and prompt chatgpt to replace it with a more basic hello world. GPT 4 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 gpt 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 in your project, save it, and now you have a working interactive React app. That's pretty cool, but we wanna 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.ts. Here's a pro tip as a proofing Engineer, you can use control v on your keyboard instead of doing right click paste to maximize your speed. Now from there, we need to go into the package JSON file and set up a testing script.

If you already have Copilot installed, you can just type test and it should automatically detect Playwright and create the script for you, which is just Playwright test. From there, we can open the terminal, run npm run test and Playwright will test this code on multiple browsers in parallel. As you can see, it fails because we don't have the right local host port set up, so let's go ahead and modify that in our testing code and run it again. This time it passes. In the future, GitHub Copilot will know the full context of your project and won't makes silly mistakes like these.

This is cool and all, but what you'll find as your app grows more and more complex, it becomes harder and harder to prompt the AI effectively. It's non deterministic, which means you can get results from the same prompt. You never know what you're gonna get. And that's complete madness for a programmer. But now here's where things get really mind blowing, and we'll give you a limps into the future of programming.

At this point, you have the general idea of how React works, but you may not know JavaScript very well, or have it memorized all the little quirks in the framework. Or if you're a React expert, and just don't want to go through the tedious process of writing perfectly structured code. So what we can do next is have ChatGPT come up with a pseudocode language for React. What this will do is allow us to agree on some general guidelines to represent the structure of a React component. As you can see here, it looks kind of like and allows us to define state and then the rendering function or JSX.

And if we don't like the way it looks, we can tell it to come up with a different idea, like, maybe make it look more like Python. Actually, no. Let's make it look like a cooking recipe, which is surprisingly a very intuitive way to represent a React component. And as an added benefit, you could write this in any human language and have it translate your pseudo code back to English. But from a practical standpoint, I think you want something that kind of looks like YAML.

Overall, it's way more concise and doesn't require us to use precise syntax, but at the same time, it will give us relatively consistent results. And we can make it even better by including relevant documentation or a style guide to force it to write code in a style that fits our project, because GPT 4 your can now handle up to 25,000 tokens. The end result is your own custom AI pseudo code language. As you can see here, I wrote out a relatively complex component in this language, and it's perfect React code as a result. But most importantly, it generates the same code every time, most of the time, maybe 80% of the time.

This is pretty mind blowing because now any developer can have their own custom tailored pseudo code language that can transpile into complex code in virtually any language without understanding the underlying syntax. In a previous video, I it did that someday there will be a universal AI language, but maybe I was wrong. Maybe every developer gets to build their own AI language custom tailored to optimize their own productivity. Sounds like chaos on a team, but AI can also translate your pseudo code into my pseudo code and my pseudo code into your pseudo code. In fact, one thing we could do right now is take generated React code and converted into a superior framework like Svelte or Solid.

There's a 1,000,000 different JavaScript frameworks out there, but now we can use them without learning them. In fact, we could use our pseudo code to build the same app and multiple frameworks at the same time, then benchmark their and just choose whichever one performs the best. That's more of a futuristic idea, but currently, the main value of pseudo code is just getting things done faster without allowing the AI to become too magical. Like in this example, you can see we're making an API call, but currently, we don't have any kind of interface for the response. Generally speaking, GPT 4 will provide better when you have statically typed code like TypeScript or even just type hints in a language like Python.

In this case, I have a JSON object, and what I'll do is paste into ChatGPT to turn it into a TypeScript interface. It's able to detect the 2 different entities of TV shows and actors, and now we can use it in our code. Now that ChatGPT has this interface, we can also tell it to generate any kind of helper functions we'll need, like if we wanted to map this object to all of the actor names. That's a pretty handy trick right now, but once again, in the future, it won't be necessary. Tools like Copilot will be able to introspect any API to provide you with automatic end to end type safety without any effort on your part.

Now the final thing we need to do as a prompt engineer is document our code. We simply take the code we've already generated and tell ChatGPT 82 document it. Congratulations. You're now a 10 x React prompt engineer. The starting salary is about 335 k.

This productivity boost it's both exciting and scary. Goldman Sachs just released a report saying that 300,000,000 jobs could be affected by AI in the near future, but there's no reason to be afraid. Software systems in real life are complex beyond belief, and not even state of the art AI will want to touch that code. I do believe that AI will make writing code significantly easier, but building complex software that powers the world will still be done by humans in the foreseeable future, and my goal with this channel is to teach you how to do exactly that. Thanks for watching, and I will see you in the next one.
Nobel Prize winning economist Paul Krugman made an ominous prediction recently, saying AI like ChatGPT won't change the world anytime soon. The reason this is terrifying is that he's the same guy who also predicted in the 19 nineties 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 I mean, is done. The future is deterministic AI pseudo code, and the future is now. Uh, ladies and gentlemen, if you will, look right here. Is today's video is yet another React JS tutorial, just one of 1,000,000 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 pruning 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 GPT 4 can teach you better than I can. I hate to admit it, but it's true. If you wanna learn something you know absolutely nothing about, go ahead and prompt it to explain it like you're 5.
software development
teaching
programming
artificial intelligence
software
machine learning
education
In this case, it'll explain how React JS opponents 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 you're 5.
toys
One problem though is that LLMs tend to hallucinate, AKA make stuff up. So as of today, it's not really placement for the React. Js documentation, which is excellent by the way.
However, ChatGPT has a browser plugin that's on a waitlist right now, which will eventually solve that hallucination problem. So 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 which 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 it 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 balls. I'm freaking out is, 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 Vercel.
artificial intelligence
software
software development
robotics
programming
machine learning
Okay. Deploying to Vercel. Which means it did in fact deploy. Dude, it did it. It nailed the background. No way. I'm using Versus Code from Microsoft as my editor. It's not available today, but GitHub Copilot X is coming, a plugin for Versus Code that brings ChatGPT directly into your editor. Make sure you're subscribed for the latest updates on that tool. The only other tool you'll need is ChatGPT, ideally with GPT 4, which is currently paid, but 3.5 will work is, well, here I have Versus 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 Vite JS. 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.
software development
software
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 dot tsx file. Let's go ahead and prompt chatgpt to replace it with a more basic hello world. GPT 4 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 gpt and now have it modify this code with a button that will toggle the visibility of the hello world text.
software
software development
When doing that, it explains how we'll need to use React state to manage the visibility. Paste the updated code in your project, save it, and now you have a working interactive React app. That's pretty cool, but we wanna 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.ts. Here's a pro tip as a proofing Engineer, you can use control v on your keyboard instead of doing right click paste to maximize your speed.
animation
machine learning
acting
artificial intelligence
Now from there, we need to go into the package JSON file and set up a testing script. If you already have Copilot installed, you can just type test and it should automatically detect Playwright and create the script for you, which is just Playwright test. From there, we can open the terminal, run npm run test and Playwright will test this code on multiple browsers in parallel. As you can see, it fails because we don't have the right local host port set up, so let's go ahead and modify that in our testing code and run it again.
This time it passes. In the future, GitHub Copilot will know the full context of your project and won't makes silly mistakes like these. This is cool and all, but what you'll find as your app grows more and more complex, it becomes harder and harder to prompt the AI effectively. It's non deterministic, which means you can get results from the same prompt. You never know what you're gonna get. And that's complete madness for a programmer. But now here's where things get really mind blowing, and we'll give you a limps into the future of programming. At this point, you have the general idea of how React works, but you may not know JavaScript very well, or have it memorized all the little quirks in the framework.
programming
artificial intelligence
Or if you're a React expert, and just don't want to go through the tedious process of writing perfectly structured code. So what we can do next is have ChatGPT come up with a pseudocode language for React.
What this will do is allow us to agree on some general guidelines to represent the structure of a React component. As you can see here, it looks kind of like and allows us to define state and then the rendering function or JSX. And if we don't like the way it looks, we can tell it to come up with a different idea, like, maybe make it look more like Python.
graphic design
Actually, no. Let's make it look like a cooking recipe, which is surprisingly a very intuitive way to represent a React component. And as an added benefit, you could write this in any human language and have it translate your pseudo code back to English. But from a practical standpoint, I think you want something that kind of looks like YAML. Overall, it's way more concise and doesn't require us to use precise syntax, but at the same time, it will give us relatively consistent results. And we can make it even better by including relevant documentation or a style guide to force it to write code in a style that fits our project, because GPT 4 your can now handle up to 25,000 tokens. The end result is your own custom AI pseudo code language. As you can see here, I wrote out a relatively complex component in this language, and it's perfect React code as a result. But most importantly, it generates the same code every time, most of the time, maybe 80% of the time. This is pretty mind blowing because now any developer can have their own custom tailored pseudo code language that can transpile into complex code in virtually any language without understanding the underlying syntax. In a previous video, I it did that someday there will be a universal AI language, but maybe I was wrong. Maybe every developer gets to build their own AI language custom tailored to optimize their own productivity. Sounds like chaos on a team, but AI can also translate your pseudo code into my pseudo code and my pseudo code into your pseudo code.
artificial intelligence
cooking
software development
software
programming
In fact, one thing we could do right now is take generated React code and converted into a superior framework like Svelte or Solid. There's a 1,000,000 different JavaScript frameworks out there, but now we can use them without learning them.
In fact, we could use our pseudo code to build the same app and multiple frameworks at the same time, then benchmark their and just choose whichever one performs the best. That's more of a futuristic idea, but currently, the main value of pseudo code is just getting things done faster without allowing the AI to become too magical. Like in this example, you can see we're making an API call, but currently, we don't have any kind of interface for the response. Generally speaking, GPT 4 will provide better when you have statically typed code like TypeScript or even just type hints in a language like Python. In this case, I have a JSON object, and what I'll do is paste into ChatGPT to turn it into a TypeScript interface.
programming
artificial intelligence
logic
software development
It's able to detect the 2 different entities of TV shows and actors, and now we can use it in our code. Now that ChatGPT has this interface, we can also tell it to generate any kind of helper functions we'll need, like if we wanted to map this object to all of the actor names.
That's a pretty handy trick right now, but once again, in the future, it won't be necessary. Tools like Copilot will be able to introspect any API to provide you with automatic end to end type safety without any effort on your part. Now the final thing we need to do as a prompt engineer is document our code. We simply take the code we've already generated and tell ChatGPT 82 document it. Congratulations. You're now a 10 x React prompt engineer. The starting salary is about 335 k. This productivity boost it's both exciting and scary. Goldman Sachs just released a report saying that 300,000,000 jobs could be affected by AI in the near future, but there's no reason to be afraid. Software systems in real life are complex beyond belief, and not even state of the art AI will want to touch that code. I do believe that AI will make writing code significantly easier, but building complex software that powers the world will still be done by humans in the foreseeable future, and my goal with this channel is to teach you how to do exactly that.
software development
artificial intelligence
software
robotics
programming
computer science
earnings
Thanks for watching, and I will see you in the next one.
Nobel Prize winning economist Paul Krugman made an ominous prediction recently, saying AI like ChatGPT won't change the world anytime soon. The reason this is terrifying is that he's the same guy who also predicted in the 19 nineties 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 I mean, is done. The future is deterministic AI pseudo code, and the future is now. Uh, ladies and gentlemen, if you will, look right here. Is today's video is yet another React JS tutorial, just one of 1,000,000 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 pruning 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 GPT 4 can teach you better than I can. I hate to admit it, but it's true. If you wanna learn something you know absolutely nothing about, go ahead and prompt it to explain it like you're 5. In this case, it'll explain how React JS opponents 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 you're 5. One problem though is that LLMs tend to hallucinate, AKA make stuff up. So as of today, it's not really placement for the React. Js documentation, which is excellent by the way. However, ChatGPT has a browser plugin that's on a waitlist right now, which will eventually solve that hallucination problem. So 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 which 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 it 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 balls. I'm freaking out is, 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 Vercel. Okay. Deploying to Vercel. Which means it did in fact deploy. Dude, it did it. It nailed the background. No way. I'm using Versus Code from Microsoft as my editor. It's not available today, but GitHub Copilot X is coming, a plugin for Versus Code that brings ChatGPT directly into your editor. Make sure you're subscribed for the latest updates on that tool. The only other tool you'll need is ChatGPT, ideally with GPT 4, which is currently paid, but 3.5 will work is, well, here I have Versus 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 Vite JS. 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 dot tsx file. Let's go ahead and prompt chatgpt to replace it with a more basic hello world. GPT 4 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 gpt 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 in your project, save it, and now you have a working interactive React app. That's pretty cool, but we wanna 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.ts. Here's a pro tip as a proofing Engineer, you can use control v on your keyboard instead of doing right click paste to maximize your speed. Now from there, we need to go into the package JSON file and set up a testing script. If you already have Copilot installed, you can just type test and it should automatically detect Playwright and create the script for you, which is just Playwright test. From there, we can open the terminal, run npm run test and Playwright will test this code on multiple browsers in parallel. As you can see, it fails because we don't have the right local host port set up, so let's go ahead and modify that in our testing code and run it again. This time it passes. In the future, GitHub Copilot will know the full context of your project and won't makes silly mistakes like these. This is cool and all, but what you'll find as your app grows more and more complex, it becomes harder and harder to prompt the AI effectively. It's non deterministic, which means you can get results from the same prompt. You never know what you're gonna get. And that's complete madness for a programmer. But now here's where things get really mind blowing, and we'll give you a limps into the future of programming. At this point, you have the general idea of how React works, but you may not know JavaScript very well, or have it memorized all the little quirks in the framework. Or if you're a React expert, and just don't want to go through the tedious process of writing perfectly structured code. So what we can do next is have ChatGPT come up with a pseudocode language for React. What this will do is allow us to agree on some general guidelines to represent the structure of a React component. As you can see here, it looks kind of like and allows us to define state and then the rendering function or JSX. And if we don't like the way it looks, we can tell it to come up with a different idea, like, maybe make it look more like Python. Actually, no. Let's make it look like a cooking recipe, which is surprisingly a very intuitive way to represent a React component. And as an added benefit, you could write this in any human language and have it translate your pseudo code back to English. But from a practical standpoint, I think you want something that kind of looks like YAML. Overall, it's way more concise and doesn't require us to use precise syntax, but at the same time, it will give us relatively consistent results. And we can make it even better by including relevant documentation or a style guide to force it to write code in a style that fits our project, because GPT 4 your can now handle up to 25,000 tokens. The end result is your own custom AI pseudo code language. As you can see here, I wrote out a relatively complex component in this language, and it's perfect React code as a result. But most importantly, it generates the same code every time, most of the time, maybe 80% of the time. This is pretty mind blowing because now any developer can have their own custom tailored pseudo code language that can transpile into complex code in virtually any language without understanding the underlying syntax. In a previous video, I it did that someday there will be a universal AI language, but maybe I was wrong. Maybe every developer gets to build their own AI language custom tailored to optimize their own productivity. Sounds like chaos on a team, but AI can also translate your pseudo code into my pseudo code and my pseudo code into your pseudo code. In fact, one thing we could do right now is take generated React code and converted into a superior framework like Svelte or Solid. There's a 1,000,000 different JavaScript frameworks out there, but now we can use them without learning them. In fact, we could use our pseudo code to build the same app and multiple frameworks at the same time, then benchmark their and just choose whichever one performs the best. That's more of a futuristic idea, but currently, the main value of pseudo code is just getting things done faster without allowing the AI to become too magical. Like in this example, you can see we're making an API call, but currently, we don't have any kind of interface for the response. Generally speaking, GPT 4 will provide better when you have statically typed code like TypeScript or even just type hints in a language like Python. In this case, I have a JSON object, and what I'll do is paste into ChatGPT to turn it into a TypeScript interface. It's able to detect the 2 different entities of TV shows and actors, and now we can use it in our code. Now that ChatGPT has this interface, we can also tell it to generate any kind of helper functions we'll need, like if we wanted to map this object to all of the actor names. That's a pretty handy trick right now, but once again, in the future, it won't be necessary. Tools like Copilot will be able to introspect any API to provide you with automatic end to end type safety without any effort on your part. Now the final thing we need to do as a prompt engineer is document our code. We simply take the code we've already generated and tell ChatGPT 82 document it. Congratulations. You're now a 10 x React prompt engineer. The starting salary is about 335 k. This productivity boost it's both exciting and scary. Goldman Sachs just released a report saying that 300,000,000 jobs could be affected by AI in the near future, but there's no reason to be afraid. Software systems in real life are complex beyond belief, and not even state of the art AI will want to touch that code. I do believe that AI will make writing code significantly easier, but building complex software that powers the world will still be done by humans in the foreseeable future, and my goal with this channel is to teach you how to do exactly that. Thanks for watching, and I will see you in the next one.
Nobel
nobel
Prize
prize
winning
winning
economist
economist
Paul
paul
Krugman
krugman
made
made
an
an
ominous
ominous
prediction
prediction
recently,
recently
saying
saying
AI
ai
like
like
ChatGPT
chatgpt
won't
won't
change
change
the
the
world
world
anytime
anytime
soon.
soon
The
the
reason
reason
this
this
is
is
terrifying
terrifying
is
is
that
that
he's
he's
the
the
same
same
guy
guy
who
who
also
also
predicted
predicted
in
in
the
the
19
19
nineties
nineties
that
that
the
the
Internet
internet
was
was
about
about
as
as
game
game
changing
changing
as
as
a
a
fax
fax
machine.
machine
When
when
it
it
comes
comes
to
to
programming,
programming
I've
i've
already
already
seen
seen
enough.
enough
The
the
need
need
to
to
memorize
memorize
syntax
syntax
for
for
programming
programming
I
i
mean,
mean
is
is
done.
done
The
the
future
future
is
is
deterministic
deterministic
AI
ai
pseudo
pseudo
code,
code
and
and
the
the
future
future
is
is
now.
now
Uh,
uh
ladies
ladies
and
and
gentlemen,
gentlemen
if
if
you
you
will,
will
look
look
right
right
here.
here
Is
is
today's
today's
video
video
is
is
yet
yet
another
another
React
react
JS
js
tutorial,
tutorial
just
just
one
one
of
of
1,000,000
1,000,000
on
on
the
the
Internet,
internet
but
but
it's
it's
no
no
ordinary
ordinary
tutorial.
tutorial
It's
it's
the
the
first
first
tutorial
tutorial
to
to
leverage
leverage
the
the
full
full
power
power
of
of
AI
ai
to
to
write
write
code
code
like
like
a
a
10x
10x
developer,
developer
even
even
if
if
you've
you've
never
never
written
written
a
a
single
single
line
line
of
of
code
code
in
in
your
your
life.
life
What's
what's
crazy,
crazy
though,
though
is
is
that
that
this
this
tutorial
tutorial
can
can
be
be
applied
applied
to
to
any
any
language
language
or
or
framework.
framework
Once
once
you
you
know
know
some
some
basic
basic
programming
programming
principles
principles
and
and
how
how
to
to
prompt
prompt
like
like
a
a
pro.
pro
You
you
can
can
build
build
almost
almost
anything
anything
in
in
your
your
imagination,
imagination
but
but
it's
it's
not
not
as
as
simple
simple
as
as
just
just
asking
asking
ChatGPT
chatgpt
to
to
build
build
you
you
a
a
React
react
app.
app
You
you
will
will
need
need
some
some
domain
domain
knowledge
knowledge
and
and
understand
understand
how
how
to
to
execute
execute
and
and
validate
validate
the
the
code
code
that
that
the
the
AI
ai
spits
spits
out.
out
Let's
let's
go
go
ahead
ahead
and
and
get
get
started
started
with
with
your
your
AI
ai
pruning
pruning
masterclass.
masterclass
I'm
i'm
assuming
assuming
you
you
know
know
nothing
nothing
about
about
React
react
other
other
than
than
it's
it's
a
a
library
library
for
for
building
building
UIs.
uis
I
i
could
could
sit
sit
here
here
and
and
teach
teach
you
you
about
about
React
react
and
and
ask
ask
you
you
to
to
buy
buy
my
my
$500
$500
React
react
course,
course
but
but
the
the
truth
truth
is
is
that
that
GPT
gpt
4
4
can
can
teach
teach
you
you
better
better
than
than
I
i
can.
can
I
i
hate
hate
to
to
admit
admit
it,
it
but
but
it's
it's
true.
true
If
if
you
you
wanna
wanna
learn
learn
something
something
you
you
know
know
absolutely
absolutely
nothing
nothing
about,
about
go
go
ahead
ahead
and
and
prompt
prompt
it
it
to
to
explain
explain
it
it
like
like
you're
you're
5.
5
In
in
this
this
case,
case
it'll
it'll
explain
explain
how
how
React
react
JS
js
opponents
opponents
are
are
like
like
Lego
lego
bricks,
bricks
but
but
for
for
building
building
websites,
websites
which
which
is
is
the
the
perfect
perfect
metaphor.
metaphor
From
from
there,
there
I
i
ask
ask
it
it
for
for
the
the
most
most
important
important
concepts
concepts
that
that
I
i
should
should
know.
know
It
it
then
then
explains
explains
components,
components
state
state
and
and
props,
props
and
and
hooks.
hooks
If
if
there's
there's
anything
anything
you
you
don't
don't
understand
understand
here,
here
you
you
can
can
then
then
prompt
prompt
it
it
to
to
explain
explain
that
that
one
one
thing
thing
in
in
more
more
detail,
detail
or
or
explain
explain
that
that
to
to
you
you
like
like
you're
you're
5.
5
One
one
problem
problem
though
though
is
is
that
that
LLMs
llms
tend
tend
to
to
hallucinate,
hallucinate
AKA
aka
make
make
stuff
stuff
up.
up
So
so
as
as
of
of
today,
today
it's
it's
not
not
really
really
placement
placement
for
for
the
the
React.
react
Js
js
documentation,
documentation
which
which
is
is
excellent
excellent
by
by
the
the
way.
way
However,
however
ChatGPT
chatgpt
has
has
a
a
browser
browser
plugin
plugin
that's
that's
on
on
a
a
waitlist
waitlist
right
right
now,
now
which
which
will
will
eventually
eventually
solve
solve
that
that
hallucination
hallucination
problem.
problem
So
so
React.
react
Js
js
docs
docs
are
are
like
like
the
the
Bible,
bible
and
and
ChatGPT
chatgpt
is
is
like
like
a
a
priest
priest
who
who
makes
makes
all
all
the
the
money,
money
but
but
sometimes
sometimes
invents
invents
his
his
own
own
ideas.
ideas
Now
now
once
once
you
you
have
have
a
a
general
general
idea
idea
about
about
the
the
which
which
or
or
framework
framework
that
that
you're
you're
trying
trying
to
to
build
build
with,
with
the
the
next
next
step
step
is
is
to
to
set
set
up
up
a
a
project
project
that
that
allows
allows
you
you
to
to
inject
inject
AI
ai
code
code
in
in
a
a
safe
safe
and
and
effective
effective
way.
way
There's
there's
an
an
old
old
programming
programming
proverb
proverb
it
it
says
says
if
if
code
code
is
is
not
not
tested,
tested
it
it
doesn't
doesn't
work,
work
and
and
that's
that's
especially
especially
true
true
when
when
working
working
with
with
an
an
AI
ai
that
that
acts
acts
like
like
it's
it's
tripping
tripping
balls.
balls
I'm
i'm
freaking
freaking
out
out
is,
is
as
as
someone
someone
who's
who's
done
done
a
a
lot
lot
of
of
React
react
development,
development
I'm
i'm
just
just
going
going
to
to
do
do
it
it
the
the
old
old
fashioned
fashioned
way
way
and
and
set
set
the
the
project
project
up
up
the
the
way
way
I
i
want
want
it
it
manually.
manually
But
but
doing
doing
things
things
like
like
this
this
is
is
very
very
2022.
2022
Like,
like
yesterday
yesterday
on
on
Twitter,
twitter
I
i
saw
saw
this
this
guy
guy
set
set
up
up
and
and
build
build
a
a
project
project
entirely
entirely
from
from
voice
voice
commands
commands
and
and
then
then
deploy
deploy
it
it
to
to
Vercel.
vercel
Okay.
okay
Deploying
deploying
to
to
Vercel.
vercel
Which
which
means
means
it
it
did
did
in
in
fact
fact
deploy.
deploy
Dude,
dude
it
it
did
did
it.
it
It
it
nailed
nailed
the
the
background.
background
No
no
way.
way
I'm
i'm
using
using
Versus
versus
Code
code
from
from
Microsoft
microsoft
as
as
my
my
editor.
editor
It's
it's
not
not
available
available
today,
today
but
but
GitHub
github
Copilot
copilot
X
x
is
is
coming,
coming
a
a
plugin
plugin
for
for
Versus
versus
Code
code
that
that
brings
brings
ChatGPT
chatgpt
directly
directly
into
into
your
your
editor.
editor
Make
make
sure
sure
you're
you're
subscribed
subscribed
for
for
the
the
latest
latest
updates
updates
on
on
that
that
tool.
tool
The
the
only
only
other
other
tool
tool
you'll
you'll
need
need
is
is
ChatGPT,
chatgpt
ideally
ideally
with
with
GPT
gpt
4,
4
which
which
is
is
currently
currently
paid,
paid
but
but
3.5
3.5
will
will
work
work
is,
is
well,
well
here
here
I
i
have
have
Versus
versus
Code
code
open
open
to
to
my
my
terminal
terminal
with
with
Node.
node
Js
js
installed.
installed
In
in
the
the
future,
future
we'll
we'll
have
have
tools
tools
like
like
GitHub
github
Copilot
copilot
CLI
cli
that
that
can
can
find
find
and
and
explain
explain
commands
commands
for
for
us,
us
but
but
for
for
now,
now
I'm
i'm
just
just
going
going
to
to
initialize
initialize
a
a
new
new
React
react
project
project
with
with
Vite
vite
JS.
js
We'll
we'll
go
go
ahead
ahead
and
and
use
use
TypeScript
typescript
because
because
I
i
have
have
some
some
TypeScript
typescript
tricks
tricks
to
to
show
show
you,
you
and
and
then
then
once
once
inside
inside
that
that
project,
project
we'll
we'll
go
go
ahead
ahead
and
and
install
install
another
another
tool
tool
called
called
Playwright
playwright
for
for
end
end
to
to
end
end
testing
testing
in
in
the
the
browser.
browser
When
when
developing
developing
an
an
app,
app
testing
testing
is
is
technically
technically
not
not
required,
required
but
but
it's
it's
extremely
extremely
important
important
when
when
working
working
with
with
AI
ai
because
because
we
we
need
need
to
to
validate
validate
that
that
it
it
does
does
what
what
it's
it's
supposed
supposed
to.
to
The
the
good
good
news
news
though
though
is
is
that
that
AI
ai
can
can
write
write
its
its
own
own
test
test
as
as
we'll
we'll
see
see
shortly.
shortly
Now
now
the
the
main
main
component
component
in
in
the
the
source
source
directory
directory
is
is
in
in
the
the
app
app
dot
dot
tsx
tsx
file.
file
Let's
let's
go
go
ahead
ahead
and
and
prompt
prompt
chatgpt
chatgpt
to
to
replace
replace
it
it
with
with
a
a
more
more
basic
basic
hello
hello
world.
world
GPT
gpt
4
4
is
is
kind
kind
of
of
slow
slow
and
and
can
can
often
often
be
be
overly
overly
verbose,
verbose
so
so
one
one
thing
thing
you
you
can
can
do
do
is
is
just
just
say
say
code
code
only
only
to
to
shorten
shorten
the
the
response.
response
That
that
looks
looks
pretty
pretty
good.
good
Let's
let's
copy
copy
and
and
paste
paste
it
it
into
into
our
our
project.
project
Now
now
go
go
to
to
the
the
terminal
terminal
and
and
run
run
npm
npm
run
run
dev
dev
and
and
you
you
should
should
get
get
this
this
hello
hello
world
world
component,
component
but
but
that's
that's
a
a
little
little
too
too
simple.
simple
Let's
let's
go
go
back
back
to
to
chat
chat
gpt
gpt
and
and
now
now
have
have
it
it
modify
modify
this
this
code
code
with
with
a
a
button
button
that
that
will
will
toggle
toggle
the
the
visibility
visibility
of
of
the
the
hello
hello
world
world
text.
text
When
when
doing
doing
that,
that
it
it
explains
explains
how
how
we'll
we'll
need
need
to
to
use
use
React
react
state
state
to
to
manage
manage
the
the
visibility.
visibility
Paste
paste
the
the
updated
updated
code
code
in
in
your
your
project,
project
save
save
it,
it
and
and
now
now
you
you
have
have
a
a
working
working
interactive
interactive
React
react
app.
app
That's
that's
pretty
pretty
cool,
cool
but
but
we
we
wanna
wanna
make
make
sure
sure
that
that
the
the
AI
ai
doesn't
doesn't
accidentally
accidentally
break
break
this
this
code
code
in
in
the
the
future,
future
so
so
let's
let's
ask
ask
it
it
to
to
write
write
a
a
test
test
with
with
Playwright.
playwright
Once
once
again,
again
copy
copy
the
the
code,
code
then
then
go
go
into
into
the
the
test
test
directory
directory
and
and
create
create
a
a
new
new
file
file
called
called
app.test.ts.
app.test.ts
Here's
here's
a
a
pro
pro
tip
tip
as
as
a
a
proofing
proofing
Engineer,
engineer
you
you
can
can
use
use
control
control
v
v
on
on
your
your
keyboard
keyboard
instead
instead
of
of
doing
doing
right
right
click
click
paste
paste
to
to
maximize
maximize
your
your
speed.
speed
Now
now
from
from
there,
there
we
we
need
need
to
to
go
go
into
into
the
the
package
package
JSON
json
file
file
and
and
set
set
up
up
a
a
testing
testing
script.
script
If
if
you
you
already
already
have
have
Copilot
copilot
installed,
installed
you
you
can
can
just
just
type
type
test
test
and
and
it
it
should
should
automatically
automatically
detect
detect
Playwright
playwright
and
and
create
create
the
the
script
script
for
for
you,
you
which
which
is
is
just
just
Playwright
playwright
test.
test
From
from
there,
there
we
we
can
can
open
open
the
the
terminal,
terminal
run
run
npm
npm
run
run
test
test
and
and
Playwright
playwright
will
will
test
test
this
this
code
code
on
on
multiple
multiple
browsers
browsers
in
in
parallel.
parallel
As
as
you
you
can
can
see,
see
it
it
fails
fails
because
because
we
we
don't
don't
have
have
the
the
right
right
local
local
host
host
port
port
set
set
up,
up
so
so
let's
let's
go
go
ahead
ahead
and
and
modify
modify
that
that
in
in
our
our
testing
testing
code
code
and
and
run
run
it
it
again.
again
This
this
time
time
it
it
passes.
passes
In
in
the
the
future,
future
GitHub
github
Copilot
copilot
will
will
know
know
the
the
full
full
context
context
of
of
your
your
project
project
and
and
won't
won't
makes
makes
silly
silly
mistakes
mistakes
like
like
these.
these
This
this
is
is
cool
cool
and
and
all,
all
but
but
what
what
you'll
you'll
find
find
as
as
your
your
app
app
grows
grows
more
more
and
and
more
more
complex,
complex
it
it
becomes
becomes
harder
harder
and
and
harder
harder
to
to
prompt
prompt
the
the
AI
ai
effectively.
effectively
It's
it's
non
non
deterministic,
deterministic
which
which
means
means
you
you
can
can
get
get
results
results
from
from
the
the
same
same
prompt.
prompt
You
you
never
never
know
know
what
what
you're
you're
gonna
gonna
get.
get
And
and
that's
that's
complete
complete
madness
madness
for
for
a
a
programmer.
programmer
But
but
now
now
here's
here's
where
where
things
things
get
get
really
really
mind
mind
blowing,
blowing
and
and
we'll
we'll
give
give
you
you
a
a
limps
limps
into
into
the
the
future
future
of
of
programming.
programming
At
at
this
this
point,
point
you
you
have
have
the
the
general
general
idea
idea
of
of
how
how
React
react
works,
works
but
but
you
you
may
may
not
not
know
know
JavaScript
javascript
very
very
well,
well
or
or
have
have
it
it
memorized
memorized
all
all
the
the
little
little
quirks
quirks
in
in
the
the
framework.
framework
Or
or
if
if
you're
you're
a
a
React
react
expert,
expert
and
and
just
just
don't
don't
want
want
to
to
go
go
through
through
the
the
tedious
tedious
process
process
of
of
writing
writing
perfectly
perfectly
structured
structured
code.
code
So
so
what
what
we
we
can
can
do
do
next
next
is
is
have
have
ChatGPT
chatgpt
come
come
up
up
with
with
a
a
pseudocode
pseudocode
language
language
for
for
React.
react
What
what
this
this
will
will
do
do
is
is
allow
allow
us
us
to
to
agree
agree
on
on
some
some
general
general
guidelines
guidelines
to
to
represent
represent
the
the
structure
structure
of
of
a
a
React
react
component.
component
As
as
you
you
can
can
see
see
here,
here
it
it
looks
looks
kind
kind
of
of
like
like
and
and
allows
allows
us
us
to
to
define
define
state
state
and
and
then
then
the
the
rendering
rendering
function
function
or
or
JSX.
jsx
And
and
if
if
we
we
don't
don't
like
like
the
the
way
way
it
it
looks,
looks
we
we
can
can
tell
tell
it
it
to
to
come
come
up
up
with
with
a
a
different
different
idea,
idea
like,
like
maybe
maybe
make
make
it
it
look
look
more
more
like
like
Python.
python
Actually,
actually
no.
no
Let's
let's
make
make
it
it
look
look
like
like
a
a
cooking
cooking
recipe,
recipe
which
which
is
is
surprisingly
surprisingly
a
a
very
very
intuitive
intuitive
way
way
to
to
represent
represent
a
a
React
react
component.
component
And
and
as
as
an
an
added
added
benefit,
benefit
you
you
could
could
write
write
this
this
in
in
any
any
human
human
language
language
and
and
have
have
it
it
translate
translate
your
your
pseudo
pseudo
code
code
back
back
to
to
English.
english
But
but
from
from
a
a
practical
practical
standpoint,
standpoint
I
i
think
think
you
you
want
want
something
something
that
that
kind
kind
of
of
looks
looks
like
like
YAML.
yaml
Overall,
overall
it's
it's
way
way
more
more
concise
concise
and
and
doesn't
doesn't
require
require
us
us
to
to
use
use
precise
precise
syntax,
syntax
but
but
at
at
the
the
same
same
time,
time
it
it
will
will
give
give
us
us
relatively
relatively
consistent
consistent
results.
results
And
and
we
we
can
can
make
make
it
it
even
even
better
better
by
by
including
including
relevant
relevant
documentation
documentation
or
or
a
a
style
style
guide
guide
to
to
force
force
it
it
to
to
write
write
code
code
in
in
a
a
style
style
that
that
fits
fits
our
our
project,
project
because
because
GPT
gpt
4
4
your
your
can
can
now
now
handle
handle
up
up
to
to
25,000
25,000
tokens.
tokens
The
the
end
end
result
result
is
is
your
your
own
own
custom
custom
AI
ai
pseudo
pseudo
code
code
language.
language
As
as
you
you
can
can
see
see
here,
here
I
i
wrote
wrote
out
out
a
a
relatively
relatively
complex
complex
component
component
in
in
this
this
language,
language
and
and
it's
it's
perfect
perfect
React
react
code
code
as
as
a
a
result.
result
But
but
most
most
importantly,
importantly
it
it
generates
generates
the
the
same
same
code
code
every
every
time,
time
most
most
of
of
the
the
time,
time
maybe
maybe
80%
80%
of
of
the
the
time.
time
This
this
is
is
pretty
pretty
mind
mind
blowing
blowing
because
because
now
now
any
any
developer
developer
can
can
have
have
their
their
own
own
custom
custom
tailored
tailored
pseudo
pseudo
code
code
language
language
that
that
can
can
transpile
transpile
into
into
complex
complex
code
code
in
in
virtually
virtually
any
any
language
language
without
without
understanding
understanding
the
the
underlying
underlying
syntax.
syntax
In
in
a
a
previous
previous
video,
video
I
i
it
it
did
did
that
that
someday
someday
there
there
will
will
be
be
a
a
universal
universal
AI
ai
language,
language
but
but
maybe
maybe
I
i
was
was
wrong.
wrong
Maybe
maybe
every
every
developer
developer
gets
gets
to
to
build
build
their
their
own
own
AI
ai
language
language
custom
custom
tailored
tailored
to
to
optimize
optimize
their
their
own
own
productivity.
productivity
Sounds
sounds
like
like
chaos
chaos
on
on
a
a
team,
team
but
but
AI
ai
can
can
also
also
translate
translate
your
your
pseudo
pseudo
code
code
into
into
my
my
pseudo
pseudo
code
code
and
and
my
my
pseudo
pseudo
code
code
into
into
your
your
pseudo
pseudo
code.
code
In
in
fact,
fact
one
one
thing
thing
we
we
could
could
do
do
right
right
now
now
is
is
take
take
generated
generated
React
react
code
code
and
and
converted
converted
into
into
a
a
superior
superior
framework
framework
like
like
Svelte
svelte
or
or
Solid.
solid
There's
there's
a
a
1,000,000
1,000,000
different
different
JavaScript
javascript
frameworks
frameworks
out
out
there,
there
but
but
now
now
we
we
can
can
use
use
them
them
without
without
learning
learning
them.
them
In
in
fact,
fact
we
we
could
could
use
use
our
our
pseudo
pseudo
code
code
to
to
build
build
the
the
same
same
app
app
and
and
multiple
multiple
frameworks
frameworks
at
at
the
the
same
same
time,
time
then
then
benchmark
benchmark
their
their
and
and
just
just
choose
choose
whichever
whichever
one
one
performs
performs
the
the
best.
best
That's
that's
more
more
of
of
a
a
futuristic
futuristic
idea,
idea
but
but
currently,
currently
the
the
main
main
value
value
of
of
pseudo
pseudo
code
code
is
is
just
just
getting
getting
things
things
done
done
faster
faster
without
without
allowing
allowing
the
the
AI
ai
to
to
become
become
too
too
magical.
magical
Like
like
in
in
this
this
example,
example
you
you
can
can
see
see
we're
we're
making
making
an
an
API
api
call,
call
but
but
currently,
currently
we
we
don't
don't
have
have
any
any
kind
kind
of
of
interface
interface
for
for
the
the
response.
response
Generally
generally
speaking,
speaking
GPT
gpt
4
4
will
will
provide
provide
better
better
when
when
you
you
have
have
statically
statically
typed
typed
code
code
like
like
TypeScript
typescript
or
or
even
even
just
just
type
type
hints
hints
in
in
a
a
language
language
like
like
Python.
python
In
in
this
this
case,
case
I
i
have
have
a
a
JSON
json
object,
object
and
and
what
what
I'll
i'll
do
do
is
is
paste
paste
into
into
ChatGPT
chatgpt
to
to
turn
turn
it
it
into
into
a
a
TypeScript
typescript
interface.
interface
It's
it's
able
able
to
to
detect
detect
the
the
2
2
different
different
entities
entities
of
of
TV
tv
shows
shows
and
and
actors,
actors
and
and
now
now
we
we
can
can
use
use
it
it
in
in
our
our
code.
code
Now
now
that
that
ChatGPT
chatgpt
has
has
this
this
interface,
interface
we
we
can
can
also
also
tell
tell
it
it
to
to
generate
generate
any
any
kind
kind
of
of
helper
helper
functions
functions
we'll
we'll
need,
need
like
like
if
if
we
we
wanted
wanted
to
to
map
map
this
this
object
object
to
to
all
all
of
of
the
the
actor
actor
names.
names
That's
that's
a
a
pretty
pretty
handy
handy
trick
trick
right
right
now,
now
but
but
once
once
again,
again
in
in
the
the
future,
future
it
it
won't
won't
be
be
necessary.
necessary
Tools
tools
like
like
Copilot
copilot
will
will
be
be
able
able
to
to
introspect
introspect
any
any
API
api
to
to
provide
provide
you
you
with
with
automatic
automatic
end
end
to
to
end
end
type
type
safety
safety
without
without
any
any
effort
effort
on
on
your
your
part.
part
Now
now
the
the
final
final
thing
thing
we
we
need
need
to
to
do
do
as
as
a
a
prompt
prompt
engineer
engineer
is
is
document
document
our
our
code.
code
We
we
simply
simply
take
take
the
the
code
code
we've
we've
already
already
generated
generated
and
and
tell
tell
ChatGPT
chatgpt
82
82
document
document
it.
it
Congratulations.
congratulations
You're
you're
now
now
a
a
10
10
x
x
React
react
prompt
prompt
engineer.
engineer
The
the
starting
starting
salary
salary
is
is
about
about
335
335
k.
k
This
this
productivity
productivity
boost
boost
it's
it's
both
both
exciting
exciting
and
and
scary.
scary
Goldman
goldman
Sachs
sachs
just
just
released
released
a
a
report
report
saying
saying
that
that
300,000,000
300,000,000
jobs
jobs
could
could
be
be
affected
affected
by
by
AI
ai
in
in
the
the
near
near
future,
future
but
but
there's
there's
no
no
reason
reason
to
to
be
be
afraid.
afraid
Software
software
systems
systems
in
in
real
real
life
life
are
are
complex
complex
beyond
beyond
belief,
belief
and
and
not
not
even
even
state
state
of
of
the
the
art
art
AI
ai
will
will
want
want
to
to
touch
touch
that
that
code.
code
I
i
do
do
believe
believe
that
that
AI
ai
will
will
make
make
writing
writing
code
code
significantly
significantly
easier,
easier
but
but
building
building
complex
complex
software
software
that
that
powers
powers
the
the
world
world
will
will
still
still
be
be
done
done
by
by
humans
humans
in
in
the
the
foreseeable
foreseeable
future,
future
and
and
my
my
goal
goal
with
with
this
this
channel
channel
is
is
to
to
teach
teach
you
you
how
how
to
to
do
do
exactly
exactly
that.
that
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The future is determined by the use of AI technology like chatbot ChatGPT. The tutorial gives a complete understanding of React and how it can be used to write code, including building websites and creating a React app. Playwright is a new tool for end-to-end testing and validating AI code. A speaker explains how to use the app Deepgram to create a test script for React by setting up a testing script and modifying it in the future. They also discuss how to use a React language to create a custom tailored pseudo code language and how it can be used to generate a similar code for a similar project. A speaker emphasizes the importance of creating a universal AI language for faster development and mentions a news article on React language development.
Masterclass: AI-driven Development for Programmers
AI tools like ChatGPT and GPT-4 are changing the way programmers write code. Learn how build a React app with Typescript using with AI prompting and other tricks to speed up development. 

#ai #programming #tutorial 

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

- ChatGPT https://chat.openai.com/
- React Docs https://react.dev/
- Automated workflow tweet https://twitter.com/mckaywrigley/status/1642948620604538880
- Copilot X https://youtu.be/q1HZj40ZQrM 

🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Building apps with AI
- AI pseudocode techniques
- Can ChatGPT build complete apps?
- GitHub Copilot X features
- Will AI replace programmers?
- TypeScript Tricks with ChatGPT
- How to use AI to code faster