Forem: Andrew

Animations in React with Framer Motion 😎🍿

Andrew — Sat, 10 Feb 2024 13:50:34 +0000

In this tutorial, I'll show you how to create animations in react, with framer motion.

(In case you'd like to watch, rather than read. ...and see the animations 😅)

To start off, you'll want to install framer motion by running npm install framer-motion.

Thank you for coming to my TedTalk.

Then, in any file we want to use it, we can import { motion } from 'framer-motion'.

The motion component is the core of Framer Motion. Think of it as an html element or svg with easy and powerful animation capabilities 😎.

You can replace an existing html element, like an image tag <img src='...' />, with <motion.img src='...' />. So instead of img, it's now motion.img.

Then, you can add the animate property, which will take an object. Inside that object, you can add things like scale, and rotate.

<motion.img animate={{scale: 2, rotate: 360}} src='...' />

By default, though, this will animate very fast. So we can add a transition prop, then set the duration.

<motion.img animate={{scale: 2, rotate: 360}} 
transition={{duration: 2}} src='...' />

We can also have it scale up, then scale back down, by setting scale to an array with multiple numbers.

<motion.img animate={{scale: [1, 2, 1], rotate: 360}} 
transition={{duration: 2}} src='...' />

By the way, I have a video below so you can see these animations 😅

We can also move it along the x axis by giving it 1 number or multiple numbers.

<motion.img 

animate={
   { scale: [1, 2, 1], 
     rotate: 360,
     x: [0, 100, -100, 0]
   }
} 
transition={{duration: 2}}

/>

To animate on hover, just use whileHover instead of animate 👍.

<motion.img 

whileHover={
   { scale: [1, 2, 1], 
     rotate: 360,
     x: [0, 100, -100, 0]
   }
} 
transition={{duration: 2}}

/>

To animate on scroll, just use whileInView instead of animate 👍.

<motion.button whileHover={{scale: 1.2}}>
          Button Text
</motion.button>

Hope it helps! Happy coding!

Creating a React, Node, and Express App

Andrew — Wed, 02 Aug 2023 23:09:54 +0000

In this article, I'll show you how to create a project with React, Node, and Express. We'll get the frontend (React) and backend (Node/Express) communicating with each other.

If you want a video version, you can watch my YouTube video here:

I've been creating this MusicTalk app on my YouTube channel. It's an app like Facebook, but people talk about music. There's a lot of good lessons that I think will also be helpful blog posts. So let's get into it!

Project Setup

So, the way we’re going to set this up is we’ll make a directory, or folder, which will be our project. Then we’ll put 2 folders inside of our project. One folder will be a react project - that’ll be our frontend. We’ll call that folder client.

Then, we’ll create another folder called server. This will be a Node and Express backend where we write our server side code and interact with our database. (I'll do a follow up article where we connect to MySQL)

So in our terminal, we'll create our project folder by running mkdir MusicTalk. Then, we'll change directory into that folder/project by running cd MusicTalk.

React Project - Client

Next, we'll create our React project - our frontend - which we'll just call client. So we'll run, npx create-react-app client.

Node/Express Project - Server

Then, we'll create the folder which will be our Node/Express app. So while we're still in our MusicTalk folder, we'll create another folder by running mkdir server.

Let's go into our server folder by running cd server.

We’ll run npm init to create a node application and create a package.json file where our dependencies will live. So any packages we add to our Node application, will be added to the package.json file.

It'll give us some prompts regarding the package.json file. Most people just hit Enter and pass through all of those.

One thing to note is the entry point prompt. It should say index.js by default. Some people will change that to app.js, but most leave it as index.js. When our express app is setup, we'll start the server by running node then the file name. So node index.js.

Open Project in Code Editor

We can now change directory and go back a level to the root of our project with cd ... Once there, we can open up our code editor by running code ..

Not able to open VS Code with code .? Check out this video here.

In VS Code, we'll see 2 folders: client and server. Client is our React app. Server is our Node app. Inside our Node app, we see our package.json.

Install and Setup Express

Now we’ll want to install Express in our Node app. Express is a backend Node framework for creating API's. Basically for creating a server and ways to communicate with your server. We’ll change directory back into the server by running cd server, then we'll run npm install express. Express will now be in our package.json file.

We can now create an index.js file - which is our entry point for our Node app.

In this file, we can create a constant called express and run require(’express’). Then make a const called app and call the express function.

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

We can console.log that express app and get a look at all the different methods we get with it. When we run node index.js in our terminal after we finish setting up our index.js file, the console.log will show in our terminal. There are some http methods (app.get, app.post, etc), a connect method (app.connect - we’ll use that to connect to our database in a future article).

There’s also the listen method. we’ll use that to start the server and have it listen for requests on a specific port. Since React runs on port 3000 by default, let's use port 8080.

app.listen(8080, () => {
      console.log('server listening on port 8080')
})

So, after all that, your index.js file should look like this:

//index.js
const express = require('express');
const app = express();

console.log(app)

app.listen(8080, () => {
      console.log('server listening on port 8080')
})

In the terminal, we can run node index.js (the name of our file) and we'll see a very big console.log of our express app, and that our server is listening on port 8080! 🎉

We can quit and shut the server down with Control + C.

Adding a Route

Now let's add a route! We'll use our Express app to listen for a get request at path '/' (root/homepage).

We can replace the console.log(app) with:

app.get('/', (req, res) => {
      res.send('Hello from our server!')
})

The (req, res) => {} is a callback function, where we have access to the request and the response as parameters.

We're using the send method on the response object to send a string when the '/' path is hit. You could also send a boolean, or data. Typically this would be a JSON object or an array of data.

Add Axios for API Calls

Now, we can go to our client side React application and install axios. Then use that to make requests to our backend and start sending data from our backend to our frontend.

In VS Code, we can use a separate terminal (Control + backtick to open a terminal). Make sure we're in our client folder - our React app. Then run npm install axios.

Make API Call to Our Backend

In our App.js, we can remove any of the default content or styles that we don't want and create our own.

My App.js ended up looking like this:

//App.js

import axios from 'axios';
import './App.css';

//data will be the string we send from our server
const apiCall = () => {
  axios.get('http://localhost:8080').then((data) => {
    //this console.log will be in our frontend console
    console.log(data)
  })
}

function App() {
  return (
    <div className="App">
      <header className="App-header">

        <button onClick={apiCall}>Make API Call</button>

      </header>
    </div>
  );
}

But wait! We'll get the dreaded CORS error 😭.

So in our server terminal, we'll add the cors package with npm install cors.

In our index.js, we'll require and use that. Your index.js will look like this:

//index.js

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors())

app.get('/', (req, res) => {
      res.send('Hello from our server!')
})

app.listen(8080, () => {
      console.log('server listening on port 8080')
})

Nooow if we run our React app with npm run start in the client terminal (after starting our server back up in the server terminal), and click our button...

It works!

Conclusion

So to wrap up this very lengthy blog post 😅 (but hopefully helpful!), we:

Created a Node/Express app for our backend
Configured our server
Created a React app for our frontend
Made an API call to our server
Sent data from our backend to our frontend

Hope this helped!

Thank you for reading and happy coding!

ChatGPT for Developers (React Example)

Andrew — Fri, 23 Jun 2023 02:10:46 +0000

I have to show you something that is so amazing with ChatGPT.

Sooo, I admit I was pretty late to really using ChatGPT. I of course knew the power and the potential of it, but I kind of asked it a couple random questions that I didn’t really need answers to at that time. I was just trying it out. But the other day, I had a pretty complex and specific coding situation, and omg.

So first, let me show you the basic idea of how ChatGPT can be so effective. You can ask it something like:

How do I make an API call with axios in React?

It'll give you a combination of steps, code snippets, and descriptions to explain those code snippets.

You can see the full response here.

You can also ask it something more complex like:

How do I use Redux Toolkit in React?

It gave me a great response that explained pretty much everything in my YouTube video on Redux Toolkit 😍😭.

I was even able to ask it to explain further and show me an example of dispatching an action 🤯.

You can see the full response here.

Lastly, the part that blew my mind. I was stuck on a complex implementation that was very specific to my particular situation. I was shocked that I could ask ChatGPT about it and actually get a fantastic answer that was exactly what I needed.

It's so specific, that I have to give you some context first - bare with me a second..

I've been building out this MusicTalk app on my YouTube channel (playlist here). It's an app like Facebook, but people talk about music. I'm displaying a list of usernames that a user can add as a friend. When they click the username, we make an API call to our server/database and, if successful, replace that username with the word "Added!"

I walk through the code in my YouTube video (linked below), but I'm:

iterating over an array of usernames
passing in the index number
calling an addFriend function that gets the username and index number
making an api call

If that api call is successful I...

add the index number to an array called "added"
compare that array of index numbers with the index numbers of the original array of usernames and those index numbers
if they're the same, I render "Added!" if not, I render the username

Anyone still reading after that? 🧐

Like I said.. pretty complex and very specific. So this is what I asked ChatGPT:

In React, I have an array of usernames displayed on the site. When I click a username, I want to run a function and then change the text from the username, to say "Added!" instead. This "Added!" text should show for any username in the list where the function was ran successfully after clicking on the username(s). How should I implement this dynamic list of usernames?

I just said function instead of API call - essentially the same thing. And it gave the best answer ever! It fully walked me through a great solution for my very specific problem. It even made that function an API call 🤯.

As you can see, it even comments in the code to explain things right inside the code. Amazing.

You can see the full response here.

I highly recommend keeping this in mind as you continue on your coding journey. It's like having a senior developer available on chat from anywhere at anytime.

Feel free to check out the video version of this below, too.

Thanks for reading and happy hacking!

-Andrew

React Custom Hook - useFetch

Andrew — Sat, 24 Apr 2021 14:21:04 +0000

I have a YouTube video if you'd rather watch 😎🍿.

Why useFetch?

It's very common to fetch data when the user goes to a certain page. We also use common logic when fetching that data.

There's also a fair amount of boilerplate/logic that crowds our components and it's not very DRY (Don't Repeat Yourself).

These are all good reasons to make a custom hook. We can outsource that boilerplate/logic into one separate file. That file will hold the function (hook) which will return for us what we need to use in our components.

The Old Way

In this example, I'll use the useState hook to keep track of the loading state, any error, and the data. I'll use the useEffect hook to run all of that code. Lastly, I'm using axios to fetch the data, and a cancel token to cancel any unfinished requests that we don't need anymore.

//App.js
import { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [quote, setQuote] = useState(null);
  const [loading, setLoading] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
      setLoading('loading...')
      setQuote(null);
      setError(null);
      const source = axios.CancelToken.source();
      axios.get('https://api.quotable.io/random', { cancelToken: source.token })
      .then(res => {
          setLoading(false);
          setQuote(res.data.content);
      })
      .catch(err => {
          setLoading(false)
          setError('An error occurred. Awkward..')
      })
      return () => {
          source.cancel();
      }
  }, [])

  return (
    <div className="App">
      <button onClick={fetchQuote}>Fetch Quote</button>
      { loading && <p>{loading}</p> }
      { quote && <p>"{quote}"</p> }
      { error && <p>{error}</p> }
    </div>
  )
}

