Complete Skillset You Must Know as React developer ✡️

Subscribe to my newsletter and never miss my upcoming articles

Greetings 🖖 my amazing friend,

Today I'm writing the article to React just for one reason - I love 💛 Reactjs. I've no intentions to force you to learn to react or get into React. if you're currently getting started or already working on it then it's definitely for you, And please don't miss any points because every single skill or tip will help you to get better into ReactJS.

Few prerequisites

  • HTML5 and CSS3 - As frontend developers, we all mostly start from HTML and CSS and that's the good start of a career. We do create a cool and attractive design with help of HTML and CSS, JS provides functionally for every piece of design. If you've got a good understanding of how to link pages with CSS, HEAD, BODY section, and semantics element of HTML.

    • Semantic Elements in HTML -Semantic elements = elements with a meaning.

      A semantic element clearly describes its meaning to both the browser and the developer.👇🏻

      Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

      Examples of semantic elements:<form>,<table>, and <article> - Clearly defines its content.

  • JavaScript (JS) - If you have a basic understanding of JavaScript then it's enough to react. like - Validation of form, how click events work? storing data in variables, cookies, and so on. If you ever understood the programming concept of OOP then it will be a BONUS for you.

    I'm repeating again, you don't need to be an expert in Javascript to learn React.


Let's start the Reaction in React 🙀

Now we already know what React is built for what we are trying to achieve with it.

Point #1 - Basic understanding of ES6 features. The below points are the most common and required for writing react code and working as lib suggests.

  1. let
  2. const
  3. Arrow functions
  4. imports and exports
  5. classes

And Basic understanding of how to use NPM

The importance of the above points you will be asked the question about it in interviews.

Just not only let and const, but you will also be asked some questions related to ES6, JSX, Babel, Package manager, basic javascript or some other fundamental concepts.


Point #2 - JSX & Babel - In React we will work with JSX that looks like HTML and you can consider it like HTML-with JavaScript. It is the easiest way to add HTML code inside javascript or you can say it is the extension of the Javascript language syntax.

basic - const title = <h1> Welcome to React ✡️ </h1>

meaning - JSX = JavaScript + HTML


Point #3 - Arrays - Array Functions like .map() and .filter() - as React is essentially a view library, you’ll often be rendering items, or a list of records, to be displayed in your User interface.

Information like this is usually stored in an array in a component’s state and passed around from parent to child, where you iterate over the list of items and do something with it. Most often, you use .map() or .filter() in cases like these.


Point #4 - this - Binding and the this keyword - If you go for the ES6 class syntax, you’ll usually bind your utility functions (like handleClick/handleSubmit) to the class instance, using a **constructor**. Along with that, you’ll often refer to these functions using the this keyword. Prior knowledge of this and binding would help here.


Point #5 - Styling - Learning that JSX utilizes className instead of class for assigning class attributes and the nuances involved with how to assign styles inline become an important aspect of React as you begin to style basic pages.


Point #6 - State - React components has a built-in state object.

The state is data that we want to show to users or items in memory that we can access in order to allow our users to interact with our data. We hold all of the data that we present on an object called state and access these bits of data via properties on this state object.


Point #7 - Event Handlers - The native event object that you get with normal DOM manipulation in React is actually wrapped up in what’s called the SyntheticEvent. Make sure you can attach different types of events to HTML elements such as onclicks, onchange, mouseenter, etc.

But mostly you've to take care of such events in onChange for the input box.


Point #8 - Lifecycle - After understanding how we can create modular components and pass the data, next comes learning how to utilize the lifecycle to properly handle obtaining data, choosing when to trigger a re-render, and responding to other lifecycle-related nuances as appropriate. This is critical to making more involved applications.

  • Few key points to understand - React provides developers with many methods or “hooks” that are called during the life-cycle of a component, which allows us to update the UI and application state.

  • constructor - This is a special function that will get called whenever a new object is created. It’s very important to call a special function super in cases where our class extends any other class that also has a defined constructor. Calling this special function will call the constructor of our parent class and allow it to initialize itself. This is why we have access to this.props only after we’ve initially called super.

EventsDo ✅Don't ❌
constructorset initial statecause any side effects (API calls etc.)
componentWillMountupdate state via this.setStatecause any side effects (API calls etc.) on client-side
componentWillReceivePropssync state to propscause any side effects (API calls etc.)
shouldComponentUpdateuse for increasing performance of poor performing Componentscall this.setState
componentWillUpdatesynchronize state to propscause any side effects (API calls etc.)
componentDidUpdatecause side effects (API calls etc.)call this.setState as it will result in a re-render
componentDidCatchA new addition in React 16-
componentDidMountcause side effects (API calls etc.)call this.setState as it will result in a re-render
componentWillUnmountremove any timers or listeners created in lifespan of the componentcall this.setState, start new listeners or timers

For deep div understanding in react life cycle checkout the official doc or check the blog of Bartosz Szczeciński


Point #9 - ESLint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. And It's awesome 👍

Awesome because not only does ESLint identify ways to make code better, but if you don’t need or don’t agree with certain rules, they can be changed or ignored (either for the line, for the whole file, or for the whole project).

None of the rules depend on each other, they all function independently, and some rules can even fix the code themselves to fall in line with the prescribed rules.

