DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for You Don't Need To Learn ReactJS Now
Elijah Trillionz
Elijah Trillionz

Posted on • Updated on

You Don't Need To Learn ReactJS Now

Now, this isn't another article that tries to stop you from learning and using React and other related libraries and frameworks like VueJS. Rather it is an article that aims to help you understand what React is, when you need to learn it, and what you need to learn it.

So this article will help you learn and use React at the right time. I will also provide useful free courses/crash courses to help you learn React. Let's get started.

  1. What is React
  2. Why is React important
  3. When to learn React
  4. How to learn React
  5. When to use React

What is React?

React is a popular JavaScript library that is used to build user interfaces and single-page applications.

With React, a collection of prewritten code snippets can be used and reused to perform common JavaScript functions.

That is, React allows us to create reusable UI components. These components are what make up our website.

An example of a reusable UI component is the tweet section on Twitter. See what I mean in the image below.

twitter tweet section

Twitter simply created a component for this section and used it for all tweets in the app. Twitter uses React for its web app.

But you may ask if React is for building single-page then how the hell does Twitter have several pages?

Well, there are maintained supporting packages and libraries that make building complex applications with multiple pages like Twitter with React possible.

While some people still use supporting packages, others have ported to using React frameworks like Next and Remix for building simple and complex applications.

Another framework to learn on top of React you may say. But trust me they are pretty easy to learn. But we won't talk more about them because it is beyond the scope of this article.

Why is React important - What role does it play in web development?

React has played a very vital role in creating interactive web applications in these past few years, and it still is very vital today.

If you are an aspiring front-end developer or full-stack web developer who wants to work for a company, or simply create web apps as a freelancer or a startup, then you need React.

Web applications are different from websites. You don't need React to make a website (static website).

Web apps are dynamic websites that look and feel like desktop or mobile applications. With web apps, you can register an account, make posts, and do things that you'd usually do in an application.

Without React making a dynamic website will not just be tedious for the developer but also difficult to use. Because for each page transition the browser will have to reload. But that isn't so with React.

When do I learn React?

React as you know is a JavaScript library, and as with many other libraries and frameworks, they require a proper understanding of the language itself.

It's no use trying to learn a tool that makes using another tool easier when you have no (or low) clue of how the primary tool works.

React and other JavaScript libraries and frameworks all make use of JavaScript in it (a lot). So it is expedient for you to know vanilla JavaScript to a great extent before learning any JavaScript library/framework.

Understand this, React is not a special thing to learn. It's not like a mini-language that you have to learn to build cool web apps.

Learning React is not a matter of learning a new syntax or something, it's a matter of understanding how React has decided to work with JavaScript. And so you're like "Ok React, this is how you like it, I will play by your rule".

So that means React uses JavaScript's syntax in all ramifications, and a little bit of HTML (JSX). That is why when you know JavaScript enough, you wouldn't find it difficult to move to other libraries and frameworks.

So these libraries and frameworks are not replacing the JavaScript syntax, you're not going to find

if condition:
  // statement(s)
else:
  // statement(s)
Enter fullscreen mode Exit fullscreen mode

replacing JavaScript's if and else in a library. For example in React, we would popularly use

const [state, setState] = useState('initial');
Enter fullscreen mode Exit fullscreen mode

If you have never worked with destructuring arrays in JavaScript, you'd think this is some kind of React's syntax; you may think "here we have the state and setState in an array together and assigned to the useState function, ok this is React". You'd have no clue what this is.

This may sound funny if you are familiar with array destructuring, but some developers are in this situation. And trust me if this is you, it's not a good place to be. But luckily there is a solution - learn enough JavaScript.

So to what extent should you learn JavaScript before learning React?

I think you should learn everything your course/book outlines (I will outline some). Here is a way to learn JavaScript in such a situation - forget about React and other libraries/frameworks.

Don't learn JavaScript because you wanna learn React - don't have such an attitude toward learning. Learn JavaScript because you want to be a web developer who makes cool web apps. Because the truth is React may not always be here.

React may be gone in 5 years or even less. You never can tell. But when you learn enough JavaScript you can easily switch to any JavaScript library/framework you want.

So when you're done with your JavaScript course, that's still not the right time to jump into React. Instead try to master the JavaScript syntax you've learned with exercises, projects, and even websites (lots of them).

To do this, you can google out projects for beginners, Brad Traversy has a great repository of 20 vanilla web JavaScript projects - try building all of them on your own.

When all this is done, I believe you're 100% ready to learn React. Now am not sure which JavaScript course you'll take or may have taken, but to learn React you need to know these topics (explicitly including the basics)

  • Data Types - string, number, booleans, arrays, objects, undefined, null.
  • Arithmetic operators and arithmetic operations, logical operators, ternary operators, expressions, variables (const and let), scopes
  • Conditional statements - if and else, switch and case
  • Loops - for, for in, for of, while, do/while
  • Functions - arrow functions, closures, callbacks
  • Classes and other ES6 features
  • DOM
  • JSON
  • The global object
  • Asynchronous JavaScript - setTimeout, setInterval