export default App;

That's a lot of code. Let's move most of it.

The New Way

We'll create another file called useFetch.js. You want to start the name of a custom hook with "use" so that React knows to treat it like a hook.

Let's copy over the import statements, all 3 useStates, and the useEffect function.

//useFetch.js
import { useState, useEffect } from 'react';
import axios from 'axios';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
      setLoading('loading...')
      setData(null);
      setError(null);
      const source = axios.CancelToken.source();
      axios.get(url, { cancelToken: source.token })
      .then(res => {
          setLoading(false);
          //checking for multiple responses for more flexibility 
          //with the url we send in.
          res.data.content && setData(res.data.content);
          res.content && setData(res.content);
      })
      .catch(err => {
          setLoading(false)
          setError('An error occurred. Awkward..')
      })
      return () => {
          source.cancel();
      }
  }, [url])

  return { data, loading, error }

export default useFetch;

You may have noticed some changes. First of all, the function (which is our hook), is named useFetch. It receives a parameter which is the url we want to get data from.

We also changed setQuote to setData, making it more versatile. Notice that we also check for multiple responses to make it more flexible as well.

Lastly, our useFetch function (hook) returns our data, loading, and any error.

I put those in an object so we can use object destructuring when accessing those in our component. That way, the order doesn't matter when we destructure them, and we can rename them if we want. I'll show you that next.

