Blog

React.js Tutorial

React Itself – A React.js Tutorial

This series aims to be a React.js tutorial that compliments Pete Hunt‘s how to where he recommends people start by learning React Itself.

I think the biggest challenge people make when learning React is they get lost in the tooling and ecosystem. Before you’ve even built your first React component you’re plunged into learning Webpack, ES6, React Router or Developer Tools.

This React.js tutorial is different.

A Simple Start

All code in this series is available on my personal Github. Let’s start with a basic HTML file.

How to run this tutorial?

This file can be copy pasted into an index.html file anywhere on your computer and opened directly with a web browser of your choosing! No need for any tools or even your terminal.

React.js Tutorial Breakdown

I left some comments in the above code, but let’s break it all down!

A Mounting Point

This sample file is a basic HTML document until we get to line 7. On that line we have an empty div with an id of root. The id can be anything you want, it just has to match the code on line 18 where we attach our component.

If you’ve ever worked with a JavaScript framework like Backbone, you’re probably used to the concept of creating an empty div as the mounting point for your application.

Dependencies

Next, on line 10 we start including our dependencies. For this minimal react tutorial, all we need is Facebook’s react and react-dom libraries. The main React library has been separated out so it can be used with non web (no DOM) applications such as iOS and Android.

Out Application

Line 16 begins the meat of our application. All React applications have at least one ReactDOM.render() call. That method takes two parameters.

  1. A React component, representing your application.
  2. An HTML selector, your mount point.

For this simple beginning app, we make a component that is a single element (an h1) with the value of “Our First React.js Component!”. In later posts we’ll build more complex components. It’s also worth noting we could have just as easily written:

This is also where you may have seen JSX used to write markup. JSX will not be part of this tutorial series as we are just focusing on learning React.js.

Stay tuned for a lot more posts in this series and let me know in the comments what is / isn’t working!

make a gif

Make a GIF with LICEcap

This blog post will show you how to make a GIF with LICEcap.

Often times I’ll be working on some JavaScript or DevTools project and I’ll want to tweet or write a blog post. I find nothing really captures the experience like an animated GIF.

Making a GIF

Make a GIF part 1 – downloading LICEcap

LICEcap requires that you are running either Windows or Mac and a decent amount of free RAM. Just head on over to http://www.cockos.com/licecap/ and find the Downloads section at the bottom. After downloading you can open it and see something like this:

Make a GIF with LICEcap

Make a GIF part 2 – configuring LICEcap

Before we make a GIF, you’ll want to configure the app. Now that we have it installed, you can configure everything you need by hitting the record button. This will prompt you with a config page like this:

LICEcap config

The last thing you’ll want to configure before you make a gif is the size of the recording area. This too is really simple with LICEcap, just open the app and drag the window to whatever size and position you’d like. After that, go ahead and start recording!

You’ll notice two options while recording:

  1. Pause (allowing you to continue recording the same GIF later)
  2. Stop (saving the file and allowing you to start again)

No go ahead and make some GIFs! They can be easily uploaded to your blog or Twitter.

Make a GIF on Linux

The last thing I wanted to mention is that unfortunately LICEcap doesn’t support Linux users. If you are on Linux you should check out Silentcast which is a free alternative and looks pretty cool!

Silentcast

Flexbox

Flexbox Resources

I recently devoured all the resources I could find online in trying to learn Flexbox. I figured you all might appreciate a summary of my favorite resources!

1. The official Flexbox specification

Flexbox Specification Page

If you’re the type of person who likes to read specifications (I am not!) then look no further than the W3 CSS Flexible Box Layout Specification! To be quite honest I’m not sure what all is in here because I really didn’t read the spec too much. But I figured it was worth noting!

2. What The FlexBox!?

What The FlexBox!?

This free video course by Wes Bos was a really great introduction! It’s a 20-video course where you’ll learn all the basics and then use FlexBox to build things like a mobile app layout, a pricing grid and a booking form! It’ll definitely get you some good hands on practice.

3. Flexbox Froggy

Flexbox Froggy

Who doesn’t love games!? This fun, interactive game will teach you a lot about the more subtle features of Flexbox. There are 24 total lessons in which you’ll have to write CSS to help Froggy and his friends get to their lily pads!

