Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last updated: Oct 29, 2021

ReactJs

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC. React JS is also called simply React or React.js.
Top 5 skills to learn before you start with ReactJs
Author
0 upvotes
Pagination in Reactjs EASY
In this blog, we will learn about Pagination in Reactjs. We will understand its core concepts, its usage, and much more for better understanding.
Top 10 React.Js Books to Enhance Web Development Skills
Author
0 upvotes

Introduction

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. This category will give you a small brief about Reactjs.
ReactJS Tutorial EASY
React JS, is a popular open-source JavaScript library used for building UI. It is designed to make it easier to build reusable UI components that can be used throughout the application.
Getting started with React
This blog includes the basic concepts for getting started with React, creating the React starter app, React folder structure, etc.
Component Architecture
This blog covers the concept of component architecture in react and how it is helpful in web development.
Single Page Apps vs. Multi-Page Apps
There are two types of web applications - Single Page and Multi Pages. This blog will describe the differences between Single Page Apps vs. Multi-Page Apps.
Introduction to Babel
This blog covers the concept of babel, a Javascript transpiler, and gives insight into the working process of an application using babel.
Introduction to Webpack
This blog covers the concept of webpack. We will learn about webpack configurations, webpack as a modular bundler and the development server in webpack.
Next js vs React js EASY
In this article, we extensively discuss React js and Next js, how they compare and how they perform as agile frontend development tools
Top 15 React Js Projects in 2023 MEDIUM
This article will deeply give you really good ideas for creating react Js projects with how react Js can be used for creating these projects.
ESLint Plugin React EASY
In this blog, we will learn about ESLint Plugin React. We will learn about ESLint, and discuss the installation process. We will also see one example.
Advantages and Disadvantages of React JS
This blog gives an overview of disadvantages and advantages of ReactJS

Main Concepts

There's never been a better time to learn React. You'll develop a strong understanding of React's most essential concepts: JSX, class and function components, props, state, lifecycle methods, and hooks.
Props in React
JavaScript plays an important role in designing the UI of a webpage. While designing UI using React, it is important to have a solid understanding of Props in React. This article describes Props in React.
Class Components in React EASY
Components in React are of two types. Class components in React are one such type of component and are discussed in this article.
State and Lifecycle
In this article, we will be looking at how the working of State and Lifecycle takes place in react.
Handling Events in React
Events are one of the most important parts of react.js. In this article, we will be discussing handling events in react.
React Components Lifecycle
A component is one of the core building blocks in React. In this blog, we will be discussing the React components lifecycle.
Author Ranjul
0 upvotes
Using Chart.js with React MEDIUM
React Chart.js simplifies chart and graph creation in React, offering a user-friendly JavaScript library.
React Toastify MEDIUM
React-Toastify emerges as a remarkable library for orchestrating sleek notifications within React applications, fostering enhanced user engagement.
Conditional Rendering in React
This blog describes the concept of conditional rendering in React and ways to achieve it.
REACT Lists and Keys
This blog covers the concept of React lists and keys, the need for the React lists and keys, and how to generate unique keys for lists.
Lifting The State Up in ReactJS
In React, whenever a state needs to be shared with siblings, we lift the state up to the closest common ancestor. This is called "Lifting The State Up."
Author Ranjul
0 upvotes
Difference between Composition and Inheritance in React
This blog covers the concept of composition and inheritance in React and the difference between composition and inheritance in React.
Map in ReactJS MEDIUM
The map function, in simple terms, produces a new array from an existing one. The map method basically runs a function for each item in the array.
For Loop in React JS EASY
This article extensively covers the concept of the loop in ReactJS
Login Page in React JS EASY
ReactJS is an open-source library that is based on User Interface components. It is a JavaScript library which is responsible for the view layer.
Use of render() in React js
This article will deeply explain render() in react js and why we need to use the render(). 
useState() in React Js EASY
In this blog, we will learn about the useState() in React Js and when and how we can use the useState() method.
Dropdown in react js MEDIUM
A Dropdown in React is a graphical user interface element that presents a list of options or actions that a user can select from.
Features of React js EASY
What are the features of ReactJS ? 1. JavaScript XML or JSX 2. Virtual DOM 3. One-way data binding 4. Component-Based Architecture
Table in React js EASY
Learn step-by-step commands on how to create a table in React JS with its importance and advantages. Also, see data tables in React js with examples.

Advanced Guides

