Installing React


Next section: The Basics

Installing React

Ok, so you’re probably wanting to get started. First thing to do is install NodeJS. What’s NodeJS? According to their website, NodeJS is “a JavaScript runtime built on Chrome’s V8 JavaScript engine”. Gotta be honest, I don’t know what that means; good news is, you don’t need to know either. Basically it's what tells React which file to start with, where to find things, and ... probably some other stuff. Just go to the download page and get whichever version of the installer works for your machine. Then double-click on the download, and follow the instructions.

Once that’s done, (perhaps surprisingly) you have everything you need to create your first React app. Just open a terminal, command window, PowerShell or whatever you have. Navigate to wherever you want to store your app code (it doesn't have to be an empty directory, as the first command is going to create a directory for your project).

Type this and hit Enter:

    npx create-react-app my-app

NOTE: You can replace ‘my-app’ with whatever name you want to give your app. Stick to small letters and hyphens, though (there are rules about how you’re allowed to name React apps created in this way – if you violate the rules, worst case scenario is that you’ll get an error message saying something like ‘Capital letters not allowed’ and have to rerun the command with a different name).

Now wait a bit while your terminal does Stuff. You might get the odd prompt saying things like “Need to install packages – ok to proceed?”. Hit ‘y’ to all of these. Once it finishes (and you see a command prompt again), do this (obviously change 'my-app' to whatever you called your app):

    cd my-app;
    npm start

cd just changes directory into my-app; npm start is what kicks off the process of building and running the app.

Wait a few seconds and you should see the message “Compiled successfully!”. A few seconds after that, your browser should open and your new React app will appear (if it doesn't, or if you accidentally close it, open a browser and go to localhost:3000 and you should see it).

And that's it... Congratulations, you have created a React app! Well done, very good, give yourself 5 stars.  The next post will take a look at what exactly it is that we've produced.

Comments

Post a Comment