As someone who spends a lot of time learning new technologies and who is building a web-based app, I decided to sink my teeth into the latest rage in the construction of web applications: React and Node. To begin learning this technology, I went online to YouTube, blogs, and even professional paid online courses. Every author seems to assume you already have Node installed and their editors clearly have a nice setup that makes typing React code simple and straightforward. As it turns out, this is not necessarily an easy thing to do, and I spent over two weeks just getting a basic setup for myself. The purpose of these videos is to hopefully help other newbies like myself quickly get the necessary tools up and running to build React and Node applications.
Install Node.js on a Mac
[tg_youtube video_id=”5lO_WMernnw”]
Install Node.js on Windows
[tg_youtube video_id=”2iAZli1OJpg”]
Install and configure editing for React
In this video, I show you how to install and configure Sublime Text and then configure it for editing React JavaScript files.
[tg_youtube video_id=”6SWexaFOQlA”]
What is React?
I am still learning React, but at its core, it is a JavaScript library that simplifies the development of rich, interactive websites. An engineer at Facebook created Node, and ultimately it was submitted to the open source community. Today, Node is in active use at Facebook and Instagram. Another powerful feature of React (and why I became so interested) is because you can also build React Native user interfaces that run on iOS, Android, and Microsoft’s UWP (Universal Windows Platform).
Note: To use React, you will use other technologies like Babel and Redux. In the videos, I will show you how to set up your environment to support these as well.
What is Node (and npm)?
Node (well, technically Node.js) is a JavaScript runtime that allows you to test your projects. I liken Node to a web server. You create your React (or Angular, or other JavaScript) application, type a command line and voila! You have a web server to test your app.
Node includes a technology called npm (or node package manager). Think of npm as an open-source app store for JavaScript developers. You can install anything from little helper tools to full-scale development solutions like Facebook’s React, or Google’s Angular.
If you are a Windows programmer, think of Node as IIS server and think of npm as a NuGet package manager.
What is Editing?
When you write a software application, you typically use an IDE (or integrated development environment) like Visual Studio, Xcode, or Eclipse. Those IDEs usually provide a rich and graphical environment that allows you to build your software application. Unfortunately, these IDEs just do not offer a rich user interface designer.
There is a slew of free or paid code-editing apps out there for developing JavaScript applications, including Microsoft’s Visual Studio Code, Atom, and Notepad++, just to name a few.
What makes many of these editors unique from, say, Notepad in Windows or TextEdit on the Mac, are the massive number of plugins that improve your software development workflow. Modern text editors now offer the ability to install plugins that extend the editor’s original capabilities. For example, Sublime Text does not support JavaScript with React out of the box, but Microsoft provides a package you can install to add that functionality. You can also install themes to changes text colors, snippets that let you scaffold entire code blocks, and much more.
Having traversed so much content on the web, I learned very quickly that it is much easier to follow what other people are doing if you use their same tools. Nearly every YouTube video, blog post, or training course I view use Sublime as their text editor. It is for that reason I will show you how to set up and configure Sublime, but you should find a text editor that works best for you.
Now would be a good time for me to tell you that Sublime is a paid application. Neither TechGenix nor myself receive compensation from the Sublime developer for the creation of this article or associated videos.
With your computer set up, you should be able to get started coding and learning! Please be aware this rabbit hole goes pretty deep. Every single day, I am learning something new, find another tool to install, another plugin to use, or a tweak I want to make, so what I show you in the videos is just the beginning of your journey.
Photo credit: Pixabay