Using useFetch in Our Component

So, back in our App component, we'll import our useFetch hook from useFetch.js, and pass in the url we want to fetch data from. We'll use object destructuring to access what we need. Lastly, we'll rename data to quote.

import useFetch from './useFetch';
import './App.css';

function App() {
  const { data: quote, loading, error } = useFetch('https://api.quotable.io/random')

  return (
    <div className="App">
      { loading && <p>{loading}</p> }
      { quote && <p>"{quote}"</p> }
      { error && <p>{error}</p> }
    </div>
  );
}

export default App;

Muuuuuch cleaner 😎.

Conclusion

Custom hooks are very useful for cleaning up your code. You can use React hooks inside of your custom hooks (they're all functions after all! 👍). You can encapsulate a lot of repetitive logic, then return what you need from the custom hook.

If you like learning about similar topics, feel free to check out my YouTube or Instagram.

Hope this helped somebody and thanks for reading!

-Andrew

React Hooks - useReducer

Andrew — Sun, 28 Mar 2021 17:23:02 +0000

I have a YouTube video where I go into more detail. I explain the reducer function in greater depth there as well.

What is it?

The useReducer hook is great to use if you need to handle more complex state.

If you're familiar with Redux, it's very similar to that, only you'd typically only use it for a component or two.

Complex state

Let's say you're fetching some data, and you want to display:

"loading..." while it's fetching
the data once you have it
or an error if there is one

You'll want all three of these to be in sync with each other. If you get the data, you want to make sure it's not loading and there's no error. If you get an error, it's not loading and there's no data.

This is a good use case for useReducer!

How to use it

We'll have to pass two things into the useReducer hook. A reducer, which we'll use to manage our state; and an initial state to start working off of.

Our initial state will be an object containing three keys: loading, data, and error.

Our reducer will listen for three different action types, and update the state accordingly. Those action types will be fetchDataStart, fetchDataSuccess, and fetchDataFail.

We'll put those in our file, but outside of the component:

//App.js
import React, { useReducer } from 'react';

const initialState = {
  loading: false,
  data: null,
  error: null
}

const reducer = (state, action) => {
  switch (action.type) {
    case 'fetchDataStart':
      return {
        ...state,
        loading: true,
        data: null,
        error: null
      }
    case 'fetchDataSuccess':
      return {
        ...state,
        loading: false,
        data: action.data,
        error: null
      }
    case 'fetchDataFail':
      return {
        ...state,
        loading: false,
        data: null,
        error: 'whoops =/'
      }
    default: return state
   }
}

const App = () => {
  return (
    <h1>App Component</h1>
  )
}

Notice we saved those under the constant variables: reducer and initialState. So we'll pass those into the useReducer hook.

const App = () => {
  useReducer(reducer, initialState);
  return (
    <h1>App Component</h1>
  )
}

The useReducer hook will return two things in an array: the state, and an action dispatcher to update the state.

We'll grab those with array destructuring, similar to state and setState with the useState hook.

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <h1>App Component</h1>
  )
}

