Setting the Stage: ExpressJS, ReactJS, and SQL 2018

Before diving into the main subject matter, it's important to understand the key players in this tutorial: ExpressJS, ReactJS, and SQL 2018. ExpressJS is a framework built on top of Node.js that simplifies backend development. ReactJS, on the other hand, is a JavaScript library for building user interfaces. SQL 2018 is the latest version of SQL Server, a relational database management system (RDBMS) developed by Microsoft.

In simpler terms, think of these three as the foundations to a house. ExpressJS represents the foundational structure, ReactJS is the stylish interior, and SQL 2018 is the solid basement where all the essential data is stored.

Creating the Backend with ExpressJS

Our first step is to create the backend of our application using ExpressJS. This is where our users' data will be processed and stored. Imagine it as the engine room of a ship, where all the heavy-duty operations take place.

Here’s a basic ExpressJS server setup:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

This code tells our server to respond with "Hello World!" when someone tries to access the homepage ('/') of our application.

Building the Frontend with ReactJS

The next step is building the frontend with ReactJS. This is the part of the application that users directly interact with, like the control room of our ship.

Here's a basic ReactJS component:

import React from 'react';

class SignIn extends React.Component {
  render() {
    return (
      <div>
        <h1>Sign In</h1>
        <form>
          <label>
            Username:
            <input type="text" name="username" />
          </label>
          <label>
            Password:
            <input type="password" name="password" />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default SignIn;

This code creates a Sign In form where users can enter their username and password.

Integrating SQL 2018

Now, let's integrate SQL 2018 to store user data. You can think of SQL 2018 as the ship's logbook where all important information is recorded.

Here's how you might set up a basic connection to a SQL 2018 database:

const sql = require('mssql');

const config = {
  user: 'username',
  password: 'password',
  server: 'localhost',
  database: 'MyDatabase'
};

sql.connect(config).then(pool => {
  return pool.request().query('select * from mytable')
}).then(result => {
  console.log(result)
}).catch(err => {
  console.error(err)
});

This code establishes a connection to a database named 'MyDatabase' and fetches all records from a table named 'mytable'.

Linking Frontend and Backend

The next step in our voyage is to link the frontend and backend. This is like making sure the control room can communicate with the engine room.

Here's how you might send a POST request from the ReactJS frontend to the ExpressJS backend when the form is submitted:

import React from 'react';
import axios from 'axios';

class SignIn extends React.Component {
  handleSubmit = event => {
    event.preventDefault();
    const user = {
      username: event.target.username.value,
      password: event.target.password.value
    };

    axios.post(`http://localhost:3000`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    // ...rest of the code
  }
}

export default SignIn;

And here's how you might handle the POST request in the ExpressJS backend:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());

app.post('/', (req, res) => {
  console.log(req.body.user);
  res.send('Received!');
});

// ...rest of the code

Conclusion: The Voyage's End

We've reached the end of our voyage! Remember, like a ship, your application won't sail on its first day. It takes constant tuning and adjustment to make sure everything works together smoothly.

By now, you should have a basic understanding of how to allow users to sign in with ExpressJS and ReactJS, backed by SQL 2018. As you continue to learn and explore, you'll discover that the possibilities are as vast as the open sea!