React: Hello, World!
·Jan 1, 2021·
3 min read
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:
- Inside Hello-World folder, click New Folder and name it frontend:
- Next, open up Terminal by clicking Terminal -> New Terminal
- After opening up the Terminal, type
<folder name>and hit Enter
npx create-react-app <your folder name>to begin "installing" the items needed for our first react project:
- Now that our react project has been created, type in
cd <your folder name>then hit Enter. Inside the folder, type in
npm startto start our frontend server. At the same time, you can check your browser if react project was created successfully:
- 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
srcfolder and click
index.jsfile contains any component you will declare that would be rendered to the
- Next, from the
srcfolder 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
Ctrl+Sto save and check your browser if changes were applied successfully.
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.