How to get a React JS job in 2020 ?
Tags: react, javascript, codenewbie, webdev
Published: 2020-03-14 13:38:38

Learning a new framework or technology is always fun for me. But I was thinking about how I’ll describe someone to learn React JS in 2020? So I came up with a list of things need to learn to get a React JS job in 2020! Interested to know? Scroll down or do whatever you wish (tried to be funny as always, but I know I’m bad with jokes so don’t mind please).

## Table Of Contents<a name="table-of-content"></a>
* [Why React JS](#chapter-1)
* [Pre-requisite](#chapter-2)
* [React JS Basics](#chapter-3)
* [REDUX](#chapter-4)
* [React Hooks](#chapter-5)
* [Testing](#chapter-6)
* [TypeScript (Optional)](#chapter-7)
* [Gatsby (Optional)](#chapter-8)
* [Next JS(Optional)](#chapter-9)
* [Job Finding & Interview](#chapter-10)
* [Interesting Projects](#chapter-11)
* [Recap](#chapter-12)

### So Why React JS? <a name="chapter-1"></a>
React is dominating the industry and there are so many jobs on React so learning React will help to get a job quickly. There are so many benefits of learning React JS in 2020. I’ll list some 
- Easier to learn
- Re-use components
- One directional data flow
- Great performance
- Great eco-system
- Amazing Community
- Very popular

[Back to table of content](#table-of-content)

### Pre-requisite <a name="chapter-2"></a>
Before learning React JS I’ll suggest learning a huge list. Well, this list things are easy so you can maybe learn whole things in 2-3months! Well, you can learn it within 1 month, but I’ll suggest spending 2-3months on these topics then drive in to React JS. The list is – 
- HTML5
- CSS3
- JavaScript Basics
- ES6 and more about JavaScript
- NPM
- WEBPACK
- JSX
- FETCH/AXIOS

After completing all these, I’ll suggest driving into React JS. React JS is so fun to learn so if you know the topics I mentioned then you’ll find that this is so easy. React is like you’re writing the HTML & CSS in JS. There are some logics too. Let’s drive into React JS to see what we need to learn to get a job in 2020?

[Back to table of content](#table-of-content)

### React JS Basics <a name="chapter-3"></a>
First, we need to start reading the documentation. React documentation is very good. You can easily understand the topics from the react documentation. There are so many free basic courses on React JS. You can start this course at egghead. 
https://egghead.io/courses/the-beginner-s-guide-to-react
Or you can try 
https://scotch.io/starters/react/getting-started-with-react-2019-edition

[Back to table of content](#table-of-content)

### REDUX <a name="chapter-4"></a>
After learning React JS for some days you’ll face one problem for sure. State management with react is really easy but sometimes it’s messy, because of one-directional data flow we go down and down with components, but sending the same data to the parent is hard sometimes. This needed to write a lot of extra code to pass that data to the parent and with more team members, it’s harder! So here comes the REDUX magic. REDUX makes a single store where all state saved and we can use it from any component in react. I know it’s hard right now to understanding (if you are a beginner) but you need to understand the redux well because most of the company wants Both(REACT & REDUX).

There are some libraries I can mention which will helps you to work with redux. They are 
- Redux (This is primary needs)
- React-redux (This is for redux in react)
- Redux-logger (A middleware to log the changes)
- Redux-persist (Storing state in local storage)
- Reselect (Selector)
- Redux-thunk (For async operations)
- Redux-saga (For async operation)
About the redux-thunk & redux-saga, both do the same work. While redux-saga gives some extra benefits still it’s better to work with redux-thunk. 
See details – https://blog.isquaredsoftware.com/2020/02/blogged-answers-why-redux-toolkit-uses-thunks-for-async-logic/

[Back to table of content](#table-of-content)

### React Hooks <a name="chapter-5"></a>
React hooks introduced in React 16.8. React hooks comes with some features which help us to stop writing class component just for using states and other features. 

You can start with the conference video 
{% youtube dpw9EHDh2bM %}

Then you can have a crash course in
{% youtube f687hBjwFcM %}

Also, look into this
https://www.youtube.com/watch?list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A&v=cF2lQ_gZeA8

[Back to table of content](#table-of-content)

### Testing <a name="chapter-6"></a>
Nowadays learning to test is needed for getting a good job. The beginners will think why should we write more codes to test codes? Of course, we can do this manually, but sometimes we can’t find all the bugs by manual testing. Also, it’s time-consuming and needs an extra person to check it. But easily by writing codes, we can solve this issue. There are some cases where people write test cases before writing codes. Sometimes code creates some mysterious bugs which we can’t solve just with one look, sometimes we need to spend many times to check and find out the bug. So with writing test cases, it’s easier to find bugs and work with. To learning react testing starts with
https://reactjs.org/docs/testing.html

Then look into 
https://testing-library.com/docs/react-testing-library/intro

There is one youtube playlist you can check too
https://www.youtube.com/watch?list=PLLnpHn493BHEqP3gD1pCJYhxX6v2gBZzj&v=esVwR4lGwQE

[Back to table of content](#table-of-content)

### TypeScript (Optional) <a name="chapter-7"></a>
TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. [Wikipedia]

Typescript is needed for many jobs now a days. It’ll help to not going to some mysterious bugs in futures and have some other advantages too. 

I’ll suggest reading the official document first then 

{% youtube ahCwqrYpIuM %}

and finally, this one will be a great introduction 

{% youtube BwuLxPH8IDs %}

[Back to table of content](#table-of-content)

### Gatsby (Optional) <a name="chapter-8"></a>
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. [Official sites]

I’ll suggest looking into this & the official document

{% youtube 8t0vNu2fCCM %}

[Back to table of content](#table-of-content)

### Next JS(Optional) <a name="chapter-9"></a>
Production grade React applications that scale. The world’s leading companies use Next.js to build static and dynamic websites and web applications. [Official sites]

I’ll suggest looking into this & the official document
https://www.youtube.com/watch?list=PL8p2I9GklV44KV-ME2XR6yD-cM4Msy3su&v=dPFoLKPEXww

[Back to table of content](#table-of-content)

### Job Search <a name="chapter-10"></a>
After learning all of these concepts we’ll come down into job search. Before applying for any job I’ll suggest making
- A good resume
- Portfolio
- Linkedin Profile
- Open-source Project (Contribution)

These three can lead you into any good job. Linkedin is a great place to talk with recruiters and get hired by companies. Open source contribution can lead to a job because recruiters look into them too. So do some open source contribution if you are interested to learn more skills and apply them in real-life projects. Use job sites to search for jobs in your region. But if you are interested in the remote job then there are so many remote jobs nowadays, if you are interested you can look into it. Now search a company that you’ll like to work and look if they have any position on React JS. If they have any just apply there with a good cover letter. The cover letter should different for each company.

### Interviews
This part is tricky, getting job calls to need a good portfolio or some good one source contribution or else a recommendation. But doing good on the interviews get the job. So for the interview, I think everyone should a little bit focus on problem-solving skills & algorithms. You can practice algorithms in some coding sites, look into those and choose whatever you like and start solving some problems. 

Read this - https://learntocodewith.me/posts/technical-interview/

then this one too - https://github.com/yangshun/tech-interview-handbook

It’s not that easy to find a good job in 2020. But if you learned through someone else experience and spend time to be ready for the job then you’ll find the path is really easy. Normally we don’t prepare in a good way, so we don’t feel good when we face the situation. If you are prepared well then you’ll be confident in the job and grab the job easily! It’s on your determination and remember everyone fails. Finally, this is not a sprint, it’s a marathon! 

[Back to table of content](#table-of-content)

### Extra benefits of react
If you are interested to learn about the mobile app. Then you can learn react-native which will be super easy for you because already you learned about the react. So if you wanted to be an app developer then you also can try to follow this path. 

### Some Interesting Projects <a name="chapter-11"></a>

{% youtube U9T6YkEDkMo %}

{% youtube aq-fCtg_gG4 %}

{% youtube 204C9yNeOYI %}

{% youtube wPQ1-33teR4 %}

{% youtube I250xdtUvy8 %}

{% youtube ZwFA3YMfkoc %}

[Back to table of content](#table-of-content)

### Recap <a name="chapter-12"></a>

{% instagram B9rcB_7ArTk %}

[Back to table of content](#table-of-content)


I’ve started a programming community on discord. Click to join [Discord Channel](https://discordapp.com/invite/DCPm86M)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/learn-programming-for-free/).

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)  !

# References

https://reactjs.org/

https://www.gatsbyjs.org/

https://nextjs.org/

https://reactnative.dev/