Next, you need NPM, if you don't have that head over to NodeJS official download site and download Node for your OS, run the setup and NPM should come with it.
npm install --save-dev snowpack
.js to the end of the filename? Or is there something else? Yes, there is a different procedure.
To create a react project, first navigate to the folder you want to create the project. This can be done manually or by using
cd in the Terminal (or Command Prompt, if Windows).
'cd' means change directory.
I am using Linux Ubuntu, and have navigated to a folder in Documents called 'React'. If you are using windows, then you will be using Command Prompt, or alternatively, you can just head to your Files and open terminal(pardon me window users) from there.
In the terminal, run the command:
npx create-snowpack-app <react-snowpack> --template @snowpack/app-template-minimal, where you change to the name of your project (Your project name shouldn't have capital letters). It will take a while depending on your PC and connection, it will automatically create a folder with all the basic required things to start.
Then run the command(trust me, the commands usage will reduce):
cd <your-project-name>, where is the name of your project. Enter command:
cd <project-name> to navigate to project directory, then the command:
npm install. If you are using vscode as your code editor, simply type:
code . to automatically open your project in VSCode, another way to open your project is by going to your Files and selecting: open in , or opening your code editor, selecting Open Folder, then selecting your project.
Let's run some final commands to round up the preparation, run the command:
npm install react react-dom --save to install the final pieces of React needed. After that, run:
mv index.js index.jsx, this will change the index.js to index.jsx (This is only done for using packages like snowpack). Run these commands one after the other
mkdir src mkdir public mv index.jsx src/index.jsx mv index.html public/index.html mv index.css public/index.css
The first one creates a directory called
src, the second one create a directory called
mkdir means make directory), the third one moves
index.jsx to the
src folder, the fourth one moves
index.html to the
public folder, and the fifth one does the same for the
Now, we have setup the basic of our React project, we still have a teeny-weeny left to do, so let's get right to it.
Okay, that's all the main things. Now, you might ask, why do I need to go through this stress, when there is a shorter way with just one or two commands? Well, the answer is, when you keep building, and keep compiling your code (from
js), it becomes hellish as you upscale your app each time you save and need to preview the app (which is, a lot of times) and packages like this, saves you a lot of time.
Okay, can we start coding now? Yes and no, let's touch the basics, run our app and end it here. Head into your HTML file and change your code as below(Don't forget to add the
div tag above the script tag!):
And that's it, run the command:
npm run start and it should open in the browser!
In the Part 2, we will explain the things we did in detail and our first code. Till next time!