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.
- What is React
- Why is React important
- When to learn React
- How to learn React
- When to use React
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 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.
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.
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.
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.
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.
if condition: // statement(s) else: // statement(s)
if and else in a library. For example in React, we would popularly use
const [state, setState] = useState('initial');
setState in an array together and assigned to the
useState function, ok this is React". You'd have no clue what this is.
- 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
- The global object
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
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
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:
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.
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.
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".
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.
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.