Dispatching actions

Our useReducer hook is all setup. Now, let's use it!

We'll create a function for fetching data, and we'll dispatch different actions based on the state of that fetch request.

(Those actions are being checked for in our reducer via the switch statement and our case clauses.)

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const fetchData = () => {
     dispatch({type: 'fetchDataStart'})
     fetch('ourbackend.com/data')
     .then(res => {
        dispatch({
          type: 'fetchDataSuccess',
          data: res.data
        })
     })
     .catch(error => {
        dispatch({type: 'fetchDataFail'})
     })
   }
   return (
      <h1>App Component</h1>
   )
}

Accessing the state

Accessing the state is very easy. useReducer returned that in the array we destructured. We saved it to the constant variable, state.

That state (our initial state and the updated state) is an object. So we'll access the values right in our component like so:

  return (
     <h1>App Component</h1>
     <p>{state.loading}</p>
     <p>{state.data}</p>
     <p>{state.error}</p>
  )

Conclusion

The useReducer hook is extremely helpful when different states depend on each other.

As for bringing in Redux, I'll typically do that if there's complex state for the entire application. If it's only for a component or two, I'll use useReducer.

If you like learning about similar topics, feel free to check out my YouTube and Instagram.

Hope this helped somebody and thanks for reading!

-Andrew

