Beginners introduction to JavaScript development

Web development has come a long way in the past few decades. Starting out as static HTML files being served, by adding JavaScript we can make a webpage interactive. If you are just starting your development career and don’t really now what path to take, I suggest learning JavaScript and becoming a Full-stack developer.

This isn’t an article that will go into the JavaScript language itself. But rather a guide to introduce you to the tools needed to get into development.

To begin we need a way to create and edit files. There are many IDEs (Integrated Development Environment) that can help us edit files, and depending on what language and platform you will be building apps in, you must choose a certain IDE. However for entry level developers just getting started into development I suggest using Visual Studio Code.

Visual Studio Code

https://code.visualstudio.com

Visual Studio Code is Microsoft’s code editor. I wouldn’t say it’s an IDE, but it’s lightweight and useful to get coding right away. In addition there are many extensions you can install to make your experience that much easier.

Here are some extensions I recommend to use when coding in JavaScript:

• ESLint — A tool to alert you about errors your code may have
• Prettier — A way to format your code to make it look pretty
• GitLens — Supercharge your git experience. Git blame annotations and view git history

There are a ton of extensions, let me know what you recommend if you are a super user.

Now that we have a way of creating and editing files we can start building an interactive website in JavaScript.

First let’s talk about front end and back end code. Front end code is JavaScript that will be run in a browser on a webpage. Back end code is JavaScript that will be run on a server that can connect to a database, make API calls, send emails, and do a variety of different processes.

We can write our JavaScript code to be useful for front end and back end once, to be shared in all our apps. But there are times when you can only write front end or back end scripts.

Now let’s talk about Node.js.

Node and NPM

Node.js is a JavaScript runtime that can run JavaScript code on your computer without the need to be ran in a browser. We can use Node to write a program and run certain processes. We can also use NPM which is the Node Package Manager to download and install JavaScript Packages such as React, Next.js, and other JavaScript frameworks.

Let’s install Node and NPM using NVM.

NVM — (Node Version Manager)

https://github.com/coreybutler/nvm-windows

This link is for installing NVM on Windows. If you need to install for Mac or Linux, follow this link:

https://github.com/nvm-sh/nvm

Once you have NVM installed go to your command prompt and type:

nvm

This will show that you have correctly installed NVM. If you get an error saying that it cannot find NVM, close down your editor or prompt and open it again. It should load. If for some reason you still can’t get it to work, follow the steps again in the above links.

So now that we have NVM installed, let’s install Node and NPM.

nvm install latest

This will install the latest version of Node an NPM. Which at the time of this article is 14.3.1. Once it is download we need to tell NVM what version we want to use.

nvm use 14.3.1

Now we can check if we have correctly installed Node and NPM by typing these commands:

node -v
npm -v

If they return without any errors and display the version then it means we now have correctly installed Node and NPM.

Now we can install packages from NPM that will help us build JavaScript applications.

Let’s talk about the frameworks that you can start using today that will help you become a JavaScript developer

Express

Express - Node.js web application framework

https://expressjs.com

Express will enable you to build a back end API that is capable of connecting to a database, running scripts, calling out to 3rd Party APIs and just about anything you can think. It is lightweight, meaning it doesn’t impose a lot of rules to use it.

React

https://reactjs.org

React is a framework that extends JavaScript. Meaning that you can write using an HTML syntax to create components, give meaningful user experiences all from a single page application. Everything is all bundled up for you and ready for your users to download automatically.

Next.js

https://nextjs.org

Next.js is an all in one production ready framework that combines a server side rendering front end using React and a backend server API using Node.js. If you need your application to handle SEO and static site generation that I suggest using this right away.

That’s it for the beginners introduction to JavaScript development. Once you get all these tools in your toolkit you can begin learning the JavaScript language itself and write applications.