Sign in


Photo by Mike van den Bos on Unsplash

In this tutorial, you will learn how to make a scroll progress bar indicator using React Hooks😃.

  1. Using your terminal create a new react app using npx create-react-app progressscrollindicator
  2. Once it's created, start it up using. npm start
  3. Open your App.js file /src folder
  4. replace all content within your div classname="App"> with this code

5. Open your App.css file and add the following CSS to it

6. Now the basic styling is completed we will now work on the functionality. import useEffect and useState from react and create a useState function inside of the function App(). …


Photo by Florian Olivo on Unsplash

In this tutorial, you will learn how to receive multiple API requests in one function using Axios😃. We will be using two NBA APIs. one API gets the image of a player, the other gets the name.

Setup:

  1. Create a new folder and call it Multiple_Requests
  2. Within the Multiple_Requests folder create a new react app using npx create-react-app multiplerequests
  3. Once the app is installed, within the master directory of the app, install and Axios, by doing npm axios. Inside of your src/index.js file

4. We will work within the src/App.js file so go ahead and open it up. …


Photo by Amanda Jones on Unsplash

In this tutorial, you will learn how to show dynamic profile cards while fetching API data using Axios😃 video tutorial: https://www.youtube.com/watch?v=1EMz54RsNI4

Setup:

  1. Create a new folder and call it Profile Card
  2. Within the Profile Card folder create a new react app using npx create-react-app profilecard
  3. Once the app is installed, within the master directory of the app, install react-bootstrap and Axios, by doing npm axios. Inside of your src/index.js file

4. We will work within the src/App.js file so go ahead and open it up. Startup the app using npm start

5. Go ahead and clear all the information within the…


Photo by Mike van den Bos on Unsplash

In this tutorial, you will learn how to show a loading screen while fetching API data in React using Axios. 😃 video tutorial: https://www.youtube.com/watch?v=scVRfoTEctc

Setup:

  1. Create a new folder and call it loading-screen
  2. Within the loading-screen folder create a new react app using npx create-react-app loadingscreen
  3. Once the app is installed, within the master directory of the app install react-bootstrap and Axios, by doing npm install react-bootstrap bootstrap axios. Inside of your src/index.js file
import 'bootstrap/dist/css/bootstrap.min.css';

4. We will work within the src/App.js file so go ahead and open it up. Startup the app using npm start

5. Go ahead and…


Photo by Markus Winkler on Unsplash

In this tutorial, you will learn how to make REST API data and convert it to be readable in a ChartJS chart. 😃

Setup:

  1. In your VSCode Terminal, type “npx create-react-app chartjsapiapp”
  2. If you successfully created your app go into the app’s main src directory, and do “npm start” to start the app.
  3. Once started open up your App.js file and convert the function app to a functional component
  4. Now create a new folder in the src folder called “components” and create a new file in components called Chart.js. src/components/Chart.js. Add this code into the ChartComponent function.

5. We…

Arslan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store