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
cdthen your<folder name>and hit Enter
- Type
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 innpm 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>thensrcfolder and clickindex.js. - The
index.jsfile contains any component you will declare that would be rendered to therootat thepublic/index.html
- Next, from the
srcfolder again. This time, clickApp.js. Inside the file, this is where you can enter HTML tags that will be rendered through theindex.js. You may addHello, World!inside a<p>or paragraph tag inside the<div>tag.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.