Here is my setup for EsLint:-

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["compat"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true,
    "jest": true,
    "jasmine": true
  },
  "rules": {
    "generator-star-spacing": [0],
    "consistent-return": [0],
    "react/forbid-prop-types": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
    "global-require": [1],
    "import/prefer-default-export": [0],
    "react/jsx-no-bind": [0],
    "react/prop-types": [0],
    "react/prefer-stateless-function": [0],
    "react/jsx-wrap-multilines": ["error", {
      "declaration": "parens-new-line",
      "assignment": "parens-new-line",
      "return": "parens-new-line",
      "arrow": "parens-new-line",
      "condition": "parens-new-line",
      "logical": "parens-new-line",
      "prop": "ignore"
    }],
    "no-else-return": [0],
    "no-restricted-syntax": [0],
    "import/no-extraneous-dependencies": [0],
    "no-use-before-define": [0],
    "jsx-a11y/no-static-element-interactions": [0],
    "jsx-a11y/no-noninteractive-element-interactions": [0],
    "jsx-a11y/click-events-have-key-events": [0],
    "jsx-a11y/anchor-is-valid": [0],
    "no-nested-ternary": [0],
    "arrow-body-style": [0],
    "import/extensions": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "import/no-unresolved": [0],
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "ignore"
    }],
    "object-curly-newline": [0],
    "function-paren-newline": [0],
    "no-restricted-globals": [0],
    "require-yield": [1],
    "compat/compat": "error"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  },
  "settings": {
    "polyfills": ["fetch", "promises"]
  }
}

Point #10 - Node + npm - Yes node and NPM both are required to fully develop and test the application.

React developers need to have a solid understanding of the npm registry. This is the place where software developers can go to get the software to help them build software.

Sometime we need clear understanding which we should choose YARN OR NPM .

Yarn is a package manager that is built to utilize the npm registry. The yarn actually optimizes your npm workflows. Yarn and npm somewhat compete today, but the mission of Yarn has been to solve a lot of the problems that are accepted in the Node/npm ecosystem. npm has been doing everything it can to follow the patterns and practices that Yarn presents.


Point #11 - Redux - The state management library of React, Redux is another essential feature or skill that every developer must-have. Earlier developers have had a hard time dealing with the asynchronous nature of React updates.

Here is how I manage the Redux-Saga Application!

What is Redux Saga? Doc

How to manage the Redux store? where to write reducer, action, & how to update the state of an application?

The First thing to manage all the main part application with folders like,

  • models 📁
  • pages 📁
  • components 📁
  • layouts 📁

Example: -


Point #12 - Testing - You can test React components similar to testing other JavaScript code.

There are a few ways to test React components. Broadly, they divide into two categories:

  • Rendering component trees in a simplified test environment and asserting on their output.
  • Running a complete app in a realistic browser environment (also known as “end-to-end” tests).

    Recommended Tools

    • Jest -is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.

    • React Testing Library - is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children, a test runner like Jest lets you do this by mocking.

    • Cypress -E2E Testing tool - Fast, easy, and reliable testing for anything that runs in a browser.


Point #13 - Git - Git is essential to every developer's toolkit for storing projects on solutions like GitHub, Bitbucket, and GitLab. Skills that should just be part of your day-to-day include:

  • Tracking changes with add, commit, push and pull
  • Branching and merging strategies
  • Handling merge conflicts

All the above-listed points are which I've focused on so far, some might be not exactly related to you but most of them are common for React concept and functionally related to each other.

Wrapping Up 👋

Hope you enjoyed this article. Go add some nice reactions and cool comments below. You only need a few moments to like and comments, it will encourage me to write more good articles in the future. Share it with your friends let them know about this article.

Thank you for your time.✌️

Finally ✍️

If you have time then do check out my other article & many of them are related to Ant. Design.

Here is the most viewed post so far

👇🏻

👋 If you're using Twitter and posting code snippets then do checkout bonus post for you.

Nkoro Joseph's photo

This was really nice. One question, since I currently use almost everything mentioned apart from redux-saga because I use Redux, does that mean I am set for any kind of react job? I am scared to apply for react job. Feel like I am not ready.

Rajesh Prajapati's photo

Thanks for the comments.

I would suggest you learn all the possible basic concepts. And do create as many projects as you can with react. Try to solve the problem with Redux.

Remember the Redux will only help you manage data. You have to write the concepts to manage the application.

Once you understand managing the application then you're ready to apply for a JOB. keep in mind all the basics will help you, to get better and advance in any programming language.✌️

Edidiong Asikpo's photo

This is really really amazing, Rajesh Prajapati. I love how you dissected everything.

Rajesh Prajapati's photo

Thank you 🙏 so much means a lot.

Gonzalo Simon's photo

Very nice job. No doubt, this is useful information!

Shekh Aliul's photo

Enjoyed every para of this article. Thanks for sharing❤️

Dattaram Hodawadekar's photo

Helpful content👍

Olubisi Idris Ayinde's photo

This is amazing 👏 thanks for sharing

Piyush Sinha's photo

Nice read. Can you recommend some good resources on Redux? I'm thinking of buying Stephen Grider's React + Redux course. Is it good?

Rajesh Prajapati's photo

Thanks 🙏

Hi Piyush, I've not used any specific course for redux,

but I do recommend you this YT playlist:

youtube.com/playlist?list=PLMV09mSPNaQlWvqE..

This will help you to understand the redux-saga. ✌️

Piyush Sinha's photo

Thank you, Rajesh.