What **is** React?

Ask anyone what React is, and they will probably reply:

"React is Facebook's version of Vue"

That doesn't help you understand it though, does it?

I'm not going to compare React to Vue or Angular or anything like that, we will look at elements and props and things..

Rather than just being one 'thing', React is more like a set of tools used to build and structure the UI (user interface)

A framework or a library...?

Technically, React is a JavaScript library, although most people refer to it as a framework and it is comparable to actual javaScript frameworks due to its ability to create a full stack application. Even though React is strictly a frontend framework, it can be used alongside other technologies, just as Mongo or other backend-y stuff.

People love React so much because it is so flexible when used with other stacks - it can be made full stack because the React community is

HUGE

This means that people have created lots of add ons and an entire ecosystem

React is a SPA (single page application) that can be used to build full stack apps and do all the clever backend stuff too if used with a backend stack!

A spa....? I like to relax!

Yes yes, but in tech, a SPA is a single html page that a framework (such as React) essentially takes as a puppet and makes it...do stuff. Remember this puppet idea, we might come back to it later.

While it is correct that React is, in theory, quite similar to Vue, I've found a few differences on the ground after diving into React this week.
I've used Vue/Nuxt before and really like it - I've also written What is Vue if you're browsing through frameworks

Framework...another one?!

Yes, another one. People love a framework, especially a JavaScript one.

A JavaScript framework, right

Yes, well, a library, but React is essentially a layer on top of your JavaScript code that is made up of elements and JSX

Right

Ok, let's go into that...

You write React by writing elements (that look like this: const element = <h1>Hello React!</h1>

Hey, I recognise that, it looks like HTML!

Yes, it does but don't get carried away...
React is written around an element that React developers often call the 'root element'

<div id="root"></div>

Elements cannot be changed, and actually neither can variables or consts that you create as it would require the whole page to rerender.

The puppet master

Back to this puppet idea...
So we've got the HTML page sitting there...static....essentially useless and highly non user-friendly.

Along comes React and BOOM!

Ok, if only it was that easy...

React needs to be able to read your html SPA in order to know how it should behave and render. For this, React uses its own dialect of JavaScript, called JSX. JSX sounds (and looks) intimidating to first time users, but like most things, it is a learning curve. It stands for 'JavaScript syntax extension' and that's essentially what it is - just a different way to write JavaScript in a way that React understands so it knows what to do with all the html.

Earlier, we mentioned that elements and consts cannot be changed. This is not technically true - this is where the JSX comes in. JSX is the strings on the puppet

Dynamic markup

Sounds scary...
It's not, really - it is formatted like html but we can add in JavaScript to make it movey-shakey! In React, if you need to pass new information to a variable, you can do that by using curly braces {}

Here's a small example from some code I wrote yesterday:

<button className="square"
 onClick={onSquareClick}>
   {value}
</button>

Here, you can see that I have a button, defined with some Tailwind styling, that I have given the props onSquareClick and Value. OnSquareClick was defined elsewhere in the code and essentially told my app to wait for a click and then do something, the {value} prop told it what to display.

Hold on... this looks a lot like

✨Reusable components✨

Hooray! We love a reusable component!

I find that reusable components are great for when you're working in a team/with a large code base, and things can get messy and unmanagable very quickly, with so much code all referencing itself in the same place.

Reusable components stop this because your code will be structured in defined sections, you can even have things on separate pages if you want to.
I am a big fan of any component-using codebase as it makes things much clearer and cleaner to look at, although other people aren't so in favour of them. Opinions are ok!

Anyway, React needs you to set the type as module if you are going to export it

Export it?

Yes, sorry, React requires you to use the keywords import, export and module when you are using and creating your components. Say you've built a lovely navbar or menu on your homepage. Consistency and design say that you should probably use the same thing throughout the pages on your site. What are your options here?

You could copy and paste to every page and risk typos and bugs 🤢 OR you could create a ✨reusable component✨. You're going to want to stick a type = module on that bad boy first, then make sure you export navbar somewhere on the page, and that's it!!

From now on, you can import navbar from ../pageName at the top of every file and you'll have access to that lovely navbar, everywhere you go!

Managing state

This is more of a tricky concept in React, let's break it down.

The 'State' in React is essentially what each individual part is doing

So when your user is typing into a box, does your page need to know to make a dragon fly across the screen..? Ok probably not but stay with me.

State is like a little memory full of eventListeners (remember those)?! It enables you to not only say 'when this happens, do this', useState allows you to say 'if this happens, do this, else do this

Yes, useState is essentially an event listener with a memory.

Not so tricky...

I'm enjoying looking into React so far, and hope to start building my first demo page out today!