4. A Complete Guide to Flexbox

A Complete Guide to Flexbox

The CSS-Tricks post has it all! As the title states, it provides a complete guide to Flexbox. It includes a background on the specification, a nice introduction to the terminology, fully illustrated examples of each property and finally some great examples! This is a good one to bookmark as you’ll likely come back to reference it.

5. Crafting Twelve-Column Layouts with Flexbox

Crafting Twelve-Column Layouts with Flexbox

This post by Landon Schropp has some really cool examples of building 12 column layouts and shows some cool examples! It’s nice because it helps you understand how flexbox is used to create real world applications. He is also the author of a book, “Unraveling Flexbox”, which I haven’t read but looks awesome!

Unraveling Flexbox

6. Flexbox Defense

Flexbox Defense

Another awesome game! This is a tower defense game where you’ll have to use CSS to prevent enemies from getting past your defenses. I really like this interactive style as it helps really cement the concepts I learn in videos and blog posts!

Did I miss one?

Please let me know if I did! I want to have a list of all the best resources. If you find one that works for you, chances are it’ll work for others so please share it in the comments and I’ll add it to the list!

Hopefully whether you prefer to learn from specifications, videos, blog posts or games you were able to find a resource that works for you. Good luck!

express

Express sendFile TypeError

Express sendFile is usually one of the first errors you’ll get when developing Express applications. The most common error you’ll run into looks something like this:

TypeError: path must be absolute or specify root to res.sendFile

Sample app with Express sendFile bug

If you npm install express and try running that code you’ll get an error like:

Express sendFile error

The problem here is that you need to do one of two things before using Express sendFile.

  1. Specify root
  2. Use an absolute path

1. Specify Root

You can pass in a root variable to the sendFile function and use the __dirname global to specify your applications root directory like this:

2. Use an absolute path

The other approach you can take is just passing in an absolute path to sendFile instead of a relative one. If you want, you can use __dirname again like this:

* Remember to add a slash before the file name like in the example above!

npm install and uninstall

npm install and npm uninstall

For those not familiar, npm is the Node Package Manager. While not the only package manager available, it is the one that ships with Node by default. Technically, npm is both a registry (list of packages) and a command line tool (used to npm install and npm uninstall those packages).

The command line tool has a ton of functionality, which I cover in my free introduction to npm course. Today, we’re just going to focus on two of those commands, npm install and npm uninstall.

Initializing an npm project

In the next two sections we’re going to talk about the multiple ways you can install and uninstall packages with npm’s command line tool. For some of the approaches (all except installing/uninstalling globally) you’ll need a package.json file in your project.

If you’re not familiar with package.json files, check out my free course! (plug plug plug) but the gist of it is that you’ll need to run an npm init in your project like so:

npm install

There are three ways you can install software using npm’s command line tool. They are:

1. Install a package globally, so that you can use it at any time from the command line:

2. Install a package locally, saving it to your project’s package.json:

3. Install package locally, marking it as a “dev dependency”

Dev Dependencies

Installing something as a dev dependency means that it is necessary for building the app, but is not to be deployed to production. A good example of this would be a build tool like gulp or grunt, which you need to build your assets but you don’t need to install on your production servers.

In action, the difference between –save and –save-dev is that packages installed with the –save-dev flag will not be installed when a user runs:

However, it will still be installed on a regular install.

npm uninstall

npm has a well designed API, so all of the uninstall commands map directly to their install counterparts! Here are the appropriate examples:

1. Uninstall a package globally, so that you can no longer use it from the command line:

2. Uninstall a package locally, removing it from your project’s package.json:

3. Uninstall package locally, removing it as a “dev dependency”

Node.js Logo

Best ways to update Node js

Node.js moves quickly. This can make keeping up with the latest and greatest version difficult. Fortunately, there are a ton of great tools that make it a breeze to update Node js!

Installing Node.js

If this is your first time installing Node, I highly recommend installing directly from nodejs.org. They have a nice, easy, one-click installer for Mac, Windows and Linux.

Update Node JS From Official Page

If this is the approach you’ve taken to download Node, you can update by simply returning to the site and downloading the latest version. Running this installer will override your current version of Node.

Managing Multiple Node.js Verisons

