Create a Simple React.js Component with Backed Node.js API
Summary
Becoming a full-stack web developer can involve a steep learning curve since, at the very least, you'll have to learn how to code in three domains: 1) the persistence layer, 2) the application layer, which provides the logic, and 3) the view layer for rendering interfaces that the user can interact with. In most cases, each of these layers will be implemented in a different programming language, thus increasing the amount of material you'll have to learn. However, with Javascript, you can easily use a single programming language that encompasses all three layers making the learning experience a little bit more manageable.
In this guide, we'll take a look at how to build a simple backend server using Javascript Node.js as the application layer and React.js as the view layer that interacts with the backend to simulate the full stack experience.
Setting up the Server
The server application you'll be creating will be a mock API endpoint that returns JSON data. Start off by creating a Javascript file called app.js with the following content:
1var http = require('http');
2
3var hostname = '127.0.0.1';
4var port = 3000;
5
6var app = http.createServer(function(req, res) {
7 res.setHeader('Content-Type', 'application/json');
8
9 res.end(
10 JSON.stringify({
11 firstName: "John",
12 lastName: "Doe"
13 })
14 );
15 });
16
17app.listen(port, hostname);Using plain Javascript and Node.js, you can easily create a server application server that acts as an endpoint. The line res.setHeader('Content-Type', 'application/json') forces the response to return data as JSON. The function res.end() accepts a string version of a JSON object that contains a firstName and a lastName, which will be the payload of this endpoint. The server application is started by running the line app.listen(port, hostname), whose parameters are set to the localhost and port number 3000 of the host machine.
Running the Server
Issue the following command in your terminal to start running the server:
1$ node app.jsUsing your browser, visit the URL http://localhost:3000 and you should see the JSON object being returned with the following form:
1{
2 "firstName": "John",
3 "lastName": "Doe"
4}Once you've verified that your mock endpoint is working, perform the same action, but this time programmatically using a React.js frontend component.
Creating the React.js Frontend
Start off by creating a React component called PersonComponent with the following code:
1import React from 'react';
2import $ from 'jquery';
3
4export default class PersonComponent extends React.Component {
5 constructor(props) {
6 super(props);
7
8 this.state = {
9 firstName: "",
10 lastName: ""
11 }
12 }
13
14 render() {
15 return (
16 <div>
17 <h1>{this.state.firstName} {this.state.LastName}</h1>
18 </div>
19 );
20 }
21}This vanilla component will simply display the firstName and lastName state values. Initially, these values are set as an empty string.
Next, create a method that fetches data from your backend API, whose endpoint is http://localhost:3000. Create the following fetch method in your component:
1fetch() {
2 var context = this;
3
4 $.ajax({
5 url: 'http://localhost:3000',
6 method: 'GET',
7 success: function(response) {
8 context.setState({
9 firstName: response.firstName,
10 lastName: response.lastName
11 });
12 }
13 });
14}You first create a reference context whose value is this, referring to the instance of your component. This will be used later on in the logic of the success function after the code has made a successful call to the API backend. context will then invoke setState and update the React.js component's state values coming from response, which in turn is the JSON object that was returned by the API.
The last thing to do is invoke fetch automatically when the component is first mounted. To do so, override the React.js component method componentDidMount() with the following logic:
1componentDidMount() {
2 this.fetch();
3}All that will do is call fetch once the component has been successfully mounted. In turn, fetch will interact with the API, update the state, and force a re-render of the view with the updated values, thus completing the cycle.
Overall Code
The final code will look like the following:
Server Application
1var http = require('http');
2
3var hostname = '127.0.0.1';
4var port = 3000;
5
6var app = http.createServer(function(req, res) {
7 res.setHeader('Content-Type', 'application/json');
8
9 res.end(
10 JSON.stringify({
11 firstName: "John",
12 lastName: "Doe"
13 })
14 );
15 });
16
17app.listen(port, hostname);ReactJS Frontend
1import React from 'react';
2import $ from 'jquery';
3
4export default class PersonComponent extends React.Component {
5 constructor(props) {
6 super(props);
7
8 this.state = {
9 firstName: "",
10 lastName: ""
11 }
12 }
13
14 componentDidMount() {
15 this.fetch();
16 }
17
18 fetch() {
19 var context = this;
20
21 $.ajax({
22 url: 'http://localhost:3000',
23 method: 'GET',
24 success: function(response) {
25 context.setState({
26 firstName: response.firstName,
27 lastName: response.lastName
28 });
29 }
30 });
31 }
32
33 render() {
34 return (
35 <div>
36 <h1>{this.state.firstName} {this.state.LastName}</h1>
37 </div>
38 );
39 }
40}Conclusion
In this guide, you've seen how to use a single programming language to implement both the backend and frontend components of your app. This shortens the learning curve since you only have to focus on learning one programming language instead of a variety of languages that deal with different layers of your system. In most cases, this can prove to be a much more agile approach to building applications since you can devote your time to going deeper with Javascript and understanding its more advanced intricacies while still being able to contribute to all parts of your tech stack. Adding a persistence layer will be easier as well since you just have to look for an abstraction layer, also written in Javascript, that provides API calls for the underlying database.
For any questions or concerns, or if you simply want to chat about programming in general, hit me up @happyalampay!