Let's Dive into React! (Pt. 1)
Tags: react, javascript, beginners
Published: 2021-06-05 16:52:49

  React is one of the most popular JavaScript Libraries out there and is growing in terms of recognition. If you just wanted to get started and don't know where to start, you've come to the right place.

  Let's dive into the prerequisites of React. First thing, JavaScript is essential, a **must**. If you haven't learned it, you will have a ton of issues understanding React. There are some great courses out there on Udemy, freecodecamp and YouTube that discusses React in detail. ES6 in JavaScript is essential, you will meet concepts used in ES6 a lot here in React. You have learned that already? Good. Let's move on.

  Next, you need NPM, if you don't have that head over to [NodeJS official download site](https://nodejs.org/en/download) and download Node for your OS, run the setup and NPM should come with it.

  We are also going to be using Snowpack, a JavaScript build tool that takes advantage of the browser support for ESM so that you can build and ship individual files to the browser. In short, we are going the fast way from the start and skipping the old, slow way that tutorials still come with. To install, we need NPM which we installed earlier. Run the command in terminal (or command prompt): `npm install --save-dev snowpack`
![Installed Snowpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um4l5szvx1lxxhfyflbc.png)


  First of all, how do we create a React project? Is it like JavaScript where we just add a `.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*.
![Terminal Window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgzc59tldyne1qjsyhu6.png)

  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 <react-snowpack> 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 <your-project-name> 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 <code-editor>*, or opening your code editor, selecting *Open Folder*, then selecting your project.

![Welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r598ax8wtm52zw6uqaa8.png)

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 `public` (`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 `index.css` folder.

![What we should have now](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh7ivs8rz5dwaysukec2.png)

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.

Open your `snowpack.config.mjs` and head to the mount config:
![Mount config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f362ry6s5lj8olqdhl8y.png)

Make the changes like below: 
![Mount config changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tsxqdvj8kn71dme9x1i.png)

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 `jsx` to `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!**):
![HTML File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63bb4nl2flaheisht9bx.png)

Then, head to the `index.jsx` and make the following changes:
![index.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4she89cutu1pwxu5qruv.png)
  
And that's it, run the command: `npm run start` and it should open in the browser!

![Page Opened](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kknx38kccgzufh0r4u1.png)

In the [Part 2](https://dev.to/shafspecs/let-s-dive-into-react-pt-2-3omm), we will explain the things we did in detail and our first code. Till next time!