Basically everything. You can use the JavaScript outline provided by W3schools to compare with the course you're using to learn JavaScript. Just to make sure you get every box ticked.

How do I learn React?

Now let's take a look at how you can learn React with the resources that will be provided here. As mentioned before, React is not a special (or hard) thing to learn. This is the way I learn a new framework/library, and I recommend you try it too.

  • Follow along with a tutorial
  • Play around with the docs/take a course
  • Build more projects
  • Learn in public

Follow along with a tutorial

This is basically coding along with a React tutorial. You can find a React crash course on YouTube for free. You don't have to pay to learn React at all.

I'd recommend a crash course where there is a little bit of explanation on how React works, and then a project. I recommend this React crash course for 2021 by Traversy Media.

The crash course (this step) will help introduce you to React and how it works. It gives you a practical overview of what you'd be working with

Play around with the docs

React has a very good documentation for its library. The documentation gives you more insight into the library and shows you what more you can do with it.

React's documentation is designed to take you from basics to the advanced React step by step. Playing around with the docs simply means studying the docs and trying out some of the examples used.

You can study React's docs like the way you study a course (in college or something). The point is, React's documentation is straight to the point, so you studying it line by line or chapter by chapter is not a waste of time.

Studying the docs shouldn't take more than a week for an average person.

Alternatively, you can take a React course. There are some free React courses out there that can teach you everything you need to know to get started with React in-depth.

Just like the React docs, these courses provide an outline of things you would learn in React, so you go from topic to topic.

These are some of the free React courses:

  1. W3Schools React Tutorial.
  2. React 101 by CodeCademy.
  3. React by FreeCodeCamp.

Build more projects

If you'd notice I said "more projects" rather than "a project". Now, this is because if you follow the first step you'd already built your first project in React, now you just need to build more.

After building more projects, I often recommend checking out some more tutorials on basic projects - you can search for more specific projects and find a tutorial on them.

This will always introduce you to a newer concept and perspective. But try not to end up doing too many tutorials (1 or 2 from different authors is fine), so you don't end up in "tutorial hell".

These steps will help you cover the basics and the more you build projects, and see them from a different perspective, the more you will become efficient in it.

Bonus - Learn in public

Now, this is something I wished I did when I got started with React. It is so important for every developer. Learning in public is like marketing yourself to a dev community. As such you may find companies interested in hiring you. Now it's not as easy or as fast as it sounds.

It would take time and consistency. But when you learn React in public, and post new projects you build you'll definitely get noticed by someone interested in you.

The same thing goes for those who want to freelance.

There are really great communities where you can learn in public, Tech Twitter is one of them. So get active on Twitter. I made a Twitter list of awesome developers you can follow to get started with Tech Twitter.

When do you need to use React

I have already said this before, but I'll just re-iterate.

React is not always needed. You should only use React when you are working on dynamic websites or as some developers may say "complex websites".

You can always use vanilla JavaScript for small projects, and static websites.

For example, if you're to build a business website for a client. The kind of website where you hard-code everything, where visitors come to see about the business like the contact info, and what the business is about. For example a law firm. Such websites don't require React. No matter the pages you're to create, it would be easier for you with vanilla JavaScript.

But if you're trying to build the next Twitter, DEV community, or personal blog (which is always updated) then you'd need the likes of React to easily build them.

Conclusion

React is a cool tool for web development, and as cool as it is, it's very easy to learn. Learning it at the right time puts you at a higher advantage.

To step up your web development career with React you can learn NextJS or Remix easily. You can follow the same steps I mentioned here for learning React to learn one of them. They are a lot easier to learn than React itself.

Thanks for reading. You can leave a comment below to let me know what you think about this article. If you like this article, please like and share. If you want to see more articles like this you can support me by buying me a coffee.

Yeah, and don't forget to hit me up on Twitter @elijahtrillionz. Happy hacking.

Buy me a coffee

Top comments (27)

Collapse
 
leocaprile profile image
MatΓ­as Fuentes

I agree with this because, when I started learning Javascript didn't want to learn react at all, due to his complexity and the deep previous understanding of Javascript, when I got all Javascript advanced concepts down I started learning react, and the learning curve was almost lineal, I got the basic concepts of react down in two weeks or so. Nice post!

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Thanks. Same story with me. Truth is I was lucky enough to not know about React and other frameworks/libraries when I was learning JavaScript

Collapse
 
luckston profile image
Luckston

I am currently in this situation. I was made to understand JavaScript concepts within a week then move on to React. I haven't fully grasped it and React.js looks different and challenging. I may have to go back to JavaScript now. Thanks for this.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Yeah, you should absolutely go back. Take your time, no need to rush.
and trust me when you come back to React later, learning it will be way easier than you can imagine

Collapse
 
husseinkizz profile image
Hussein Kizz