React Hooks - useContext

Andrew — Thu, 25 Mar 2021 01:35:53 +0000

What is it?

The useContext hook is a great hook to use when you need to send props down through multiple, nested child components.

Instead of passing it through every single component on the way down, you can define it in the parent component. Then, bring it into the nested component where you need it, while bypassing the middle components you'd normally have to send it through.

Here's an example

Let's say you have an App component. Inside that App component, you have a Profile component. Inside the Profile component, you have a Greeting component.

So that's:

App --> Profile --> Greeting

Now, let's say you have a user in your App (parent) component, and you want to pass the user property into the Greeting (nested child) component.

Normally, you'd have to send that property through the Profile component, then into the Greeting component. Like so:

//App.js
const App = () => {
  let user = 'Shred Flanders';
  return <Profile user={user} />
}

//Profile.js
const Profile = props => {
 return <Greeting user={props.user}/>
}

//Greeting.js
const Greeting = props => {
  return `Welcome, {props.user}!`
}

Create a context

To start using useContext, you must first create a context. So, in our App (parent) component, we'll import createContext from React. Then, create a user context.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();

Note: we're exporting the UserContext so we can import it
into nested components later.

With that UserContext in place, we can wrap a provider around components, then consume the property in any child component.

So, we'll set that provider where we want it and pass it a property.

//App.js
import { createContext } from 'react'
export const UserContext = createContext();
const App = () => {
  let user = 'Shred Flanders';
  return (
  <UserContext.Provider value={user}>
    <Profile />
  </UserContext.Provider>
  )
}

Note that now, we're not sending the user property into Profile. We're sending it into the UserContext Provider via value={user}. We can then grab that value in any of the nested components.

Consume the context

To consume the value in any nested component, we have to import the useContext hook, and the context we want to use.

So in the Greeting component:

//Greeting.js
import { useContext } from 'react'
import { UserContext } from './App.js'

Then, we'll pass our UserContext into the useContext hook, letting the hook know which context we want to use.

const Greeting = props => {
  const user = useContext(UserContext);
}

The useContext will return the value that we sent into UserContext.Provider value={user}. We're saving it in the Greeting component to a constant variable, user.

Now, we're free to use that constant/value in our Greeting component.
(and we never had to touch the Profile component! 🎉)

const Greeting = props => {
  const user = useContext(UserContext);
  return `Welcome, {user}!`
}

Conclusion

The useContext hook is a very useful tool in React. It could be used for changing a theme and updating that theme in the different components it needs to. It prevents "prop drilling" like I've shown you here.

If you want a more visual example, check out my YouTube video here:

If you like learning about similar topics, feel free to check out my YouTube and Instagram.

Hope this helped somebody and thanks for reading!

-Andrew

React Hooks - useEffect

Andrew — Sat, 20 Mar 2021 19:52:55 +0000

What is useEffect?
How Do You Use It?
Controlling When useEffect is Called
The Dependency Array
Cleaning Up

What is useEffect?

If you're familiar with the lifecycle methods of class based components (componentDidMount, componentDidUpdate, etc..), the useEffect hook is basically all of those methods rolled up into one convenient function. If you're not familiar with those lifecycle methods, you're very lucky 😂 😭.

useEffect is a function that you can configure to run every time a component mounts.. or unmounts.. or only on the initial render.. You can reach out to a third party API, or your own backend to retrieve data. It's very powerful. It's also not as complicated as it may seem.

How Do You Use It?

You'll start off by importing it from React. Note that we have it inside curly braces because it's a named import.

import { useEffect } from 'react';

As stated before, it's a function. So you'll call that function.

useEffect()

You'll pass an anonymous function into that function as an argument. That's the code you want to run when useEffect is called.

