Build and deploy a React Application
In this lesson, we'll prototype a React application right in your browser using CodeSandbox.io, then download that application locally and use the react-scripts, which are set up automatically to develop and build the application for production. We'll wrap up by deploying the application to Netlify (using a free account) for the world to see.
Instructor: [00:00] CodeSandbox is an online web application editor. It's super awesome and it has a template for React, so let's go ahead and take a look at some of the examples for React.
[00:09] We'll pop open the React Router example, and this is going to load our Sandbox with an editor, and then the rendered version on the right, and that's actually a live URL. We can actually pop that open in another browser window, and it's just the full app that we're writing right now, which is pretty cool.
[00:28] We can get the split view here. We can just look at the preview view, and then just look at our code. On the left side here, we have some metadata. We can look at some of the dependencies we have available to us, and then we can pop open some files that we have.
[00:44] We can add new files, all of this right in the browser. As we make changes, like house, that gets instantly updated in the viewer.
[00:53] The way that this works is the index file that you have needs to import Render from ReactDOM, and then React from React. Then you're able to use JSX, and then the render function to render your component to the route element.
[01:08] From there, it's all JavaScript and React. We can import modules that we have inside of our file system here, and because we have access to third-party libraries like react-router-dom through the NPM packages feature here, we can build really impressive applications right in the browser.
[01:25] When we're ready to get serious about deploying this, we can actually download this Sandbox, and it will download a ZIP file to our computer. I'm going to go ahead and unzip that and open it in my editor, and now I have the project locally on my machine.
[01:40] I can look in the package.json and see all the dependencies that I have. I have a couple of scripts here that I have available to me for starting the dev server, building it and running my tests, and then I can look at my source directory with all the components that I had before in the CodeSandbox.
[01:56] Then I can run npm-install, and when that's finished, I'll have this node modules directory. Now I can run my scripts, so let's go ahead and run NPM Run Start.
[02:09] This will start up a dev server that I can go over here to in my browser, go to localhost 3000, and I can interact with this locally on my machine, just like I was in CodeSandbox.
[02:19] Then I can create a production build with NPM Run Build. When that's finished, I'll have this build directory with all the static assets that I need, and that index HTML. Everything's been optimized for my app.
[02:32] If I want to show this to the world, I can go to netlify.com. I'll log in with my GitHub credentials. I can scroll down to the bottom here, and I can click and drag the build directory right into that area, where it will instantly upload and deploy my application.
[02:53] Now I can go to this URL, which is public to the world, and secure it over HTTPS, and use my application.
Hi Kent, Thank you for this great course !
Hello Kent,
I have been waiting to go through the course for a long time, finally I went over the course and I loved the way you teach and detailed explanation.
Big thanks to @Jack_Franklin who gifted me the subscription.
Love codesandbox and netlify too :D.. Day well spent :)
I'm so glad john! Jack's a swell individual!
I used Vanilla JavaScript for four years. I thought I was an good intermediate developer. This course start out fine for me comparing vanilla JS to React. After a few lessons, I realized I was simply watching the videos and running the code.
I don't believe I've walked away with a beginning level for React that I could go out and code on on my own. Any advice? Is there a very low level course on React somewhere?
Hi Mel,
This course should expose you to the beginnings of what's possible in React and then serve as a reference as you go out and start building things yourself. I would recommend that you try to build an app yourself. Even something simple. As you bump into things you can come back to the course for review. The best way to learn React is to build things that interest you with it and then write down (and even teach) the things you're learning as you go.
Avoid jumping too far into the deep end. See how far you can get with just react and no dependencies. You'll be surprised what you can accomplish. Good luck!
Seems like this course is 2 years old. Is it still up to date ?
CodeSandbox.io is pretty cool