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.
- let
- const
- Arrow functions
- imports and exports
- 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.
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.