Skip to main content

Command Palette

Search for a command to run...

What to do before deploying a React App for Absolute Beginners - Part 1

Updated
1 min readView as Markdown
What to do before deploying a React App for Absolute Beginners - Part 1
D

My journey as a self-taught developer began with a burning curiosity. Growing up in Uganda, where resources were scarce, I couldn't afford a formal education. Instead, I relied on handwritten notes from friends and online tutorials. As time went on, I got good at building websites for local businesses, each project proving my self-taught skills. But my dream of joining a major tech company seemed unreachable. Rejections piled up, all due to my academic background and self-doubt crept in. Then, a turning point. A friend I had shared my knowledge with landed a job at a promising startup in Kampala. He believed in me and recommended me. For five years now, I've been working remotely for that very company. They saw the potential in passionate, self-taught talent. But my heart is saddened by the millions in Uganda and the world facing the same challenges. That's why I am sharing my knowledge on this platform and other social platforms. My expertise is in PHP, JavaScript, WordPress, Technical Writing and business leadership. If you want to learn from me or collaborate, consider to follow or send me a on X.com/davidofug

Let's look at how to change the default Favicon Icons, Title, and Description text before we deploy the React App.

1/3 THE ICON

  1. Use the Graphic software of your choice to design an icon.
  2. Export the icon in 4 files with the following details.
  3. logo.svg
  4. favicon.ico → 64px by 64px
  5. logo192.png → 192px by 192px
  6. logo512.png → 512px by 512px
  7. Replace the logo.svg in the src directory of your React Project with the one you've just made and exported.
  8. Navigate to the public directory of your React project and replace the respective files with the favicon, logo192, and the logo512 you've just designed and exported.

2/3 THE TITLE TEXT

  1. Open the index.html file found in the public directory
  2. Edit the text in the Title tag.
  3. Edit the text in the content attribute of the meta tag which has a description attribute.

3/3 THE DESCRIPTION TEXT

  1. Open the manifest.json file
  2. Edit the text in the short_name and name keys

The End

Found this helpful? Share, Like, and comment. Take a minute to follow me on Twitter @davidofug

More from this blog

David Wampamba

30 posts

David is a passionate teens and youths trainer, STEAM evangelist, employment advocate, entrepreneur and Acumen Fellow whose mission is empower young generations through tech, creation of jobs and enhancing education.