React: Remove redundant default imports of React from code examples

react/class_components/class_based_components.md

@@ -23,7 +23,7 @@ In your career, chances are, you will be dealing with legacy code, so there will
 As we already know about functional components, let us build a class-based component from a functional one. Usually, you will want to divide the contents of a component, like the one we use, into smaller, reusable components, but for the purposes of this exercise, we stick to one component. Below, we have a sample functional component:
 
 ```jsx
-import React, { useState } from "react";
+import { useState } from "react";
 
 const FunctionalInput = ({ name }) => {
   const [todos, setTodos] = useState(["Just some demo tasks", "As an example"]);
@@ -72,7 +72,7 @@ That was a solid chunk of code. Take a while, sip some water and read it a coupl
 Now, let's try to recreate it as a class-based component. The first thing it should have is, *drumroll*, a class! But it cannot be just another class, it will need to have certain properties that qualifies it as a React component. React provides us with all those properties on a class called `Component`, and we can write our components by extending the given class, as shown below:
 
 ```jsx
-import React, { Component } from "react";
+import { Component } from "react";
 
 class ClassInput extends Component {
   // Some code goes here
@@ -100,7 +100,7 @@ The props, that get passed into this component, gets passed into the class's `co
 If your component doesn't have any props, it is fine to leave the `constructor` and the `super` with no arguments.
 
 ```jsx
-import React, { Component } from "react";
+import { Component } from "react";
 
 class ClassInput extends Component {
   constructor(props) {
@@ -119,7 +119,7 @@ Now that the props can be accessed inside of the class component, the next issue
 Well, you can do that by returning your JSX from a `render` method! You can use the props that you declared in the constructor too!
 
 ```jsx
-import React, { Component } from "react";
+import { Component } from "react";
 
 class ClassInput extends Component {
   constructor(props) {
@@ -155,7 +155,7 @@ Notice how the props get provided by `this`, unlike the functional component tha
 Next comes the state. In a class-based component, the state gets initialized as a part of the constructor.
 
 ```jsx
-import React, { Component } from "react";
+import { Component } from "react";
 
 class ClassInput extends Component {
   constructor(props) {
@@ -192,7 +192,7 @@ The pre-defined `setState` method can be used to set it again! Remember, state m
 <span id="the-importance-of-bind">Now, it is time to finish it off by adding all the functionality! It is nearly the same, except for a single difference. Whenever a method is declared, you must `bind` the `this` of the method to that of the class in order to work with it, as by default, the methods in a class are not bound to it. Usually, you do this inside the constructor and not at runtime [in the render method].</span>
 
 ```jsx
-import React, { Component } from "react";
+import { Component } from "react";
 
 class ClassInput extends Component {
   constructor(props) {

react/more_react_concepts/refs_and_memoization.md

@@ -146,7 +146,7 @@ You do not need to start a React application for this. We've already got you cov
 Do note that this is just a very basic example. You will encounter a lot of passing of values to other components as prop, components that are very heavy to render.
 
 ```jsx
-import React, { useState } from "react";
+import { useState } from "react";
 
 const ButtonComponent = ({ children, onClick }) => {
   let i = 0;
@@ -213,7 +213,7 @@ const handleClick = useMemo(
 Great, `useMemo` should help us here right? It shouldn't possibly re-render the `ButtonComponent` again correct? Nope, it will still re-render because whenever a component's `state` changes, it will also re-render its children, which could also be said differently - a component will re-render itself if its parent re-renders. Is there a way to fix this? Yes, there is! React in one of its APIs provides the [memo wrapper function](https://react.dev/reference/react/memo) that lets you skip re-rendering a component when its props are unchanged (yes, even if the parent re-renders). We can use this `memo` and wrap the `ButtonComponent` in it.
 
 ```jsx
-import React, { useState, memo } from "react";
+import { useState, memo } from "react";
 
 const ButtonComponent = memo(({ children, onClick }) => {
   let i = 0;

react/states_and_effects/how_to_deal_with_side_effects.md

@@ -22,7 +22,7 @@ This section contains a general overview of topics that you will learn in this l
 Let us take a component in question. We want to make a `Clock` component that shows how many seconds have passed since the user has loaded the webpage. To update it every second, we can use our nifty `setInterval` function to add one to the `counter` state variable, every second. Let's try putting it in the body of our component.
 
 ```jsx
-import React, { useState } from "react";
+import { useState } from "react";
 
 export default function Clock() {
   const [counter, setCounter] = useState(0);
@@ -44,7 +44,7 @@ When our component first renders, it calls our initial `setInterval` function. T
 This is where the `useEffect` hook swoops in to save us. We can wrap this calculation inside a `useEffect` hook to move it outside the rendering calculation. It accepts a callback function with all the calculations.
 
 ```jsx
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function Clock() {
   const [counter, setCounter] = useState(0);
@@ -72,7 +72,7 @@ Fortunately, the second argument accepts an array of dependencies allowing the h
 We pass an empty array in this example because we do not want the `useEffect` hook to run anytime other than the initial component render.
 
 ```jsx
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function Clock() {
   const [counter, setCounter] = useState(0);
@@ -118,7 +118,7 @@ Notice that every time the `useEffect` hook runs, a new `setInterval` is used.
 You can return a function from the callback in the `useEffect` hook, which will be executed each time before the next effect is run, and one final time when the component is unmounted. In this case, let us clean up the interval with a cleanup function.
 
 ```jsx
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function Clock() {
   const [counter, setCounter] = useState(0);
@@ -163,7 +163,7 @@ Let us address a few cases where `useEffect` does not need to be used.
 - You do not need to use an effect if you are only calculating something based on the state during rendering. For a change in a component, due to a change in the props, you can calculate and set it during rendering.
 
     ```jsx
-    import React, { useState } from "react";
+    import { useState } from "react";
 
     export default function AdditionDisplay() {
       const [number1, setNumber1] = useState(0);
@@ -187,7 +187,7 @@ Let us address a few cases where `useEffect` does not need to be used.
 - You do not need effects for events. Code that runs when a component is **displayed** should be in effects, the rest should be in events.
 
     ```jsx
-    import React, { useState } from "react";
+    import { useState } from "react";
 
     export default function App() {
       const [input, setInput] = useState("");

react/the_react_ecosystem/type_checking_with_proptypes.md

@@ -31,7 +31,6 @@ Here is a very basic example of how we would use it in a component that renders
 
 ```jsx
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const RenderName = (props) => {
   return <div>{props.name}</div>;
@@ -57,7 +56,6 @@ RenderName.propTypes = {
 Another cool thing we can do in combination with PropTypes is passing in default props:
 
 ```jsx
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const RenderName = (props) => {