14
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 some useful free courses/crash courses on it. Let's get started.
With React a collection of prewritten code snippets can be used and reused to perform common JavaScript functions.
That is, ReactJS 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 in Twitter. See what I mean in the image below.
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 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.
React plays a very vital role in creating interactive web applications.
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. On these websites, you can register an account, make posts, 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 it isn't so with React.
ReactJS as you know it is a JavaScript library, and as many 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.
ReactJS 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 to me 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 moving 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)replacing JavaScript's if and else in a library. For example in React, we would popularly use
const [state, setState] = useState('initial');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 things). 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 of 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.
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 took and what you've learned, 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 operator, 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. I'd recommend using the W3schools JavaScript course outline.
This question will also answer "How do I learn React?". As I said before, React is not a special (or hard) thing to learn. This is the way I learn frameworks/libraries, and I recommend you try it too.
- Follow along with a tutorial
- Play around with the docs
- Build more projects
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 short overview of what you'd be working with
React has a very good documentation for its library. The documentation gives you more insight into the library, shows you what more you can do with it.
React's documentation is designed to take you from the basics to the advanced React step by step. Playing around 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 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.
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 much tutorial (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, see from a different perspective, the more you will become efficient in it.
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, 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, personal blog (which is always updated) then you'd need the likes of React to easily build them.
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 to spread love. And don't forget to please give me a shout-out and follow on Twitter @elijahtrillionz.
14