Forem: Nicholas Lane

Day 3: React useRef hook to scroll to HTML elements.

Nicholas Lane — Wed, 20 Jul 2022 08:58:36 +0000

Hi Guys - This is a quick one today.

I recently finished the main page of my portfolio

And I realised.. I couldn't figure out how to get each segment to scroll nicely using the classic

window.scrollTo(xCor,yCor)

This was because accounting for responsiveness, giving co-ords would make it so our desired scroll to location wasn't quite correct.

So from a quick google, it seems that React has a really nice hook for you to use in times like this- useRef().

For those who don't know - useRef() - is React hook that allows you to store a reference to an object that persists through renders.

This means it can be used for various things such as:

Directly accessing the DOM (from which I understand we should leave up to React the majority of the time)
store a mutable value that does not cause re-renders when updated
Store the previous state.

The thing we are focusing on though is referring to DOM elements directly.

How to use useRef to scroll to an element.

I made this example using the always trusty code sandbox.

Right, so say I have a div that I want to scroll to, because that contains my about me section.

As a test bed let's just make an example in our App.js component.
Set up your two divs:

import "./styles.css";
import React from "react";
export default function App() {

  return (
    <div>
      <div className="mainSection">
        <h1>My Main Section</h1>
      </div>
      <div className="mainSection">
        <h1>My About me section</h1>
      </div>
    </div>
  );
}

And your styles.css file:

.mainSection {
  height: 100vh;
}

Here we are just making each div have a height of the full viewport so that it's off screen, and we can test this functionality easily.

Now we have to import the hook:

import React, {useRef} from 'react';

You have to declare your ref like so:

