loading...

I Tried to Use ReactJS for a One Page Site and THIS Happened

bulljsdev profile image 🔴 Nick Bull JS Originally published at Medium ・3 min read

We have two developers Brad and Chad.

Both guys were given only 1 task.

Create One Page Resume Website.

Brad is a smart guy. He chooses technologies based on the problem he wants to solve.

Chad is just a guy who loves ReactJS. Yes, that's all about him.

Let's take a look at how they will do this.

Brad

Brad created a simple website:

Alt Text

Code is also very simple.

HTML:

Alt Text

CCS:

Alt Text

To make it publicly seen he should deploy it.

But first, he needs to minify his website to make it ready for production.

He chooses Parcel for this job. Smart choice.

Alt Text

Now he has public folder with a minified source code of the website.

Time to deploy.

He chooses Netlify for it. Also smart choice.

Result: Brad's website

Ok, interesting part right now.

Let's see how long does it take to load Brad's website on the mobile device.

Open Dev Tools and go to the Lighthouse Tab.

Alt Text

Click "Generate Report" button.

Alt Text

We are interested in only 1 parameter - First Contentful Paint.

1.6s. Nice Brad.

First Contentful Paint measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page.

Now, let's compare this result to Chad's website.

Chad

As I said Chad in love with React and he will use it to create the exact same website.

He chooses Create React App as a starting point.

Alt Text

Chad will use the same code as Brad.

Alt Text

Alt Text

Web site is ready. Time to bundle it.

Alt Text

And deploy it to Netlify.

Result: Chad's website

Ok, let's measure loading speed on the mobile device.

Open Dev Tools. Go to the Light House Tab. Click "Generate Report" button.

And…

Alt Text

Hmm, results pretty much the same.

1.3s vs 1.6s

Not bad.

Let's go to the Network tab and look at how our assets loading.

Brad

Alt Text

Chad

Alt Text

Seems like Chad's website loading 39KB of JavaScript files.

That's React and content of the website.

Browser needs to load, parse and execute whole JavaScript file to show website content.

React traverses the component tree, computes the initial mount state, and pushes it to the DOM.

It's ok for now. File is pretty small.

But as our bundle will become larger (and it will). We will notice a white screen displayed before javascript is actually loaded.

Imagine 10 seconds of white screen on pure internet connection.

Real-world example:

Recruiter finds your resume on Linkedin.

Go to your 1 page resume website.
Recruiter is waiting your website to be loaded. Files too >large. Pure Internet connection.

Recruiter has no time for it. Recruiter closes it.

You are not invited to an interview.

Now you can see what happens when you choose a technology that is not suitable for a particular problem.

You don't need to use React all the time.

Choose the technology wisely.

Be like Brad.

In the end

🔴 If you like this article share it with your friends and follow me on Twitter.

🔴 Get more coding tips, job interview advice, and the latest tech news. Join my Newsletter

That's all. Thanks!

Posted on by:

bulljsdev profile

🔴 Nick Bull JS

@bulljsdev

I can teach you JavaScript and help you get hired 👨‍💻 JS, React, NodeJS, Typescript 🧠 Coding for 10+ years ⌨️ Join my Newsletter 👉 bulljs.substack.com/subscribe

Discussion

markdown guide