ReactJs Quick Starter Part Two

1) So now I have a folder called ‘Richard’s projects’ on my desktop. We need to open up NodeJS terminal and we’re going to first type cd desktop so we’re at our desktop and then cd *your name’s* react projects*

2) So now in the NodeJs terminal you can see in the picture to the left (or below if you’re on mobile/tablet) we need to type npx create-react-app hello and NodeJs is going to build us our project in *Your names’s* react projects folder.

3) So now type  ‘cd hello’ and then ‘npm start’ and you should see something similar to the image to the left (Or again below if you’re on mobile or tablet) in your browser at http://localhost:3000/

4) So now we need to open up our project in VS Code and we’re going to navigate to a file called app.js, just ignore everything else in there for now. You’ll find it under hello- src-app.js. See the below image.

5) All we’re going to do is change the line where it says ‘Learn React’ to say ‘Hello World’ and if you have your browser open still you’ll see the result instantly (and below) and that concludes this getting started in react tutorial.

ReactJs quick starter part one (Estimated time to complete: 10 minutes)

 

 

Before we go ahead with this, if you know and are bored of doing Hello World tutorials then this isn’t the tutorial for you. This is for the 10 year old school boy referred to in the ‘About Richard’ section. Don’t get me wrong, the harder stuff is coming but I’m easing my self into this tutorial stuff. All of this assumes you are using Windows 10.

1) So to get started we need two things. NodeJs and Visual Studio Code. So lets first get NodeJS up and running on our machine.

2) Go to 

https://nodejs.org/en/  and double click on the left hand button which is going to install the latest stable version on your machine.

3) You should now see screens similar to below. The screen on the left will show you the button you have just clicked on and the screen on the right will show you the installer.

4) Okay, so now we have NodeJS on our machine so the next thing we’re going to do is install Visual Studio Code available at https://code.visualstudio.com/ and click on the green download button. It’s very similar to how we just installed Node. Again see the images for the button you’ve just clicked and the right for the installer you should be seeing.

5) So we’ve got everything we now need on our machine. We need to create a folder on our desktop which you can call *your name’s* react projects. Don’t call it ‘your name’ obviously – call it what your name actually is 🙂