Build and deploy a React Application with Codesandbox, GitHub, and Netlify

Kent C. Dodds: [0:00] Once you figured out how React works locally in an index.html, you probably want to build an actual application, and the best next place to start is by going to codesandbox.io.

[0:11] CodeSandbox is amazing. It's an entire IDE and prototyping tool for rapid web development built right into the browser. It's just like a typical development environment that you'd expect from a local development.

[0:26] Let's go ahead and create a Sandbox. I'm going to create a React Sandbox here from the React template. Here on the right we have our browser. On the left we have our Sandbox. I can say, "Hello You!" and it just gets updated automatically as we go.

[0:44] There are a ton of things that you can do in CodeSandbox. You can add dependencies from npm, you can add external resources, you can even change your typeface. If we hit Command and a comma, you can open up your settings here and change the settings just like you would if you were using VS Code locally. It's really amazing.

[1:05] You can build your whole app out here. You can have multiple files and use import statements and modules. You can even write tests in here.

[1:12] We could create a new directory called tests, and then in that directory, you could have a test.js file. Then, we click on the Test tab, here, and we get to run all the tests that we have in here. We can say test('this works'). Then, our tests will be run.

[1:33] Another thing you can do with this is you can connect to this with GitHub. I'm going to go ahead and sign in with GitHub, right here. I'll authorize CodeSandbox and then we'll sign in right here to authorize CodeSandbox to create repos. Then, I can create a new repository, example-codesandbox. We'll click Create Repository and CodeSandbox will create a repository on GitHub based on what I have right here.

[2:03] With that, now, I can go to the information here and I see that there's a link. I can click on that. That opens up in this new GitHub repo that has all of the code that I had for that CodeSandbox.

[2:15] To take it a step even further, I can go to this deployment option and I can deploy this with Now or netlify. Let's go ahead and try deploying this with netlify. We'll click Deploy, and then I get a Sandbox Site. Now, netlify is building my CodeSandbox. I can look at the logs here. It's going to take a minute or two to complete, so I'll speed that up for you, so you don't have to wait.

[2:45] It looks like it's been deployed. I can scroll through all these logs and take a look at what it's done here and then I can click Visit. That will pop open the site in another tab. This is available on the World Wide Web, so you can send this URL to anyone and they can see the amazing work that you created within CodeSandbox.

[3:05] You can also claim this site so you can make it associated to your Netlify account and even have it wired up to the GitHub repo that you have, so anytime you push changes to this GitHub repo, you can get your site redeployed. Within Netlify, you can even make a custom domain and so you could create an entire application using just CodeSandbox, Netlify and GitHub.

[3:27] Oh, and as you make changes, for example if we say, "Hello There!", then CodeSandbox will automatically fork your sandbox and you can commit changes to the GitHub repo that this CodeSandbox is attached to. We could say change title, we could commit it directly or even open a PR.

[3:49] Let's go ahead and commit, it'll create the commit and put it in our repo here. Now we see change title was the latest commit. If we wire up Netlify to our GitHub repo, then Netlify will automatically deploy that change as well.

[4:05] You can work entirely in CodeSandbox, or, if you'd rather work locally, then you can also export this to a zip, unzip that and work through it locally or you can clone this repository and work through it locally as well.

[4:19] There's an entire world of things that you can do with React once you have these tools at your fingertips. I look forward to seeing the cool things that you build to make the world a better place with your newfound knowledge of React.