Jumping head first into React is more than I ever realized. It’s just a JavaScript (JS) library. A small one at that, especially compared to it’s competitor, Angular. React is less than 200k, Angular over 500k, both minified sizes. Therefore it must be simple…not exactly…Point being there is far more to learn than a small library even if you are an expert JavaScripter. If you’ve never worked with “building” a single page application then you have a lot to learn. For starters, there’s the library/framework to learn. Granted the authors of these have starter kits that make getting started very simple. However, if you are like me and crave the need to know “How Things Work” you soon find there is A Lot that makes a good single page application get built and work well.

What I’d like to do with this series is take you on a little journey. I’d like to give you an idea of what I’ve gone through to learn React and what has ultimately become learning “All Things Front-End”. Well it wont be quite All the things, there are just too many… but I will cover the pieces required to ensure you will have a sound and solid single page application built with React and what I used for all the pieces.

My previous posts go into some rough detail about creating a website with 4 pages ( home, front-end development, blog, and about). This was done with only the classic Front-end techs, HTMLand CSS. That’s right no JS . So, if you even have a little JS experience then you’ll be ahead, but not much. If you’ve never used JS then you have even more to learn. But don’t get discouraged, like I said even the seasoned JavaScripter will have a lot to learn if they’ve never worked on a new single page app tech stack. And let’s be real, if you do anything Front-End you are having to constantly learn and learn some more.

So, going from only needing to know 2 technologies to create a 4 page website we are about to move on to learning [number of logos from slides], and there are so many more you could choose from and learn. Has my point been driven home yet? The Front-End is far more complex than it has ever been. There is a greater need for highly skilled developers to build these single page applications. No longer can we depend on our back-end developers to slap a little JS in their JSPs to make the Front-end do what they want. Keep in mind though, if you are building websites for clients depending on their needs you very well could get away with just HTML and CSS. However, if your client has other needs then the benefits of a single page application could set them up for success, and you. Start simple then add the complexity if and when it is required. Don’t start with over engineering a site, that will be more difficult to maintain.

Now that I’ve completed my tangent regarding the complexities our new Front-End single page apps require let’s get started!

First and foremost you need Node.js. You can download this for free, and by the way, everything required to build a single page application is completely free. What is Node.js? I’m glad you asked.

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

So, what in the world does that mean…basically it’s what makes the JS world go round. Without it things would not be nearly as easy. Packaged within Node.js is NPM which is Node Package Manager, you will become very familiar with this. NPM is used to retrieve the hundreds of JS packages that others have created and kindly shared with the world.

npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.

Why solve problems that others have solved, use and learn from others. Don’t forget to give back when you can too. It’s what makes the NPM ecosystem so amazing. Now that we have Node.js and NPM we can really get started. Oh, one other thing required is something to edit files in. You probably already have one, even if it’s just notepad, that works. However, a few that are tailored for front-end development are VSCode, Atom, Brackets, Sublime and many others. Personally I like VSCode. There is a very active development team maintaining it and making improvements all the time. It’s easy to add extensions and there are a lot already built. Like I said everything you need is free and there is no exception here. Now that we have a code editor and Node.js we can begin! Join me again soon for next steps, getting started with React – Setting Up Our Development Environment.