First, open your project in VS Code by typing code . in the command prompt in your working directory. Then run your project as described in Part C in our React A-Z.

Now, let’s go to our code editor and open the “src” folder. In there you can see App.css, App.js, App.test.js, and few other files. First, we are going to delete all the files inside that “src” folder.

Files inside “src” folder

Yarn is a package manager like npm or node package manager which allows you to work with “React”.

To install yarn you need npm, and to use npm we need Node JS. So why do we need to use yarn when we already have npm?

One of the main reasons for introducing yarn is at that time npm didn’t support the deterministic sub-dependency resolution and “yarn” was considerably faster due to the introduction of an offline cache. But nowadays the lacuna between “yarn” and “npm” is much closer due to the introduction of deterministic dependency installation.

To install yarn, type…

When we consider React components, there are basically two ways to create them.

  • Functional Component
  • Class-based Component
Component types in React

We can handle events using either way and it is notable that we have to make them using “JSX”. We will talk about event handling on a separate topic since our focus now is to show some content using JSX. So, let’s open the project that we have been working on and open the “index.js” file.

In part B we created our “react” project by using create-react-app tool. Now, let’s try to understand the directories and files in the project. As we created our directory as “jsx”, first go inside the folder and open the command prompt inside the directory by just typing “cmd” and pressing “enter” in the address bar. Then type, code . to open the VS Code(You have to have VS Code installed in your machine for this. You can download it from

opening the project using VS Code

Now, let’s look at the files and directories in the “jsx” project.

The first folder you will find is…

What is React?

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

One of the major problems that a newbie to “React” would always get is not understanding the JSX. So what is JSX? JSX stands for JavaScript XML which allows you to write HTML in React. To be honest, the meaning of JSX is not useful, because what you need to understand is how to make a website using JSX.

So, without further ado, let’s jump into programming using “React”. …

If you are familiar with NodeJS and NPM — Node Package Manager you might have heard about the NPM commands. Most of the time we use NPM commands to install dependencies to our project. Assume that you want to add lite-server to your project, then you would simply type npm install --save lite-sever in the command prompt which is directed to the working directory of your project.

So what are these NPM scripts and how do they differ from the usual npm commands we type in the command prompt? …


Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile projects on the web. The main characteristic of bootstrap is its speed and user-friendliness. Bootstrap includes HTML and CSS based design template for typography, forms, buttons, tables, navigation, modals, image carousels, and many others including optional JavsScript plugins. Here, I am going to build a web-design using bootstrap from scratch and going to explain all the important facts along the way.

First, let's try to understand what do programmers mean by front-end and back-end.

Front-end and Back-end

Front-end is the interface we see when we open web, mobile application…


R is a language and environment for statistical computing and graphics which has resemblance with S language and environment. Although R can be considered as a different implementation of S, there are some important differences.

R provides a wide variety of statistical(linear and nonlinear modeling, classical statistical tests, time-series analysis, classification, clustering, etc.) and graphical techniques and is highly extensible. The S language is often considered as the main choice for research in statistical methodology and R provides an open-source route to participation in that activity.

Downloading R for Windows

Go to the website and download the R for Windows using the steps…

We will be diving into the coding in our Angular project in this article. So if you haven’t read the previous article on downloading the relevant materials and setting up the environment, please read it before reading this.

Understanding the Source Files of the Template

After you have unzipped the downloaded template you can see the following files. We are going to mess around with them to make our application since it is easier to learn the basic things this way.

Downloaded template after unzipping.

Code with VS Code

VS Code is an open-source IDE with a lot of extensions built in order to code in different languages. You can download it from



Angular is an application design framework and development platform for creating efficient and sophisticated single-page applications. Here, I am going to walk through how to build your first Angular project using a single-page template that you can download for free.

First, you have to create an environment in your PC to work with Angular. To do that you have to have Node.js installed in your development environment.

Setting up Node.js in Your Development Environment.

You can download the setup from to your Windows or Mac and install it by double-clicking it. And let it automatically add to your environment path.

Figure: Downloading Node.js to your PC

Nipuna Upeksha

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store