My Quickstart Notes For React

After being a casual Vue enthusiast for a while, I tried React and… Liked it!

Working with Next.js was a blast, I got everything done which I wanted to. The resources are great, the tooling just works. Everything is (at least with hooks, and a simple application) pretty convenient and understandable.

Here are my notes, about things I had to find out by doing them wrong, and Googling around.

Components Can Be Functions

Just define a function, and make sure it returns one of those jsx thingies.

const FancyComponentName = (props) => {
    return (
        <div>
            blabla
        </div>
    );
}

There are a few things to notice. First of all, the props argument is optional, but it comes in quite handy as you’ll see later. Jsx basically looks like HTML, but is transpiled (?) into JavaScript calls by the dev tooling. What’s important if you return it, is to have a single top-level element (the div in this case), and to have a bracket around the whole shabang.

Passing Props

Having specified the above function, you can pass values to it. With props! They look like HTML attributes.

<FancyComponentName someProp="bla" />

This barely scratches the surface of course, but with this call you could use the value props.someProp in your FancyComponentName function. Pretty cool if you ask me!

Gotcha: Watch Those Brackets And Quotes

Now here’s something which I didn’t understand right away. If you want to pass the content of a variable into a prop for example, you’ll have to do it this way:

// imagine we're inside a component function or something
const fancy = "blabla";

return (
  <div>
    <FancyComponentName someProp={fancy} />
  </div>
  );
)

See how the fancy variable is in curly brackets? That’s what you do, if you want to pass the value of a js object instead of a boring string. If it looks like "{fancy}" it’d be just a boring string. Blergh.

Wanna do string concatenation? Do something like {"something"+fancy}. That will work.

Changing Values, aka State

This is something I found quite cool:

  import {useState} from 'react';

  const [yourValue, setYourValue] = useState('default value');

From now on, you can use yourValue to access the state value. And call setYourValue("new thing") to set it to a new thing.

Those new variables will play nice with the rest of React, and make sure that wherever you use them gets updated when they change. Oh, and of course they will be gone as soon as you reload the site. Wanna have more permanent state? I’m sure it’s possible but I haven’t looked it up yet either.

Wanna Use Json Data? Just Import It

Given that your data isn’t super big, or top secret, here’s what you can do:

• Put your data.json file it into a data folder
• import someArbitraryNameYouMadeUp from "../data/data.json";
• And you can access the data under that ridiculous variable name

Not sure if it’s a Next.js specific thing, but it works pretty well with it. Speaking of…

Want To Build A Site? Use Next.js

Now, this is less React-speific, but something worth mentioning.

If you want to create a plain-old static site, with many HTML pages which are search engine friendly, static rendering is your friend. There are a few options, but I found Next.js to work quite well.

Generating a sitemap, setting head metatags and getting that sweet-sweet component reusability through React are all yours if you do. It’s one of my favourite tools for building content sites by now.