How to Run React Applications Locally
- Run React Applications Locally With a Single HTML Page
-
Run React Applications Locally With
create-react-app
Locally running React apps can be an invaluable opportunity to practice your web development skills. They allow you to focus on writing code rather than time-consuming configuration like setting up Webpack, Babbel, and other necessary tools.
Run React Applications Locally With a Single HTML Page
React official docs give you a ready-made HTML file to run React locally. All you need to do is download the HTML file, open it with your code editor, make necessary changes, and then open the file in your browser.
This HTML file has the <head> and <body> sections. In the former, we import React using a CDN link, and the latter contains a <div> with the id attribute root.
Then, we have a <script> opening and closing tags, which allows us to run JavaScript in the HTML file. Here, we use the document.getElementById() method to reference the DOM element and ReactDOM.createRoot() method to initiate React for this specific container.
Finally, we use the render() method to run our component in the HTML file.
Run React Applications Locally With create-react-app
Facebook, the organization that develops and maintains the React library created a create-react-app package. It allows you to create a SPA (single page application) in just a few npm commands.
It sets up an almost ideal environment for building apps in React. The project will be set up, including compilers, transpilers, and tools like Webpack.
These tools are necessary and allow you to use advanced React features, such as JSX templating language. It is also required to use the latest JavaScript features, such as destructuring, arrow functions, etc.
It allows React developers to focus on learning code rather than setting up the environment. To create the project, find any folder where you’d like to make a directory to store the necessary files.
Next, open the command prompt and navigate to that folder (using the cd command on Windows). Use this command to create the project:
npx create-react-app app-name
Here, npx create-react-app is the command, and the last part is the name you choose for your React application.
Then, move into the folder of the newly created project with this command:
cd app-name
Finally, you can use this command to start the live preview of your component:
npm start
Typically the JavaScript files will be located in the src folder of the project. The App.js file is the default parent component file, but you can create other files for each new component.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn