Node.js

• popular open-source and cross-platform JavaScript runtime environment.
• based on the fast V8 engine (the one that powers Google Chrome).
• single threaded with a mechanism to do async and I/O operations in a non-blocking way.
• huge number of libraries and big community.
• you don't need to learn a new language if you're coming from front-end web development (you probably already know JavaScript).

You can install Node.js from its official page. That being said, I recommend you to use nvm (Node Version Manager) to get Node.js because it's very easy to change between Node.js versions.

You can run Node.js apps with node <file-location>.

I linked a very basic and small cheatsheet of JavaScript in the code-linking section of this video so you can have a look of basic syntax of JavaScript as well of some examples of Async code in JavaScript, which are important fundamental key parts of Node.js. Check a more advanced one here

npm

It is the default package manager for Node.js. npm hosts a big online database of different repositories or libraries that you can easily install and use in your project.

• A project has listed its dependencies in the package.json file, if you run npm install, npm will download and install all the necessary dependencies in the node_modules folder.
• You can install a new package by running npm install <package-name>. You can add the --save flag to add the package name to your package.json dependencies list.
• You can define runnable tasks in your package.json and run them with npm run <task-name>, for example you can have tasks like npm run build, npm run dev, npm run deploy without having to remember the full commands.

The package.json has many more attributes that you can use, you can check them on npm's page.

Let's build a simple Node.js server with Express

Let's build a simple server that accepts and answers HTTP requests.

We'll leverage the power of npm and we'll use a popular Node.js web-framework called Express.

We run npm init -y to initialize an empty package.json in your repository. Then we can simply install Express library with npm install express --save.

A simple hello world example with Express would be:

const express = require('express') // imports express
const app = express() // initialize express
const port = 3000 // initializes the port variable

// defines the handler for the `GET /` route is to send the string 'Hello World!'
app.get('/', (req, res) => res.send('Hello World!'))

// listens to the port defined in the `port` variable and prints a message when we start listening
app.listen(, () => console.log(`Example app listening on port ${port}!`))

Save that code in app.js and run it with node app.js. You should see "Example app listening on port 3000!" in your terminal, and if you navigate with your browser to http://localhost:3000, you should be able to see "Hello World!".

That's it, you already have a running HTTP server in a few lines of code.

Let's make a very simple REST API for getting blog entries for our React app. (Code linked in the video)

React

React is a powerful declarative component-based library for building user interfaces. You can build your own components that manage their own state. React will efficiently update and render them when their data/state changes.

create-react-app

CRA is one of the easiest ways to bootstrap and create a new React app. You can do that by just executing npx create-react-app my-new-app.

React example

You can build in React a simple Counter component like that:

class Counter extends React.Component {
  state = {
    counter: 0
  }

  add = () => this.setState({counter: this.state.counter + 1})
  substract = () => this.setState({counter: this.state.counter - 1})

  render () {
    return <div>
      Hey {this.props.name}, let's count.
      <br/>
      Counter: {this.state.counter}
      <br/>
      <button onClick={this.add}>Add</button>
      <button onClick={this.substract}>Substract</button>
    </div>
  }
}

Once you have this component, you can call it later in any place on your app with <Counter name="David" />. React will efficiently update or re-render you component whenever its props or state change.

Check the video and the attached code for a more complete example where we fetch data from the Node.js API we did earlier from our React app.