Let's Dive into React! (Pt. 1)

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 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

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.

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 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.

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:

Make the changes like below:

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!):

Then, head to the index.jsx and make the following changes:

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!