## 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](https://nodejs.org/en/download/). That being said, I recommend you to use [nvm](https://github.com/nvm-sh/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 `. --- *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](https://learnxinyminutes.com/docs/javascript/)* --- # 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 `. 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 `, 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](https://docs.npmjs.com/files/package.json). # 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](https://expressjs.com/). 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](https://github.com/facebook/create-react-app) 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

Hey {this.props.name}, let's count.
Counter: {this.state.counter}

} } Once you have this component, you can call it later in any place on your app with ``. 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.

Testing GitDuck with vim, Go, tmux.

More coding videos

Desktop and editor setup for Rust development

[Android] App rating and review libraries: configuring when to prompt

Hello world Node.js + React

C++ Live Coding, Session 23, Dancing Links, Part 2

12 Hour Coding Livestream - Creating an Online Game with Python

Adding chat to GitDuck with GetStream.io