Understanding the React.js

What is React?

React is a JavaScript library for building rich user interfaces. Almost every JavaScript developer loves to work on this technology because some of its awesome features, in fact, many awesome features which make JavaScript developers work easy and doesn’t mess the code structure, unlike JavaScript. These awesome features are written in the form of libraries and classes.

But, this is not the only reason to learn React.

In recent years single page applications (SPA) have become popular. Frameworks like Angular, Ember, and Backbone helped JavaScript developers to build modern web applications beyond the usage of vanilla JavaScript and jQuery.

The initial React release was 2013 by Facebook. React is not an SPA framework but a view library. It is the V in the MVC (model view controller). It only enables you to render components as viewable elements in a browser. Yet the whole ecosystem around React makes it possible to build single page applications.

Now let’s move onto the installation of react and understand their structure.

In this article, you will find a concise step by step guide on how to install React on Windows. There are plenty of articles out there on how to set up your web development environment on MacOS, but very few on how to setup it on Windows. Especially when people want to enter the world of React.js in Windows, there is a missing starting point. I wanted to address this issue, since a lot of people coming from Windows too.

The tools you needed for installation are:

1)    Node.js and NPM on Windows.

Since you are going to use JavaScript for your React development on Windows, there is no way around Node.js and NPM. Node.js is a JavaScript runtime which makes it possible to run JavaScript outside of the browser. The underlying node package manager (NPM) is used to install libraries, such as React.js, to your project on the command line. You will see later on how this works out on the command line for Windows users.

In order to install Node.js for Windows, you need to head over to the Node.js website and download the Windows version which is recommended for most users. Afterward, you should install it. NPM comes automatically with Node.js. For verification that node is installed in your system, you can check by typing command: 

“node –v” 

in your command prompt and you will see your node version number.

2)    Visual Studio Code on Windows 

There are plenty of editors and IDEs out there to develop web applications. Depending on your personal, project or company requirements, you can choose from a range of lightweight editors to full-blown IDEs. Visual Studio Code is a solution in between. Many developers, operating on Windows but also MacOS, enjoy using it. That’s why my recommendation would be Visual Studio Code to start developing React applications on Windows. The installation on a Windows machine is simple: Navigate to the official Visual Studio Code website and download the recent version of VS Code in 32 or 64 bit. Afterward, install it and check if everything is working when you open it. That’s it for the installation of an editor/IDE on your machine.

3)    NPM on the Command Line for ‘create-react-app’ 

Now you have Visual studio code and node with NPM installed. If you are just getting started with web development, you should create a dedicated folder on your machine to manage all your web development projects. It’s up to you to divide the folder into subfolders. For instance, there could be a folder for React applications and another one for plain Node.js applications. Once you have your folder for your projects, open this folder in Visual Studio Code.

In Visual Studio Code you should be able to open a tab which is called “Terminal” at the bottom by pressing CTRL + ` (backtick). That’s your integrated command line in Visual Studio Code to install node packages with NPM or to start/test your project. It’s up to you to use the integrated terminal or another command line interface for your Windows machine. Now Open the command line in VS Code and type the following command:

 “npm install –g create-react-app”

You will install it globally with a “-g” flag. Because of installing it globally, you will always have access to it on the command line. Later on, when you install a node package for your project without the -g flag, you will only have access to the node package (node module) in your project. This package allows you to bootstrap React applications with zero-configuration. There is no need to get involved too early in toolings with Webpack and Babel. It’s the simplest approach to learn plain React without worrying about all the tooling with Webpack and Babel around it. After installing it, you can check its version again on the command line: “create-react-app --version”. Now you will see the version number of this global module.

Finally, you can bootstrap your first React.js application on Windows. You can use create-react-app by passing the name of your application to it on the command line: 

“create-react-app my-app”

Afterward, you can navigate into the project on the command line and start it with npm: 

“cd my-app”

“npm start”

The command line should give you an output where you can find the application in the browser. The default should be localhost:8080. If you are only using IE or Edge on your Windows machine, I can recommend you to install Chrome as well to access the developer environment and the React Developer Tools which are available as Chrome extension. On the other side, now you have an advantage over the MacOS developers because you can debug your web applications in the Internet Explorer and Edge too.