In this blog post, we will discuss how to install React on your development computer. React is a powerful and popular JavaScript library used for building user interfaces. There are several ways to set up React, and we will cover the most common methods. Let’s get started!
Load React Directly in the Web Page
The simplest way to use React is by adding the React JavaScript file directly to your web page. This method is suitable when your React app only interacts with elements on a single page, without controlling the entire page navigation.
To do this, add the following script tags at the end of the body tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js" crossorigin></script>
Note that the version mentioned in the links may not be the latest version available, so make sure to update them accordingly.
After adding these script tags, you can load your JavaScript files that use React or even add inline JavaScript using a script tag.
To use JSX, an extension to JavaScript used by React, you need to add an extra step: loading Babel. Add the following script tag:
<script src="https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/babel.min.js"></script>
And load your scripts with the special text/babel MIME type:
<script src="app.js" type="text/babel"></script>
This setup allows you to use JSX in your app.js file.
Use Create-React-App
Another popular way to install and set up React is by using Create-React-App. Create-React-App is a project that helps you quickly set up a React application with a folder structure and necessary configurations.
To use Create-React-App, first, make sure you have Node.js and npm installed on your computer. You can download them from https://nodejs.org.
Next, open your terminal or command prompt and run the following command:
npx create-react-app <app-name>
Replace <app-name> with the desired name for your React application. This command will download the latest Create-React-App release, set up the necessary files and dependencies, and prepare your project.
Once the command finishes running, you can navigate into the project folder and start the React application using the command:
cd <app-name>
npm start
This will start a local development server and open your React app in a browser. You can start building your React components and features right away.
Create-React-App also provides other useful commands such as npm run build for building your React application for production, npm test for running tests using Jest, and npm eject for customizing the Babel and Webpack configurations.
Please note that once you eject from Create-React-App, it is irreversible, and you’ll have to manage the configurations manually.
Other Options
If you prefer not to install React locally, you can use online code editors and playgrounds such as CodeSandbox or CodePen.
CodeSandbox is a web-based development environment specifically designed for web applications and supports React applications. You can create a new React project or import an existing one in CodeSandbox without the need for local installation.
CodePen is another popular online code editor that allows you to write and share front-end code snippets. You can create a new project in CodePen with React pre-configured and start coding right away.
Both CodeSandbox and CodePen provide a convenient way to experiment with React without the need for complex setup or installations.
That’s it! You now have several options to install and set up React on your development computer. Choose the method that best suits your needs and start building amazing React applications!