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.
const MyComponents = () => return <div>Imagine a </div>;
This simply gives us a
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
To run it, we use the command:
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
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!