4 Tips Beginner React Devs Should Follow

It will make your lives easier

Deb
Deb
Nov 15 · 5 min read

1. Learn about Server side rendering (SSR)

Image for post
Image for post

Okay, so when I say Server Side rendering, I also mean quite a few things related to it. For instance, NodeJS and webpack.

You obviously wouldn’t bother rendering your react app server-side as a beginner when you’re still figuring out how react works and it’s fine. All I’m saying is, you should at least have an idea about what it is and why it is important, so that when you go for your next internship and their server side rendering their app, you are not clueless.

If you are reading about server-side rendering, you’d also come across some server side code and terms like bundles, build process, etc. It’s important that you pay attention to these things because knowing about these will help you a lot in the long run. You should be able to configure webpack, babel.

Along the process, you’ll learn some basic server side code , if you don’t already and better your overall knowledge of how these libraries/frameworks work. I am not going to bore you with details about SSR here, you can find plenty of articles online. But I can list some advantages.

  1. SEO

Easy to index the page in search engines. If you’re fetching data asynchronously after displaying a loader/spinner on initial render search engines may not find what you would want them to.

2. Better performance (in some cases)

There’s no need to download a JavaScript file before the page is loaded. The client’s browser immediately displays a completely rendered HTML file. This avoids the loading time required for client-side rendering. Although, initial load time may increase for very rich and heavy webpages. You could easily find some comparisons online and decide for yourself.

3. You get those cool snippets of your website on social media

You get a small preview of your website’s link on social platforms.

Also, I’d encourage you to look into Next.js .

Image for post
Image for post

2. Don’t optimize prematurely

I’m sure you have heard about this a lot.

There are a lot of optimizations you can perform in an application but at the end of the day, getting the job done is important. When it comes to React, there are many better ways to organise code and stuff like that, but a lot of those are unnecessary in the beginning. You could learn those details through the journey as you find the need for them.

Take for example, React.PureComponent. You heard that it prevents unnecessary renders by comparing new and previous props, so you decided you use it everywhere. Don’t do this. You may not need it at all. Because the component you’re trying to optimise may not be worth the optimisation.

Sure, if you can figure out which component or which part of code needs optimisation, it’s great , in fact, it shows you know what you are doing. But always make optimisations when they are necessary.

3. Focus on mastering JavaScript and even better, Typescript.

Image for post
Image for post
Photo by Ferenc Almasi on Unsplash

This seems to be a common problem with beginners. I recently read an article where it was mentioned that having a framework specific knowledge is the worst thing you could do to yourself. With so many libraries and frameworks available, this is natural.

You don’t want to be someone who writes React components effortlessly but struggles to write a snake game in Vanilla JS.

It is important to focus on core concepts and how Javascript behaves in certain cases. I personally, found Javascript a lot harder to learn as compared to Python and it was overwhelming.

I would suggest looking into TypeScript, JavaScript’s cousin. Recently, I had to work on a project written completely in TypeScript, and I wasted a lot of hours getting to know some concepts .

The advantages that Typescript has over JavaScript, you could easily find.

Remember, React, Angular or Vue, it’s all JavaScript !

4. It’s okay if your design skills are weak

If you think front end development is all about designing fancy UIs and applying cool animations, you’re wrong. It is not the only thing that matters. There’s a lot more to it.

The last project that I worked on, I didn’t bother to make the UI “beautiful”. I was not responsible for that part. They had someone else working on that exact thing. I was responsible for integrating the payment gateway into the application . They didn’t care if the box that I made for entering the discount code was properly aligned with other elements, or if the button had a proper wave effect on clicking. Not to say that these skills are not important. No, what I mean is, I knew that I couldn’t create the most beautiful UI. I knew my limitations when it came to my CSS skills. But it was OK. There is a lot more involved in Front End development. You cannot perfect everything and it’s OK. It takes time.

They hired me not for my CSS skills, but for my Javascript skills. If you can do some complex Javascript stuff with Redux but have a hard time setting an appropriate margin for a header, it’s OK.

Image for post
Image for post
css

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

Thank you for reading :)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store