Take a deep dive into full-stack JavaScript with React.js and learn advanced concepts like the context API, HOCs, external state, performance optimization, asynchronous APIs, testing, deployment, and more.
REACT Accessibility
This blog covers the concept of React accessibility, react accessibility issues, and the solutions to overcome them.
Code-Splitting in React MEDIUM
This article will discuss the concept of code splitting and its implementation with examples.
REACT Context
This blog covers the concepts of React context, createContext, provider, consumer, and how to use react context API.
Higher-Order Components in React
A higher-order component is an advanced technique in React for reusing component logic. They are a pattern that emerges from React’s compositional nature.
React JSX in Depth
This blog covers the concept of React JSX, the need for JSX in-depth, attributes, and commenting out the code in JSX.
Render Props in React
Render props in react is a technique that allows sharing of code among several components using a prop whose value is a function. It helps to increase the code reusability.
Forwarding Refs in React
Ref forwarding is a technique for automatically passing a ref through a component to one of its children.
REACT Fragments
This blog covers the concept of React fragments, the returning of multiple elements, conditional rendering, array rendering, and the use of React fragments.
Optimizing Performance in React
React uses several techniques to minimize the number of costly DOM operations. There are several other ways to speed up your React application; this article will discuss ways of Optimizing Performance in React.
React Profiler
This blog explains the concept of React Profiler and the prerequisites and tools required. The React Profiler DevTool and React Profiler API are also discussed.
React Without ES6
ES6 is the 6th version of the ECMAScript programming language. We will learn how to implement React without ES6.
React without JSX
In React, JSX allows us to use JavaScript and its rich functionality coupled with HTML directly. However, one can use React without JSX as well. This blog will teach you how to do so.
React Reconciliation
This blog covers the concept of React reconciliation, which explains how React modifies the browser's DOM.
React Refs and DOM
This blog covers the concept of React refs and DOM and also explains the use of refs, DOM, and ReactDOM.
Static Type Checking
This article will explore static type checking and its implementation in JavaScript.
React Portals MEDIUM
Portals provide a first-class way to render children into a DOM node outside the parent component’s DOM hierarchy.
Type Checking with PropTypes
This blog explains the concept and implementation of Type Checking with PropTypes in React.
Uncontrolled Components in React
This blog discusses the concepts of uncontrolled components used in React applications.
Web Components
Web Components are a way of building custom, reusable, encapsulated HTML tags to use in web pages and web apps.
React: Fiber Architecture
This blog covers the concept of React fiber architecture and the need for it. We also learn about the elements being rendered into DOM.
Axios in React MEDIUM
In this article, we will learn about Axios in React and the types of requests with their implementation. We will also cover the advantages of Axios.

Hooks

“Hooks are a new addition to React in version 16.8 that allows you to use state and other React features, like lifecycle methods, without writing a class.” ... Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.
React Hooks EASY
This blog covers the concept of React hooks, the rules to consider while using hooks, different state variables, basic and custom hooks.
Hooks at glance
This article delivers all the information you need to understand Hooks in ReactJs. We have covered the bare Hooks and also how we can create our custom-built Hooks.
Using the Effect Hook
This article describes what Effect hooks are and how we can use them in our applications. We have also briefly covered the two types of effects and a few tips about using them.
Rules of Hooks
This article contains a discussion around the rules of Hooks, a brief introduction to the ESLint plugin and why they came into existence, and finally some frequently asked questions.
Build Your Own Custom Hooks EASY
This article contains information on React Hooks and Custom Hooks in React.
Hooks API Reference
This article describes first with the introduction of hooks. Then proceed to basic hooks, useEffect, use context, and at last, some additional hooks.
useRef hook in React
In this article, you’ll learn what a useRef hook is and how to use it in the best possible way.
useMemo hook in React
In this article, we will explore the useMemo hook and how it can be leveraged to boost performance in our application.
Learn How to use React Js useCallback() hook
In this blog, you will learn about the useCallback hook in ReactJS with the help of some use cases. Read the following blog to understand it in detail
Frequently Asked Questions about Hooks
This article covers the 25 top most frequently asked questions on Hooks. It is a small guide for young developers to know all about React Hooks and how they can use it in their applications.

Redux

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library.
Router in React js MEDIUM
Routing to front-end applications is an essential concept, and in this blog, you will learn about the use of React Router to route anywhere in your react application.
Redux-first Routing Model
This article briefly describes the redux-first routing model with a detailed explanation of the application code and the npm package which you can use to integrate the model in your project.
Reach Router
In this blog, we will discuss a popular routing package reach router in detail with some examples
useReducer
this is a complete guide for useReducer hook in Reactjs we will discuss useReducer in detail with some examples and illustrations.
Redux Thunk EASY
In this blog, we will learn about Redux Thunk. We will understand its core concepts, and learn about cover functionality, arguments, and much more for better understanding.
React Js - Redux: Basic Concepts and Data Flow MEDIUM
Explore Redux in React JS: Fundamental concepts, principles & data flow explained with examples. Master Redux API terminology for a clear understanding.
Redux States, Actions and Reducers
This article will explain the states, actions and reducer functions in Redux. We have illustrated the article with examples and code snippets for a better grasp of the concept.
Concepts of Redux MEDIUM
In this article, we will explore the concepts of redux, and data flow and see how things work about it with the help of examples.
Using Redux with UI and React
This article explains how Redux works with a UI layer to add a user interface to our previous app concept.
Async Logic and Data Fetching in Redux HARD
This blog contains information on data fetching in Redux and Redux-thunk middleware.