This is a How-To for setting up the React environment on your Windows system, which is done manually.

Source: Giphy

At the forefront of the group of Essential Libraries in Use Today, so to speak, ReactJS was released by Facebook for creating dynamic, reusable UI components. As a ‘for instance’ to show how powerful React is, consider this: Instagram is written entirely in React! It is one of the most helpful developer tools out there today, and thus worth knowing in greater detail. In this first post in a series dedicated to React, we see how to set up the React environment on your Windows system for later use.

Source: Brainhub

To begin with, you need to have NPM installed on the system, and downloading Node.js includes the package manager as well. NPM is the package manager for the JavaScript language, and Node acts as your backend for React. You can download Node.js on your computer system here (I have downloaded the 64-bit version).

Next, on command line, go into the folder in which you intend to work on your project. Verify whether NPM is configured correctly on your system by typing in npm on the command line. If it is, you will receive a message like so:

NPM has been configured successfully

Initialize NPM by typing in npm init that creates the package.json file, and type in answers to the questions asked on cmd regarding the name of the folder in which the project exists, name of the author, etc. Bear in mind that the name of the folder is the only question that is required to be answered, the rest are optional. The name must also be saved in lowercase letters.

file, and type in answers to the questions asked on cmd regarding the name of the folder in which the project exists, name of the author, etc. Bear in mind that the name of the folder is the only question that is required to be answered, the rest are optional. The name must also be saved in lowercase letters. Install the NPM package “webpack” next, by entering the command given below in the red box. Webpack is a module bundler that collates JavaScript files together with all its dynamic components for better and more effective front-end development.

Now, you actually proceed to issue the command to install React along with ReactDOM. Follow the command given below:

Finally, you install Babel (that compiles JSX into regular JavaScript) by issuing the command install babel-core babel-loader babel-preset-es2015 babel-preset-react — save-dev

…and you’re all set!

Follow the series to find out more about React — this time with Django. Tell us about your React projects in the comments below or or join the YellowAnt community. Sign up for YellowAnt here.