React: Hello, World!

React: Hello, World!

As soon I got out of my comfort-zone for nth years, I decided to take on a journey of trying out new and emerging technologies to keep me updated and add skills to my current skill set. I know it would take time for me to learn these, but hey, it would be fun and practice makes perfect.

Hello, World! - A one of the first program used by software developers like me in learning new codes.

  • To start with React, create a folder and open via Visual Code: image.png
  • Inside Hello-World folder, click New Folder and name it frontend: image.png image.png
  • Next, open up Terminal by clicking Terminal -> New Terminal image.png
  • After opening up the Terminal, type cd then your <folder name> and hit Enter image.png
  • Type npx create-react-app <your folder name> to begin "installing" the items needed for our first react project: image.png
  • Now that our react project has been created, type in cd <your folder name> then hit Enter. Inside the folder, type in npm start to start our frontend server. image.png At the same time, you can check your browser if react project was created successfully: image.png
  • You may be wondering, where can I enter my first "Hello, World!"?
  • Going back to Visual Studio Code (without closing the browser), expand <your app folder> then src folder and click index.js.
  • The index.js file contains any component you will declare that would be rendered to the root at the public/index.html image.png
  • Next, from the src folder again. This time, click App.js. Inside the file, this is where you can enter HTML tags that will be rendered through the index.js. You may add Hello, World! inside a <p> or paragraph tag inside the <div> tag. Ctrl+S to save and check your browser if changes were applied successfully. image.png image.png

And there you have it! Your first React Project 🤩 Remember to save any changes you have made for you to see it on the browser. Sometimes if the browser did not automatically refreshed itself, just hit F5 for a page refresh.