Table of Contents
When I decided to learn React, I looked up the internet for the React tutorials. There are tons of articles, tutorials, courses on the internet that teaches you React. But unfortunately, I couldn’t find any tutorial that explains the installation process for the windows operating system.
The tutorials online were mostly aimed at Mac/Linux audiences or had insufficient information about how to install React on Windows. So, I thought of putting up a little introduction and step-by-step process on the installation of React for the Windows ecosystem.
What is React?
React is an open-source JavaScript library created by our very own Facebook. The primary purpose of this library is to facilitate the development process for the front-end developers who need to create interactive user interfaces or single-page applications.
With React, you can create anything from simple to complex design views that change against every data update without the need to refresh the web page. It allows you to build encapsulated components in HTML-like syntax while JavaScript being hidden behind the JSX API.
The component is the core element of React and offers the benefits of reusability and easy debugging. The components are HTML elements that store, handle data, and update the interface whenever your data changes.
What are the prerequisites of React?
Here are a few things you need to learn before diving into React.
– HTML and CSS
– DOM and its manipulation
– JavaScript and ES6 syntax in general
– Node.js and Package managers like NPM
In an ideal world, you need to learn JS and should understand ES6 concepts like the difference between var, const, and let keywords. You should have some familiarity with concepts like template string, Arrow function, Promises, or how Classes are written in JS.
Installing React
[adinserter block=”2″] I assume that you know JS well, and are ready to learn React.There are a few ways you can install React on your laptop running Windows OS. In this tutorial, we will learn two ways to install React. The first one is the easiest but usually not preferred by pro developers.
The second method is a bit complex but offers you a pre-configured development environment to code in React.
So let’s start with the easy method to install React on Windows.
Installing React using WebPack and Babel
To code in React, you need three JS libraries – React, React Dom, and Babel
React is the main file and contains the API.
React-DOM is the JS library to add DOM-specific methods.
Babel.js is a JS compiler that is mainly used to translate ECMAScript 2015/ES6 or later syntax into a backward-compatible version of JS for the older browsers.
Create a simple HTML file and link it to these three libraries using CDN in the head section of the file.
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
As I have already mentioned that we write React in HTML-like syntax known as JSX, which is an alien language for the browsers. You need to enclose React code in a script tag with type text/babel for the compiler to translate JSX code into JS.
<script type="text/babel"> // React code goes here </script>
Here is the full code:
<!doctype html>
<html>
<head>
<title>First app in React</title>
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
</head>
<body >
<div id="container"></div>
<script type="text/babel"> class App extends React.Component { render() { return <h1> Hello React! </h1>; } } ReactDOM.render(<App />, document.getElementById('container')) </script>
</body>
</html>
render() is the only method needed to render or display DOM nodes. The above program creates a simple React component called App by extending React class Component.
The above code displays the Hello React! message on the screen.
That was easy. Isn’t it?
Now, move to the second method to install React on your local machine.
Installing React using Node.js
[adinserter block=”2″] This method requires a few more steps than the first method mentioned above. But this method is recommended by Facebook and used by professional developers when they need to create a large-scale web application in React.It offers you a live development server that comes with all configurations you need to fast-track your coding process.
Here is the whole process – in steps:
– Download and install Node.js and Node Package Manager(NPM)
– Create a directory for Projects & install necessary JS libraries
– Create a sub-directory for the App using create-react-command
– Start the development server using a command prompt
NPM and NPX come with Node.js (version 5.2+). If you have the latest version of Node.js, you don’t need to install NPM and NPX separately.
You can download the latest stable version of node.js from http://nodejs.org
At the time of writing, it offers node.js version 12.16.13. Click on the big green button for the recommended version of Nodes.js to download the .msi file.
It takes less than a minute to download the installation file completely. Once you are done, open your command prompt and type the following commands to check if everything is working fine.
node –v
npm –v
npx –v
These commands display the versions of node, npm, and npx respectively.
Create a new directory called Projects.
Install React and react-dom in the same directory with the following commands.
You don’t need to install or configure Babel or WebPack in this method, as they are already pre-configured with many other things and hidden.
A live development environment includes –
- WebPack and Babel are installed under the hood
- React, JSX, ES6, TypeScript, and Flow syntax support
- ES6 operators and auto-prefixed CSS
- A live development server
- A build script that bundles CSS, JS, and images for production
Note: There is also an alternative way to install react globally using npm install –g create-react-app command, but this method isn’t recommended due to the possibility of having the old version of React API being installed.
[adinserter block=”2″]
Once these steps are done, use a create-react-app command to create the React app.
Change your current directory to firstapp. Inside the newly created directory, you can run some built-in commands.
npm start runs the App in development mode. Open http://localhost:3000 to view it in your web browser.
Here is the directory structure of projects & firstapp
React codes goes into the src directory.
Create React App has nothing to do with backend logic or databases; it just created a development environment for front-end development.
When you are ready to deploy the final code, execute the npm run build command to create an optimized version of your App in the build directory.
I hope this tutorial has helped you a bit. If you have any questions related to how to install React on Windows, please feel free to leave them in the comment section.
Blog Hero