export default function App() {
  const aboutMeRef = useRef(null);
//...Rest of code

Ok so now we need to attach this ref to an actual HTML element, here we are going to attach it to our second div that contains the heading 'My About me section':

<div className="mainSection" ref={aboutMeRef}>
    <h1>My About me section</h1>
</div>

The last thing we need to do is the logic to scroll to our element.
So, we are going to add a simple button with a onClick event listener.

In our first div after our h1 tag let's add our button:

<div className="mainSection">
    <h1>My Main Section</h1>
    <button onClick={buttonHandler}>Go to About Me</button>
</div>

Now of course, we need our buttonHandler function that will use our ref, and tell our browser to scroll to it, we are also going to add a smooth behavior to help emphasise that it is working.

function buttonHandler(){
    aboutMeRef.current.scrollIntoView({
        behavior: "smooth" 
    });
}

Ok and with that, let's see if it works.

Ok, awesome, it works well.

As usual - If any more experienced devs, or the many people who know better want to make some comments or hints in the comments, I am always open to learning!

Day 2: How I Integrated an Express JS Server with my React App.

Nicholas Lane — Tue, 05 Jul 2022 09:57:37 +0000

Before we begin a word of warning:
This was the first time I've done this, and there will be better solutions, so take this with a pinch of salt - and perhaps see this is an opportunity to correct me!

Ok, So, Why did I do this?

My ultimate goal on my web app project was to consume a simple api, that had url endpoints and spat back some JSON at me.
I wanted to take this data and display it in a grid along with any other features I wished to implement later.

The issue is this API wouldn't allow me to use the Fetch API on my react-app, so I realised I needed to create my own server.
The only way I knew how is via the node js framework Express.

For those interested, and for completeness the error I was getting was related to CORS (Cross-Origin Resource Sharing) which for the unanointed is a "way for a server to indicate which "origin" other than it's own from which a browser should permit loading resources" .
I know, it's complicated, and I would be lying if I said I understood this 100% but for the curious: check out the MDN docs on this subject.

Now onto the good stuff...

How to integrate your express server with your react app.

Ok Let's break this down into sections to make it readable:

Setup your express server.
Setup your react project.
Test
Add a proxy attribute to your package.json.

1. Setup your express server

If you've never done this before, here's how:
Using terminal or Hyper Terminal for Windows,
Create a new folder in your desired location and create your javascript server file (typically named index.js or app.js):

mkdir my-desired-folder
cd /my-desired-folder
touch app.js

Then run your npm init and hit enter until it finishes (make sure it recognised your app.js / server file in the npm init sequence:

npm init

...
Press ^C at any time to quit.
package name: (express-test)
version: (1.0.0)
description:
entry point: (app.js)

Note: the above is show where the name of your server file should appear.

Next install the required packages, I used "express", "body-parser", "cors" and "nodemon".
Nodemon is a nice tool for automatically restarting your server as your code gets updated (huge time saver).

npm install express body-parser cors nodemon

Ok, time for the code.
Open up your file and test your server is by writing the following code:

const express = require('express');
const https = require('https');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

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

app.listen(3001, () => {
  console.log("Server Started on Port 3001");
});

NOTE: I have used port 3001 for this example, because React apps will typically get started on port 3000. Also I know that importis now the typical way of including modules as it's ES6 and futureproof, but the express docs still use require.

Let's start our server back in our terminal:

nodemon app.js

If this has all gone well, navigate in your browser to localhost:3001 and you should see:

Ok now that we have our server up and running, let's make a simple GET route for our React-App to use:

app.get('/getData', (req, res) => {
  const toSend = {
    name: "Nick",
    favouriteFood: "Kimchi",
    age: 29
  };
  res.json(toSend);
});

This will send to whatever entity issues a GET request to the route "http://localhost:3001/getData", the object "toSend".

2. Setup your react project.

Ok, so now once you've started set up your server, it's time to create our React project that will accept this.

As usual issue these commands to create a react project:

npx create-react-app my-app
cd my-app
npm start

Then once this is done, strip out the unneeded boilerplate that comes with react and replace your index.js with:

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from "./components/App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App/>);

And then we will set up our App.jsx file.
We are using two hooks here, useState which is a basic hook to manage state across our component, here we are using useState to update the name in our h1 tag.

We are also using the useEffect hook which which is a hook that allow the use of side effects:
"Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects." according to the React Docs.

NOTE: Be careful with useEffect:
You don't have to use useEffect, if you are declaring a function that will respond to an event, such as onClick or onSubmit, you can then just wrap your fetch in a regular function, or use some external library (react-query etc).
It's important also to note:

useEffect isn't something you should necessarily use with the fetching of data, it's generally used for other things such as synchronization, ( ie making sure your client side data matches the server side data) and not really for simple data fetches or API requests. We are only using it because it's the simplest set up for our mini project. Finally, you need to specify a "Dependency" with the useEffect hook, which is denoted with an array, otherwise it will run on every render. If we would declare simply, "[]" as our dependency, it would run on mount, so this is what we'll do.- for mount, see the docs for more.

import React, { useState, useEffect } from "react";

function App() {
  const [name, setName] = useState("");

  useEffect(() => {
    fetch("http://localhost:3001/getData")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setName(data.name);
      });
  }, []);
  return <h1>HELLO {name}</h1>;
}

export default App;

3. Test
Ok, let's test this!
Make sure everything is saved and running, if not open two terminal tabs and run each of these in a different tab:
For the server (In express server project folder):

nodemon app.js

For the client (In react project folder):

npm start

Navigate to your react-app in localhost:3000 (or whatever port you are using) and hit refresh, the page should look like this:

Ok Whew! We did it, we have officially issued a get request from our React app to our express server, in case it wasn't obvious the {name} in our react file was set by the JSON object we sent from our server:

  const toSend = {
    name: "Nick",
    favouriteFood: "Kimchi",
    age: 29
  };

Oh, but there's one more thing before we finish.

4. Add a proxy attribute to your package.json.

In your REACT APP's package.json, append a proxy like this:

//...
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy":"https://localhost:3001"
}

This allows you to call:

 fetch("/getData")

instead of

 fetch("http://localhost:3001/getData")

It's a cool trick, but it can get weird and bug as sometimes something goes wrong with the cache in the react project files.

We are finished.
I am sorry for the length of this post, it's been a mission to get my head around all of this so I wanted to document it mainly for myself!

By the way - if you want to issue POST requests, and send information to the server and receive a response, that is totally possible and actually really useful.

If you got this far, thanks for reading and have a great day!

