πŸ’‘ We need to talk about React

πŸ’‘ We need to talk about React

Over the past few weeks, I've been immersing myself in React - specifically, Next.js.

While React can be fun, the differences between function and class-based component construction can throw off newbies. It also doesn't help that tutorials mix and match them without much context or explanation.

Personally, I've come to adore function based React. Why? Mostly because it's more concise to write, easier to debug and less 'tendrils' to deal with because, well, there's less code involved.

The process can feel quite atomic once you get the hang of it.

The syntax is basically:

const someFunction = ({props here}) => {

// some code here

return(
  <div>
  {/* something here */}
  </div>
  )}
  
export default someFunction;

Then it's just building out the components in their smallest functional form.

While React is great, it does come with some limitations - mostly to do with SEO and crawlers' inability to properly process single-page client-side apps. Next.js is one of the latest server-side React kids on the block.

In between life, work, and my weekend project, I've also managed to publish a piece about dynamic loading in Next.js.

Resources and internet finds

If you're new to React and want a quick primer on what it is and how it works (without having to spend hours), Fireship's React in 100 Seconds is fantastic.

React is basically JavaScript, but reimagined for single-paged apps. It's decentralized, restructured, and can be downright messy if no structure is enforced. This is where plop comes in.

If you're coming in from a backend or framework background, React can feel daunting because it's a 'free-for-all' kind of approach. Plop basically lets you turn a library into a micro-framework by enforcing some sort of structure on it. Β 

At some point, you're also going to run into http requests. This is where axios come in. Axios makes dealing with http and anything promise-related succinctly eloquent.

πŸ“Œ Random side note

I stumbled into a fantastic site called Sketchplanations - the equivalent of napkin sketches to explain things simply. Not exactly code related but you might be enlightened by a few of the sketches.

Quote of the week

I have a deeply hidden and inarticulate desire for something beyond the daily life. - Virginia Woolf.