💡 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

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.

Article by:

Aphinya Dechalert

Aphinya Dechalert

Aphinya is a skilled tech writer with field experience in software development, agile, and fullstack JavaScript. She is a dev advocate and community builder, helping others navigate their dev journey.

More posts...

newsletter

🧐 Spiders & Bots love SSR

Bots and crawlers have a thing against single page apps. This is where SSR comes in and why.

newsletter

🚧 There's more to JavaScript than just console.log()

As a frontend dev, console.log() is necessary. But there's more to debugging than just littering it everywhere. The thing about console.log() is that it's more than just a utility tool that helps us debug. It is also something that you can put inside your error handling process to

newsletter

Dev Freebies and Ways To Upskill

Another week, another newsletter 💌 This week has been pretty intense for me - from playing with Next.js SSR and learning how to use Chakra UI. Here's what I learned from the process of learning something new: * it's always hardest at the start * what you know doesn't become real until

newsletter

Productivity is in the tools you use

As I get back into the groove of weekend projects, I find myself optimizing my workflow. We often associate productivity with our abilities to stay focused. But as software developers and engineers, our tools are as equally important - or more importantly, the extensions and plugins we utilize in our