share with a non-tech craftor, that they can create a react app

12/23/20


tell a friend to make a react app

Part 1: Create a website in 4-ish minutes!

1) Download this thing called “Node.js”. It’s a language plus package manager that lets your computer know how to talk to the online package mall

Click the one that says “LTS” (aka it has Long Term Support )

https://nodejs.org/en/

2) Run the installer you just downloaded

WINDOWS 3) Go to start menu; search for and open the app “Command Prompt” MAC 3) Using spotlight, Search for and open the program “Terminal”

4) Copy and paste the below commands. Run each by pressing enter. Wait until stuff stops happening before entering the next one. If it doesn’t work, Google stuff, but if you don’t precisely understand what happened, then consult with a friend / the person who sent you this. Running commands in Terminal has the potential to have large impacts, and sometimes people even share snippets as jokes. Eg: https://www.howtogeek.com/125157/8-deadly-commands-you-should-never-run-on-linux/

npx create-react-app myFirstApp

Explanation: use my package manager called “npx” (which you installed in step 1) to run the package called “create-react-app”, while for the option, input “myFirstApp”, which in this case will be used by this program to name your new app

cd myFirstApp Explanation: “cd” (change directory/ folder) to the newly created folder, which should be called “myFirstApp” (since that’s what we asked for in the first command)

npm run start Explanation: use my package manager called “npm” (basically the same thing as npx, just has slightly different functionality when you use diff commands) to “run” the command called “start” (which is an expected command for this kind of app, and it will know to launch it

It should automatically open the site for you! If it doesn’t, you can go to http://localhost:3000 using your internet browser. It’s not actually on the Internet (it’s host(ed) local(ly)), like describing where a party is hosted. In this case, the party is just running somewhere on your computer, and your browser will know where to go to find it.

Part 2: Put your name on it

Since code is just characters written down in a special pre-agreed order, that amounts to meaning something (much like we agree on English words to each mean something), all we need to “write and edit code” is a text editor, not too far from Google Docs or Microsoft Word. But of course there are IDEs (https://en.wikipedia.org/wiki/Integrated_development_environment) specifically made for writing code and also doing other things with it (compiling, testing, sharing, etc.)

You can download a popular one here:

https://code.visualstudio.com/download

Then, you can use it to open folders. The folder we made in part 1 is located at:

~/myFirstApp