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.