The problem is how do you know that you know javascript, okay enough of it to do react, am one of those who didn't go so much in the nitty gritties of js and got the basics then react but I now feel as an imposter whenever I see posts like this, come on I now gat this am even going for 'next' things!

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

I listed some things that you should already be able to play with before moving to React. And I also made mention of building websites independent of React. When you're able to do all these, and also want to create a dynamic (interactive website), then you can move to React.
Even now, you can go back to mastering JavaScript.
Thanks

Collapse
 
dawalhasa profile image
Dawa Lhasa

This is very helpful and thanks.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

I'm glad it helped

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Just my opinion but I think the industry will eventually move away from html css and javascript in favor of platforms similar to dart and flutter ones that are compiled and built for the modern web.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

I am not sure how that works, but I doubt html css and javascript would be abandoned that easily

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

No they won't be abandoned, the web will evolve past them. They are old technologies and will probably be replaced in the not to distant future.

Collapse
 
manuthecoder profile image
Manu

Vue.JS has a lesser learning curve than React.JS, which is why Vue.JS might be a good choice sometimes.

tbh I like vanilla js, and I avoid any frameworks πŸ”₯

Collapse
 
jasoonx profile image
JasoonX

The only thing with React.js that might be hard to learn is state management with Flux architecture using Redux or something simillar. What else is difficult about it?

Collapse
 
chetannada profile image
Chetan Nada

I agree with your word on this article. I started react quickly and don't know any advance javascript syntax. Now I jumped to first learn advance Js.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Good thing you moved. It's going to be very helpful in the long run, and not just for React, but for any futuristic JavaScript framework.

Collapse
 
sadokmhiri profile image
Sadok Mhiri

Great article, as an Angular developer, for the first time when I started working on a project with React I thought it was so simple and I said it's a JS library and I'm familiar with JS so I won't find it difficult but it is not the case of course, I find myself in situations in which I will not be able to move forward, yes, sometimes I turn to Stackoverflow to solve my issues quicly and sometimes I want me to fix the problem.
It was not easy to complete the project and of course just after the end of this project I looked for tutorials ( Stephen Grider's course is a good one ) to understand how React works behind the scenes, its workflow, hooks, virtual DOM, state management, react- router, etc.
What I wanted to say from my experience is that you have to understand React and its basics and that way of rendering before starting to work unless there are time constraints but it requires a good understanding of JS and I guarantee you that it will be hard

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Yeah, you're right

Collapse
 
andrewbaisden profile image
Andrew Baisden

Get good with JavaScript then level up and learn React.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz • Edited on

All in a sentence.

Collapse
 
jasoonx profile image
JasoonX • Edited on

That's actually not true, if you follow current tools for development for even the static sites, like Astro, you'll see that development using the React or Vue underneath makes the dev experience much better. Using vanilla.js for creating websites today is just shooting yourself in the leg.
And if your site will ever grow into something bigger you can always just copy the code from Astro templates into your .js/.ts files and just run with it.
The React itself is such an easy library to learn, that the time you'll spend on learning it and creating something real with it is going to be less than the time you'll need for vanilla js.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz • Edited on

I doubt you actually read the article. The article didn't say that development with React is bad or something, the article clearly doesn't go against using react/vue rather it encourages it to be learned and used at the right time.

And just to correct something you mentioned

Using vanilla.js for creating websites today is just shooting yourself in the leg.

I am assuming you mean "web app" not "websites" because using React for websites is actually shooting yourself in the leg.

You creating a business website that describes your business does not require React, because it would just be too much/unnecessary work.

Please read the article with the right mindset. Thanks

Collapse
 
jemeni11 profile image
Emmanuel C. Jemeni

This is a great article. I wish I knew this before I jumped into React.

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Uhmm. Sorry about that.
Thanks for the feedback

Collapse
 
irfan87 profile image
Ahmad Irfan Mohammad Shukri

For me, personally, React (Angular, Vue, jQuery) is a tools that make our life as a developer easier. It more like we want to build a dinner table. We need nails, screwdriver, hammer, saw and etc. We can put aside all these tools and the result, we still can get our table, but maybe the ugly and unstable table. Same things with this topic. We can use or not to use any JavaScript libraries or frameworks. But this is what I always say this to my fellow web developer. It is depend on your project. Not all web projects prefer to use React, or any kind of JavaScript tools. And some projects prefer to use vanilla JavaScript, and some prefer to use the old JavaScript libraries, such as BackboneJS, jQuery. If you asked, why developers still use this old school library, and why the old school library still exists? This is because the usage of these library is still on demand. Not all developers and projects prefer to use React, Vue, Angular. That's why I totally agree and suggest if you want to get strong in any library and framework, you should know what are you doing and have strong foundation on any languages, not only in JavaScript.

Collapse
 
eke profile image
Eke Victor

Awesome article. Just what I needed as I continue my journey in mastering (not really) JavaScript. πŸ’―

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

Thanks. Am glad you found it useful

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.