Let's Dive into React (Pt. 2)

In the first article, we downloaded NPM, downloaded snowpack, ran commands and got our first React page running. Let's continue!

Let's leave the keyboard alone and learn what we actually did. React is a front-end library, for building User Interfaces (UI). Over the years it has been improved and made powerful that we can depend on it solely for the front-end of our application, examples of websites that use React as their frontend are yahoo, Discord, BBC, etc.

Next, what language is used? Is it JavaScript? Answer is, yes. But a special type of JavaScript called JSX (JavaScript XML). An example of JSX is

const MyComponents = () => return <div>Imagine a </div>;

(Note:: Plain, vanilla JavaScript is also valid in React)

This simply gives us a div in the HTML page. Just notice the special thing about it, it's HTML + JS inline, we wrote HTML in JavaScript! That's the basics of JSX, to put it in short, JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.

Let us demonstrate with two examples, the first uses JSX and the second does not:

This is different, it means we use just one HTML page (in our own case, index.html), link it to our entry point, (in our own case, index.jsx) and keep on building from there. We won't need to touch our HTML file at all for editing!

I mentioned entry point above, what's an entry point? I expect you to have knowledge of modules in JS to continue. Our entry point is simply just the main module we use to connect all our React code to the <script> tag in our HTML file.

Note: React is an SPA (a Single-Page-Application) library, we will have just one HTML page, we won't even need to make much changes to it, and certainly no <div> tag or other. All of those tags and JavaScript will be handled by the React files, which is explained below.

To run it, we use the command: npm run start. Now, before you say: "Hold up! why don't we just click our HTML file and run that in the browser?". Well, that's possible, but when we start adding dependencies (small codes that adds some particular functionality or some sort of feature, e.g react-icons - to add icons from the react-icons catalogue) because we wrote our JavaScript(React), everything can be packaged together and run as intended. And also browsers don't understand JSX, therefore, we will have to 'compile' the code to JavaScript. Examples of compilers include TypeScript and Babel.

By running npm run start, we start the compiler that automatically changes all our gibberish HTML + JS (JSX) to understandable JavaScript (this is done behind the scenes), and automatically runs the HTML for us on a localhost port (think of a localhost as a way to simulate your site as if it's actually on the web). So that's why we can't just run our HTML file like that.

One more thing, I've been mentioning index.js, yet we renamed our file to index.jsx. That's due to the package we are using, Snowpack. It requires we name our JS files to .jsx even though we refer to it in the code as .js (check our HTML <script> tag src, for example). When using others beside Snowpack (e.g Vite), make sure to confirm their naming conventions.

So that's it for this article, no coding, no editing, must be disappointing I'm sure. But now that we do have an idea of what goes on behind the scenes, we can continue with less explaining to do and hopefully, you get a clearer picture. See you in the next one!