diff --git a/react/class_components/class_based_components.md b/react/class_components/class_based_components.md index 2bcec1e23cf..1d1455278c3 100644 --- a/react/class_components/class_based_components.md +++ b/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 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]. ```jsx -import React, { Component } from "react"; +import { Component } from "react"; class ClassInput extends Component { constructor(props) { diff --git a/react/more_react_concepts/refs_and_memoization.md b/react/more_react_concepts/refs_and_memoization.md index 4bcbe918be0..fb42ff979e0 100644 --- a/react/more_react_concepts/refs_and_memoization.md +++ b/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; diff --git a/react/react_testing/introduction_to_react_testing.md b/react/react_testing/introduction_to_react_testing.md index 8c951285910..b1db831103e 100644 --- a/react/react_testing/introduction_to_react_testing.md +++ b/react/react_testing/introduction_to_react_testing.md @@ -75,7 +75,7 @@ There are numerous ways a user can interact with a webpage. Even though live use ```jsx // App.jsx -import React, { useState } from "react"; +import { useState } from "react"; const App = () => { const [heading, setHeading] = useState("Magnificent Monkeys"); diff --git a/react/states_and_effects/how_to_deal_with_side_effects.md b/react/states_and_effects/how_to_deal_with_side_effects.md index 4337d0c0461..8819bf607bb 100644 --- a/react/states_and_effects/how_to_deal_with_side_effects.md +++ b/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(""); diff --git a/react/the_react_ecosystem/type_checking_with_proptypes.md b/react/the_react_ecosystem/type_checking_with_proptypes.md index 6d5dbcc7823..fc832155870 100644 --- a/react/the_react_ecosystem/type_checking_with_proptypes.md +++ b/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
{props.name}
; @@ -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) => {