useEffect(() => {
    // executable code here.
    // grab data, update state, etc..
})

Controlling When useEffect is Called

So we're passing a function into useEffect. As of now, that function (and useEffect itself) will be called everytime the component re-renders. If there's an input and the user is typing, that component will re-render on every keystroke.

If you're reaching out to your backend to retrieve some data, you probably don't want to do that on every keystroke.

That's where the dependency array comes in.

The Dependency Array

The function we're sending into useEffect is an argument. It can also take a second argument, which is a dependency array.

useEffect(() => {
    // this function is an argument
}, [/* this array is, too */])

If you put a property in this array, useEffect will only be called when that property changes.

Except for the initial render. useEffect will always run at least once; on the initial render.

So let's say you have some state. We'll use a counter example. If you want useEffect to run only when that count property changes, you'll put count in the dependency array.

useEffect(() => {
    console.log(count)
}, [count])

Now let's say you want useEffect to run on the initial render, but not on any re-render. No matter what properties change. For that, you'd pass an empty dependency array.

useEffect(() => {
    console.log(count)
}, [])

Here, you're essentially telling useEffect to run when these properties change. Then listing no properties.

Cleaning Up

You know that function that we send into another function? Well, that function can return something...

...another function.

Ok hear me out.

That function you can return, is a clean up function. That's where you would unsubscribe to a subscription or clear a setTimeout that you don't need anymore.

For example, if we have a setTimeout that's supposed to be called after 9 seconds, and the user is typing, (causing a bunch of re-renders), we don't want a bunch of 9 second timers going on in the background. So we'll return a function which is a clearTimeout.

useEffect(() => {
    const timer = setTimeout(() => {
        console.log('time!')
    }, 9000)
    return () => {
        clearTimeout(timer)
    }
}, [])

Now, any time that component re-renders, (or if the user goes to a different page, and the timer isn't needed anymore), the asynchronous timeout will not be using memory in the background.

Conclusion

useEffect is a very powerful part of React. It may seem like a lot at first, but once you understand it and use it a couple times, it's not so bad.

I have a YouTube video with a few different examples. I also show exactly when useEffect is being called in different situations, and how to have more control over it.

Hope this helped somebody and thank you for reading!

-Andrew

React Hooks - useState

Andrew — Sun, 14 Mar 2021 14:16:40 +0000

What is useState?

The useState hook is the most popular and widely used hook in React. It lets you have state in a functional component. Before the useState hook came out, (React 16.8 🎉), you could only have state in class based components 😭.

How do you use it?

useState is a function.

useState()

That function returns 2 things: the state, and a function to update that state. You typically access those through array destructuring.

const [state, setState] = useState()

You can pass that function an initial state.

const [state, setState] = useState(initialState)

That initial state can be anything: a number, a boolean, a string... It can even be a function that returns the initial state.

💡 That function would only be called on the
initial render. Not every time the state is updated or on
every re-render. So having a more expensive function here is
ok if you need it.

We'll start off with the classic counter example. So the initial state will be 0.

const [state, setState] = useState(0)

It's good practice to name the state (and setState) something that refers to that state. Since we're using our state as a counter, we'll name our state count (and our updater function setCount).

const [count, setCount] = useState(0)

Accessing the State

We can access our state in our component simply by using the const variable we assigned to our state. In our case, count.

<p>Our count number is: {count}</p>

This will render:

Updating the State

Now we'll create a button that when clicked, it will update the state.

<button onClick={() => setCount(count + 1)}>count it!</button>

In this example, we're inserting the code to update the state right inside setCount (count + 1). We could also call a function that has more logic, then update the state in that function.

const countHandler = () => {
  // more logic could go here 
  //(reach out to an api, more calculations, etc..)
  const updatedCount = count + 1;
  setCount(updatedCount)
}
<button onClick={countHandler}>count it!</button>

This would have the same behavior.

Conclusion

useState can be used for all sorts of things: grabbing a user's input from a form, toggling a boolean for a mobile sidebar, or even having an array of blog posts you retrieved from a database and mapping over them to display each post.

I go over a lot more examples in my YouTube video about useState here, and I focus specifically on form handling here.

Hope this helped someone and thank you for reading!

-Andrew