At some point in your Node career, you’ll end up needing something more powerful than just downloading binary files from the Node website. Eventually you’ll find yourself needing to switch between versions, test out bleeding edge features or you’ll just want a better tool for staying up to date.

Option 1 – Node Version Manager

nvm is my personal favorite. It’s a simple bash script that allows you to:

  • Install multiple Node versions
  • Update Node.js to the latest version
  • Control your system’s default version of Node
  • List all existing versions

You can install nvm from your terminal with one simple line!

Then you can start using it with commands like these.

See what versions are installed:

See what versions are available to install:

Install a version:

Set the new version as your default:

Option 2 – n

n is a very similar package to nvm, allowing you to manage multiple versions of node.js.

You have to install it with npm (the Node version manager) which means you have to already have Node installed. So, the simplest thing to do would be install Node from their website (which installs npm) and then run:

Then you can:

See what versions are installed:

Install the latest release:

Install the latest stable release:

Install or active a new version:

Lots of ways to update Node JS

No matter which tool you choose, managing Node.js versions and staying up to date shouldn’t be a problem!

express

Learning the Node JS Express framework

Express was one of the first major players on the Node.js framework scene and it continues to be one of the best Node.js frameworks today.

Let’s learn the Node js Express framework together by building a small example app!

1. Setting up a new Express project

Let’s open up our terminal and create a new folder. Then we’ll initialize npm and install express!

2. Node JS Express “Hello World”

Now that we have the project set up, let’s create a new file named server.js and put the following inside it:

This will load in the Express module, start a new server on port 3000 (you can change that to whatever you want!), create a new default “route” and return the words “Hello World!” when you go to it! We can test this by running:

From the terminal! Now go to http://localhost:3000 and you should see “Hello World!” on a blank white screen.

3. Adding Another Route

You can add as many routes as you’d like by adding more blocks like:

Now you can visit http://localhost:3000/foobar and see a different message!

4. Static Files

Eventually while learning the Node JS Express framework you’ll want to serve “static files”. These will likely be CSS and JavaScript files. Now, you could make an individual route for each file (style.css, script.js, etc) but that would get messy. So with Express.js you can do something like this:

Now you can put CSS, JavaScript and images in your “public” folder and access them from your app.

5. Sending Files

In our previous examples, we’ve been just sending down the text “Hello World!” to our users. Eventually we’ll need something more complex, like an HTML document. Let’s create a new file called index.html and put something like this inside.

This file still says “Hello World” but it will also request js/script.js and css/style.css — so let’s create those!

The last thing we need to do is change server.js so it’s sending the HTML file instead of the “Hello World!” text. Change it to look something like this:

If you want to have some more fun, put an alert in script.js and give the body a background color in style.css so you know it’s working!

Now you should have a basic Express.js application!

javascript

Best JavaScript tutorials for beginners

There are a lot of great JavaScript resources out there. Here are some of the best JavaScript tutorials for beginners!

1. JavaScript.com

JavaScript tutorials for beginners at javascript.com

A while ago the folks at CodeSchool purchased the javascript.com domain and turned it into a cool free resource! Getting started with their interactive tutorial is a great way to learn the language! After that check out their resources page for a bunch of great free stuff!

JavaScript tutorial resources

2. Code Academy

CodeAcademy JavaScript courses

Now that you’ve wet your feet with the language, it’s time to write a lot of code! Writing code is the best way to learn and Code Academy’s JavaScript courses provide great tutorials for beginners to learn JavaScript!

3. Free Books

Free JavaScript ebooks

Now that you’ve mastered the basics, head over to JSbooks for a great list of all the free JavaScript books available. You can even sort by JavaScript books that have good tutorials for beginners!

The books in this list will definitely take you from beginner to intermediate level. After you’ve read a few of these you’ll be ready for working on any application.

Nodecasts Courses

You should also check out some of the free JavaScript and Node.js courses on this website 🙂

We have courses that will help you learn Node.js, stay up to date with the latest JavaScript features and master developer tools!

Like I said, there are a ton of resources for learning JavaScript but I think these are the best JavaScript tutorials for beginners and people just getting started.

If you’re looking for JavaScript resources for intermediate and advanced users, check out this curated list of essential JavaScript links!