Hello world Node.js + React
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 runnpm install
, npm will download and install all the necessary dependencies in thenode_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 yourpackage.json
dependencies list. - You can define runnable tasks in your
package.json
and run them withnpm run <task-name>
, for example you can have tasks likenpm 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.