Day 1: A beginners take on JS scope. Var vs Let vs Const.

Nicholas Lane — Sun, 03 Jul 2022 01:27:44 +0000

I am a beginner.

So I have recently begun on my challenge to find a web dev role by the end of the year.
Along side this goal comes all the new and exciting things you have to learn, and one of the things that is incredibly important is understanding ES6 in all it's glory.

So, what is the difference between Var, Let and Const?

There are a fair few differences and use cases for each, and all are important but to properly answer this question you need to understand the concept of "scope".

A brief aside about scope.

Without getting into too much detail, scope is where variables in your code can be "accessed" or "referenced".

The three types of scope that are important here though, are "Global", "Functional", and "Block" scope.

Block scope is anything that is surrounded by { } curly braces, more specifically an if/while/for statement might be where this arises:

{
  let x = 2;
}
if(1 > 2){
  const y = 5;
}

Both of the above are examples of block scope.

Functional scope or Local Scope (in JavaScript they are essentially the same) is when you declare your variables inside a function that cannot be accessed outside said function:

function add(x, y){
  var z = x + y;
  return z;
}
function subtract(x,y){
  let z = x - y;
  return y;
}
function multiply(x,y){
  const z = x * y;
  return y;
}
//z cannot be accessed here.

All of the three types of variable here seem to act the same as they cannot be accessed outside of the functions due to Functional/Local scope.

Last but not least is global scope which , as you can imagine, can be referenced anywhere your code as it is declared outside a function or block.

let x = 0;
// x can be accessed here
function myFunction() {
  x++;
// x can also be accessed here
}

Now that we understand what scope in JavaScript looks like, perhaps we should get back on track.

Hurry up and tell me how Var, Let and Const are different!

Ok ok!

Well with the introduction of Let and Const in ES6, block scoping became a concern and also a benefit to using these keywords.
Quick Note:
To declare a variable is to create it with a keyword:

var x; 
let y;

To define a variable is to give it a value:

var x = 1;
let y = 2;
const x = 3;

So in one sentence each:

var (the og variable) can be declared and defined as many times as you wish.

let can be declared a single time but defined as many times as you wish, it also has block scoping.

const can be declared and defined ONLY once, but it also has block scoping and MUST be defined and declared at the same time.

Easy eh?

And now for the details

Var is now not the variable you should declare as a default instinct because of it's global scope. Scoping is important for good practice code, so as your code gets bigger and longer and more complex, you might run into some redeclaration problems:

var x = 0;
function myFunction(){
  var x = 2;
  //Do this and that
}

This is ALLOWED but it should be avoided as all costs, because it is confusing and generally leads to bad practice. Nowadays it is recommended to use the let keyword in var's place.

Let as mentioned previously has block scope, but can be redefined as many times as you wish:

let x = 0;
x = 5;
x = 10;
//This is ok but...

let y = 0;
let y = 5;
//This is NOT ok

and now for block scope:

if(check_something){
  let y = 5;
  console.log(y);
  //Expected: 5;
}
console.log(y);
//Expected: undefined.

Finally, const is the most interesting keyword because it has block scoping, must be declared and defined at the same time, and cannot be redeclared or redefined at any point, but it still has so many use cases.
const should be used when _defining arrays and objects because each value inside the array is not in fact a constant but the reference to the const ITSELF is constant.
Some examples:

const names = ["Nick", "Emma", "Dan"];
names = ["Tim", "Tom", "Tam"] 
//ERROR: this is a redefine so will not work.
const ages = [20, 30, 40];
const ages = [50, 60, 50];
//ERROR: this is a Redeclaration so will not work.

However, using an object and an array as an example these both are ok:

const names = ["Nick", "Emma", "Dan"];
names[0] = "Not Nick";
const user = {name:"Nick, age:"29", hobby: "board games"};
user.age = 30;
//All valid code.

A final note is that const, like let, is block scoped but I won't bore you with more examples.

That's all folks.

This has been me, as a beginner attempting to revise and explain briefly what scoping, and the three keywords var, let and const mean as simply as possible.
I am sure I've missed so many interesting points, but hey maybe next time!
For more details, read MDN or W3Schools as always ;).