DEV Community

loading...
Cover image for Complete Skillset You Must Know as React developer ✡️

Complete Skillset You Must Know as React developer ✡️

rkumar1904 profile image Rajesh Prajapati Originally published at rjlooper.me ・8 min read

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 at 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.

Events Do ✅ Don't ❌
constructor set initial state cause any side effects (API calls etc.)
componentWillMount update state via this.setState cause any side effects (API calls etc.) on client-side
componentWillReceiveProps sync state to props cause any side effects (API calls etc.)
shouldComponentUpdate use for increasing performance of poor performing Components call this.setState
componentWillUpdate synchronize state to props cause any side effects (API calls etc.)
componentDidUpdate cause side effects (API calls etc.) call this.setState as it will result in a re-render
componentDidCatch A new addition in React 16 -
componentDidMount cause side effects (API calls etc.) call this.setState as it will result in a re-render
componentWillUnmount remove any timers or listeners created in lifespan of the component call 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.

  • ** Airbnb ESLint ** -The ESLint rules that Airbnb abides by are considered among many as the gold standard for React. They are strict, they are unforgiving and they are thorough.

GitHub logo airbnb / javascript

JavaScript Style Guide

Airbnb JavaScript Style Guide() {

A mostly reasonable approach to JavaScript

Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent.

Downloads Downloads Gitter

This guide is available in other languages too. See Translation

Other Style Guides

Table of Contents

  1. Types
  2. References
  3. Objects
  4. Arrays
  5. Destructuring
  6. Strings
  7. Functions
  8. Arrow Functions
  9. Classes & Constructors
  10. Modules
  11. Iterators and Generators
  12. Properties
  13. Variables
  14. Hoisting
  15. Comparison Operators & Equality
  16. Blocks
  17. Control Statements
  18. Comments
  19. Whitespace
  20. Commas
  21. Semicolons
  22. Type Casting & Coercion
  23. Naming Conventions
  24. Accessors
  25. Events
  26. jQuery
  27. ECMAScript 5 Compatibility
  28. ECMAScript 6+ (ES 2015+) Styles
  29. Standard Library
  30. Testing
  31. Performance
  32. Resources
  33. In the Wild
  34. Translation
  35. The JavaScript Style Guide Guide
  36. Chat With Us About JavaScript
  37. Contributors
  38. License
  39. Amendments

Types

  • 1.1 Primitives: When you access a primitive type you work…

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"]
  }
}
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo redux-saga / redux-saga

An alternative side effect model for Redux apps

Redux Logo Landscape

redux-saga

npm version CDNJS npm Build Status Join the chat at https://gitter.im/yelouafi/redux-saga OpenCollective OpenCollective

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well.

It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. (if you're not familiar with them here are some introductory links) By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/…

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.

    GitHub logo facebook / jest

    Delightful JavaScript Testing.

    npm version Jest is released under the MIT license. Follow on Twitter

     

    🃏 Delightful JavaScript Testing

    👩🏻‍💻 Developer Ready: A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.

    🏃🏽 Instant Feedback: Fast, interactive watch mode only runs test files related to changed files.

    📸 Snapshot Testing: Capture snapshots of large objects to simplify testing and to analyze how they change over time.

    See more on jestjs.io

    Table of Contents

    Getting Started

    Install Jest using yarn:

    yarn add --dev jest
    Enter fullscreen mode Exit fullscreen mode

    Or npm:

    npm install --save-dev jest
    Enter fullscreen mode Exit fullscreen mode

    Note: Jest documentation uses yarn commands, but npm will also work. You can compare yarn and npm commands in the yarn docs, here.

    Let's get started by writing a test…

  • ** 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.

GitHub logo testing-library / react-testing-library

🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library

goat

Simple and complete React DOM testing utilities that encourage good testing practices.


Read The Docs | Edit the docs



Build Status Code Coverage version downloads MIT License All Contributors PRs Welcome Code of Conduct Discord

Watch on GitHub Star on GitHub Tweet

Table of Contents

The problem

You want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

The solution

The React Testing Library is a very…

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

GitHub logo cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.

Documentation | Changelog | Roadmap

The web has evolved. Finally, testing has too.

Fast, easy and reliable testing for anything that runs in a browser.

npm Gitter chat StackShare

What is Cypress?

Why Cypress Video

Installing

npm version

Install Cypress for Mac, Linux, or Windows, then get started.

npm install cypress --save-dev
Enter fullscreen mode Exit fullscreen mode

or

yarn add cypress --dev
Enter fullscreen mode Exit fullscreen mode

installing-cli e1693232

Contributing

  • CircleCI - develop branch
  • CircleCI - master branch

Please see our Contributing Guideline which explains repo organization, linting, testing, and other steps.

License

license

This project is licensed under the terms of the MIT license.

Badges

Let the world know your project is using Cypress.io to test with this cool badge

Cypress.io

[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)

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.🥂

Discussion (1)

pic
Editor guide
Collapse
mnlfischer profile image
Manuel

Thanks for your work. I think destructuring is a es6 feature you should add and the preferred way for components are function components.