ترفندهای طلایی ری اکت با مثال های کاربردی – بخش سوم

با عرض سلام خدمت همراهان آکادمی راهکارینو، به بخش سوم از ترفندها و نکات طلایی ری اکت خوش آمدید. در بخش دوم، 20 مورد از نکات طلایی ری اکت را به همراه مثال های کاربردی بررسی کردیم. در این مقاله که بخش آخر از ترفندهای طلایی ریکت است، می خواهیم با 20 ترفند دیگر در ReactJS آشنا شویم.

41- نحوه اجرای حلقه for روی المان:

گاهی وقت ها ممکن است بخواهیم روی آرایه ای از المان ها حلقه for اجرا کنیم و در UI رندر کنیم. تصور کنید که آرایه ای از user ها داریم و می خواهیم آنها را در یک ul-li نمایش دهیم. کد زیر را خواهیم داشت:

import React from "react";

function App() {
  const users = ["user1", "user2", "user3"];
  const final = [];

  for (let  user of users) {
    final.push(<li key={user}>{user}</li>);
  }
  return (
    <div className="App">
      <ul>{final}</ul>
    </div>
  );
}

export default App;

ابتدا با استفاده از حلقه for…in در جاوا اسکریپت، یک آرایه جدید بنام final را پر می کنیم. (توسط متد push) که آیتم های این آرایه تگ های li هستند که شامل نام یوزر می باشند. سپس آرایه final را در UI رندر می کنیم. کد فوق بصورت فانکشن کامپوننت است.

در کد زیر مثال بالا را در کلاس کامپوننت اجرا کرده ایم:

import React from "react";

class App extends React.Component {
  render() {
    const users = ["user1", "user2", "user3"];
    const final = [];
    for (let user of users) {
      final.push(<li key={user}>{user}</li>);
    }
    return (
      <div className="App">
        <ul>{final}</ul>
      </div>
    );
  }
}

export default App;

42- تعریف HOC و بررسی مثالی از آن:

Higher Order Component یا بصورت مخفف HOC یک تابع جاوا اسکریپتی است که یک کامپوننت را بعنوان آرگومان ورودی می گیرد و یک کامپوننت جدید بر می گرداند.در واقع HOC ها به ما کمک می کنند تا بتوانیم از کامپوننت ها استفاده مجدد کنیم (reusable). در مثال زیر می خواهیم یک کامپوننت HOC بنویسیم که props کامپوننت ورودی را در کنسول لاگ می گیرد:

import React from "react";

function LogProps(MyComponent) {

  class NewComponent extends React.Component {

    componentDidMount() {
      console.log(this.props);
    }

    render() {
      return <MyComponent {...this.props} />;
    }
  }

  return NewComponent;
}

export default LogProps;

در کد زیر نحوه استفاده از کامپوننت رده بالای LogProps را نمایش دادیم:

import React from "react";
import LogProps from "./hoc";

function Welcome(props) {
  return <h1>Welcome {props.name}</h1>;
}

export default LogProps(Welcome);

43- مفهوم Interceptor ها در ری اکت:

کاربرد interceptor در کتابخانه axios می باشد. بطور کلی می توان از interceptor در دو حالت استفاده کنیم: request و response

وقتی یک ریکوئست به سرور ارسال می کنیم، می توان توسط interceptor ها داده های موردنظر را به همراه درخواست مان ارسال کنیم. مثلا می خواهیم برای تمام ریکوئست های post داخل اپلیکیشن، یک header مشخصی ارسال شود.

استفاده از interceptor در request:

در حالت request interceptor دو تابع کال بک داریم. اولین تابع برای تعریف config درخواست است و دومین تابع callback برای مدیریت خطاهای احتمالی می باشد. به مثال زیر توجه کنید:

// Request interceptor for API calls
axios.interceptors.request.use(
  async config => {
    const value = await redisClient.get(rediskey)
    const keys = JSON.parse(value)
    config.headers = { 
      'Authorization': `Bearer ${keys.access_token}`,
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded'
    }
    return config;
  },
  error => {
    Promise.reject(error)
});

در مثال فوق سه آیتم Authorization و Accept و Content-Type را برای header ریکوئست های ارسالی تعریف کرده ایم.

استفاده از interceptor در response:

کاربرد دوم interceptor ها در پاسخ (response) سرور می باشد. به مثال زیر توجه کنید:

axios.interceptors.response.use(
  (response) => {
    return res;
  },
  async (error) => {
    if (error.response) {
      if (error.response.status === 401) {
        // Do something, call refreshToken() request for example;
        // return a request
        return axios_instance(config);
      }

      if (error.response.status === ANOTHER_STATUS_CODE) {
        // Do something 
        return Promise.reject(error.response.data);
      }
    }

    return Promise.reject(error);
  }
);

در کد فوق مشاهده می کنیم که response interceptor هم مانند request شامل دو تابع callback می باشد. می توان برای تمام خطاهای احتمالی (مانند 401) پیغام خطای مناسب آن را تعریف کنید.

44- نحوه بهبود سئو توسط Helmet:

توسط کتابخانه Helmet می توانیم روی تگ های head صفحات اپلیکیشن ریکت کنترل داشته باشیم. ابتدا برای نصب این کتابخانه دستور زیر را اجرا کنید:

npm i react-helmet

در کد زیر نحوه استفاده از لایبرری Helmet را نمایش داده ایم:

import React from "react";
import { Helmet } from "react-helmet";

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>My seo app</title>
        <meta name="description" content="testing react helmet" />
        <meta name="keywords" content="react,seo,helmet" />
      </Helmet>
      <h1>Hello react</h1>
      <h2>This is app route</h2>
    </div>
  );
}

export default App;

45- نحوه ریدایرکت یک صفحه در ریکت:

اگر بخواهیم یک صفحه را به یک صفحه دیگر در اپلیکیشن ری اکت ریدایرکت کنیم، می توان از کامپوننت Redirect در کتابخانه react-router-dom استفاده کنیم. این کامپوننت دو props می گیرد: from و to. بصورت زیر می توان عملیات ریدایرکت را انجام داد:

import React from 'react';
import {BrowserRouter as Router,Route,
 Redirect,Switch} from 'react-router-dom';
import Home from './App.js';
import Tutorials from './tutorials.js';

function Routes(){
    return (
    <Router>
      <div>
        <Switch>
           <Route path="/" component = {Home}>
           <Redriect from='/blog/' to="/tutorials/" />
           <Route path="/tutorials/" component={About} />
        </Switch>
      </div>
    </Router>
    )
}

46- نحوه کار با Context-API:

در حالت عادی می توان با ارسال داده ها از طریق Props آنها را بین دو کامپوننت مختلف به اشتراک گذاشت. اما در مواقعی نیاز است که تمام کامپوننت های ما به مقدار یک دیتای مشخص دسترسی داشته باشند. در حالت استفاده از props کار منطقی نمی باشد. یکی از روش های مدیریت اینکار، استفاده از Context در ریکت است. یکی از کاربردهای Context بررسی توکن و احراز هویت کاربران لاگین شده می باشد.

برای کار با Context باید متد React.createContext را با یک مقدار اولیه صدا بزنیم. فایل context.js به شکل زیر تعریف شود:

import React from "react";

const ThemeContext = React.createContext('dark'); //passing initial value

export default ThemeContext;

فرض کنید دو کامپوننت Contact و Posts در برنامه ما نیاز دارند به مقدار state (در این مثال Theme) دسترسی داشته باشند. حالا در کامپوننت Layout کد زیر را خواهیم داشت:

import React,{Component} from 'react';
import App from './app'
import ThemeContext from './context'


class Layout extends Component {

state={
    light: true
}


changeTheme=()=>{
    this.setState({
        light:!this.state.light
    })
}

    render() {
        return (
            <div>
               <button onClick={this.changeTheme}>Change theme</button>
                <ThemeContext.Provider value={{
                    light: this.state.light
                }}>
               <App/>
                </ThemeContext.Provider>
            </div>
        )
    }

}

و سورس کد کامپوننت Posts برای استفاده از Context به شکل زیر است:

import React from 'react'
import ThemeContext from './context'
import './posts.css'

function Posts() {

  return (
    <ThemeContext.Consumer>
      {(theme) => (

        <div className={theme.light ? "posts": "posts dark" }>
          <ul>
            <li>post 1 </li>
            <li>post 2 </li>
            <li>post 3 </li>

          </ul>

        </div>
      )
      }
    </ThemeContext.Consumer>
  )

}

export default Posts;

کامپوننت ThemeContext.Provider: به منظور ارسال دیتا به کامپوننت های فرزند توسط props بکار می رود.

کامپوننت ThemeContext.Consumer: به منظور استفاده از دیتای مذکور با در نظر گرفتن تابع بعنوان فرزند بکار می رود.

47- نحوه ارسال پارامتر به onClick:

معمولا در ری اکت رویداد onClick به شکل زیر تعریف می شود:

<button onClick={handleClick} >Click me</button>

اما برای اینکه بتوانید پارامتری را به این رویداد پاس دهید به شکل زیر عمل کنید:

<button onClick={()=>handleClick(someValue)} >Click me</button>

48- نحوه کار با spread operator:

فرض کنید دیتای زیر را داریم:

var person= {
    name: 'John',
    age: 10
}

می توان این دیتا را بصورت spread به کامپوننت موردنظر ارسال کرد:

<Person {...person}/>

کد فوق معادل کد زیر می باشد:

<Person name={person.name} age={person.age}/>

49- نحوه لود تگ script در کامپوننت:

گاهی اوقات نیاز داریم یک اسکریپت خارجی (external script) را در کامپوننت خود لود کنیم. به این منظور باید کد زیر را در نظر بگیریم:

import React,{Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://some-scripturl.js";
    this.div.appendChild(script);
  }
  render() {
    return (
      <div className="App" ref={el => (this.div = el)}>
        <h1>Hello react</h1>
        {/* Script is inserted here */}
      </div>
    );
  }
}

export default App;

خروجی کد فوق به شکل زیر است:

همانطور که مشاهده می کنید، تگ اسکریپت موردنظر در بین المان های htmlدرج شده است. اما اگر حالت بهینه تر اینست که بتوانیم آنرا در تگ head قرار دهیم. بدین منظور خواهیم داشت:

import React,{Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://some-scripturl.js";
    //For head
    document.head.appendChild(script);

    // For body
    document.body.appendChild(script);
  }
  render() {
    return (
      <div className="App">
        <h1>Hello react</h1>
      </div>
    );
  }
}

50- نحوه تعریف صفحه 404 در ریکت:

در این بخش می خواهیم نحوه تعریف صفحه 404 یا Not-Found را در کتابخانه react-router بررسی کنیم. وقتی کاربر یک مسیر اشتباه را در مرورگر اجرا می کند باید به او یک صفحه 404 نمایش دهیم تا متوجه شود مسیر وارد شده در اپ وجود ندارد و اشتباه است.

برای ایجاد صفحه 404 می توان یک فایل بنام js.404 تعریف کرد و کد زیر را برای آن در نظر گرفت:

import React from 'react';

const NotFound = () => {
  return <h1>404- Page NotFound</h1>;
}

export default NotFound;

حال باید کامپوننت 404 را در فایل Routes نیز اضافه کرد:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link }
from "react-router-dom";

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/404';

const Routes = ()=> {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/" component={Home}>
          <Route path="/about" Component={About}/>
          <Route path="*" component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}

در کد فوق، توسط کامپوننت Switch مسیرهای مختلف را تعریف کرده ایم. دو مسیر اول یعنی / و about/ مسیرهای مجاز و در دسترس هستند و هر مسیر دیگری به غیر از این دو مسیر به کامپوننت 404 ریدایرکت می شود.

خروجی کار:

51- کاربرد تابع Connect در ریداکس:

تابع connect به توسعه دهنده این امکان را می دهد تا در کامپوننت به store ریداکس دسترسی داشته باشد. تابع connect کامپوننت موردنظر را بعنوان ورودی می گیرد و همچنین دو پارامتر اختیاری mapStateToProps و mapDispatchToProps را نیز می گیرد.

• mapStateToProps: تابعی است که state را بعنوان آرگومان می گیرد و یک object بر می گرداند.
• mapDispatchToProps: تابعی است که dispatch را بعنوان آرگومان می گیرد و یک object شامل توابع dispatch بر می گرداند.

بیایید مفاهیم فوق را در یک مثال واقعی ببینیم:

import React, { Component } from "react";
import { connect } from "react-redux";

class App extends Component {
  render() {
    return (
      <div>
        <p>{this.props.count}</p>
        <button onClick={this.props.increment}>Increment</button>
        <button onClick={this.props.decrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: "INCREMENT" }),
    decrement: () => dispatch({ type: "DECREMENT" })
  };
};

export default connect(mapStateToProps,mapDispatchToProps)(App);

در قطعه کد فوق، ابتدا تابع Connect را از کتابخانه react-redux ایمپورت کرده ایم و سپس دو تابع mapStateToProps و mapDispatchToProps را تعریف کرده ایم. در بخش آخر هم تابع connect را با آرگومان های App و دو تابع فوق صدا زده ایم.

52- کاربرد هوک useMemo در ریکت:

هوک useMemo برای کش کردن (memoize) توابعی که مقداری را برمی گردانند، بکار می رود. بنابراین فانکشن تنها زمانی محاسبات را مجددا انجام می دهد که یکی از وابستگی ها یا dependency تغییر کرده باشد.

در مثال زیر، از useMemo استفاده نشده است:

import React, { useState} from "react";

function Welcome() {
  const [msg, setMsg] = useState("hello");
  const reverseMsg = () => {
    return msg.split("").reverse().join("");
  }
  return (
    <div>
      <h1>{msg}</h1>
      <h1>{reverseMsg()}</h1>
      <h1>{reverseMsg()}</h1>
      <button onClick={() => setMsg("Hello")}>Change Msg</button>
    </div>
  );
}

export default Welcome;

در کد فوق، در دو جا تابع ()reverseMsg  صدا زده شده است و در هر بار این تابع بطور کامل اجرا می شود و یک نتیجه ثابت و یکسان بر می گرداند.

حالا بیایید تابع مذکور را در هوک useMemo احاطه کنیم. به شکل زیر:

import React, { useState} from "react";

function Welcome() {
  const [msg, setMsg] = useState("hello");
  const reverseMsg = useMemo(() => {
    return msg.split("").reverse().join("");
  },[msg]); //msg is dependency

  return (
    <div>
      <h1>{msg}</h1>
      <h1>{reverseMsg}</h1>
      <h1>{reverseMsg}</h1>
      <button onClick={() => setMsg("Hello")}>Change Msg</button>
    </div>
  );
}

export default Welcome;

در اینحالت، تابع reverseMsg در بار اول که اجرا می شود مقدار خروجی را ذخیره و کش (cache) می کند و در اجراهای بعدی از این مقدار کش ذخیره شده در متغیر reverseMsg استفاده می کند.

53- نحوه شروع کار با Semantic UI:

در این بخش می خواهیم نحوه شروع کار با فریم ورک Semantic UI را بطور مختصر آموزش دهیم. Semantic یک فریم ورک ریسپانسیو و محبوب است که برای توسعه اپلیکیشن های ریکت بکار می رود و با واحد em کار می کند. پس کاملا واکنش گرا و کاربرپسند می باشد.

نصب فریم ورک Semantic UI:

برای نصب این فریم ورک دو دستور زیر را اجرا کنید:

npm i semantic-ui-react
npm i semantic-ui-css

فایل index.js پروژه ریکتی خود را باز کرده و مطابق کد زیر آن را تغییر دهید:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'semantic-ui-css/semantic.min.css'
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

در کد فوق، فایل CSS فریم ورک Semantic را ایمپورت کرده ایم. در ادامه می خواهیم بخش منوی اپلیکیشن یا همان Navigation را طراحی کنیم. پس یک فایل بنام navigation.js بسازید و کدهای زیر را برای آن تعریف کنید:

import React, { useState } from 'react';
import { Menu } from 'semantic-ui-react'

function NavigationBar() {

    return (
        <Menu pointing secondary>
            <Menu.Item  name='home' href="/somelink"/>
            <Menu.Item  name='posts' href="/somelink"/>
            <Menu.Item  name='contact' href="/somelink"/>
        </Menu>
    )
}

export default NavigationBar;

مشاهده می کنید که کل منو در کامپوننت Menu تعریف می شود و آیتم های منو در Menu.Item قرار می گیرند. به همین ترتیب می توانید با مراجعه به داکیومنت فریم ورک Semantic سایر کامپوننت های موردنیازتان را در اپلیکیشن قرار دهید.

54- نحوه تنظیم تصویر بک گراند:

در این بخش می خواهیم نحوه قرار دادن تصویر بک گراند به وسیله استایل های inline و external را آموزش دهیم.

توسط کد زیر می توانید تصویر پس زمینه دلخواه تان را در کامپوننت ری اکت تعریف کنید:

import React from 'react';
import car from './images/car.png'

function App() {
  return (
    <div  styles={{ backgroundImage:`url(${car})` }}>
      <h1>This is red car</h1>
    </div>
  );
}

export default App;

در کد بالا، ابتدا تصویر موردنظر را از مسیرش ایمپورت کرده ایم و سپس بعنوان تصویر بک گراند div تعریف کرده ایم.

و اما اگر بخواهیم تصویر پس زمینه را در یک فایل خارجی css تعریف کنیم، خواهیم داشت:

import React from 'react';
import './App.css';

function App() {
  return (
    <div  className="container">
      <h1>This is red car</h1>
    </div>
  );
}

export default App;

در فایل App.js می خواهیم برای div با کلاس container یک تصویر بک گراند تعریف کنیم. فایل App.css را باز کرده و استایل زیر را در آن تعریف کنید:

ontainer{
  background-image: url(./images/car.png);
}

به همین راحتی!

55- دسترسی به DOM Node توسط Ref:

ما می توانیم با استفاده از React.createRef یک ref ایجاد کنیم:

class Search extends React.Component {
  inputText = React.createRef();

  componentDidMount() {
    this.inputText.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputText} placeholder="search" />
      </div>
    );
  }
}

در قطعه کد بالا می خواهیم به محض لود شدن کامپوننت، input در حالت focus باشد. پس this.inputText.current.focus را در متد ComponentDidMount اجرا کرده ایم. در مثال بالا، از ref در یک کلاس کامپوننت استفاده کرده ایم. اما در مثال بعدی می خواهیم نحوه کار با ref را در فانکشن کامپوننت مشاهده کنیم:

import React from "react";

function SmallComponent() {
  const inputText = React.createRef();

  function handleFocus() {
    inputText.current.focus();
  }

  return (
    <div>
      <input ref={inputText} type="text" />
      <button onClick={handleFocus}>Focus</button>
    </div>
  );
}

56- نحوه تعریف متغیر گلوبال در ریکت:

گاهی اوقات نیاز است یک متغیر بصورت گلوبال (Global) در اپلیکیشن ما تعریف شود تا در همه جای اپ به آن دسترسی داشته باشیم. در مثال زیر می خواهیم یک متغیر سراسری به نام window.$name را در فایل index.js تعریف کنیم. پس این فایل را باز کرده و کدهای زیر را برای آن در نظر بگیرید:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

window.$name = 'king' //global variable


ReactDOM.render(<App />, document.getElementById('root'));

در هر جای اپلیکیشن که خواستیم می توانیم به این متغیر دسترسی داشته باشیم. به شکل زیر:

import React from "react";

function App() {
  const name = window.$name;
  console.log(name); // 'king'

  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
}

export default App;

57- نحوه استفاده از CSS Module:

CSS Module یک فایل css است که شامل تمام استایل های کامپوننت موردنظر می باشد و می توان بصورت آبجکت با آن رفتار کرد. با یک مثال ساده ماژول css را آموزش می دهیم. می خواهیم یک فایل استایل برای App.js تعریف کنیم. پس یک فایل بنام App.module.css تعریف کنید و استایل های زیر را در آن تعریف کنید:

.container{
  width: 500px;
  margin:1rem auto;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.795);
  padding: 1rem;
}

.heading{
  font-weight: 600;
  background-color: aliceblue;
  color: blue;
}

اکنون می توانید این فایل را در App.js مانند ماژول های جاوا اسکریپتی import کنید و مانند یک آبجکت به استایل های آن دسترسی پیدا کنید:

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>Hello react</h1>
    </div>
  );
}

export default App;

مشاهده می شود که براحتی توانستیم به styles.container دسترسی داشته باشیم. خروجی کار بصورت زیر خواهد بود (یک کلاس رندوم تولید می شود):

58- نحوه کار با useCallback در ری اکت:

در این بخش می خواهیم نحوه کار با هوک useCallback را آموزش دهیم. هوک useCallback زمانی به کار می رود که می خواهیم یک تابع را اصطلاحا memoize یا ذخیره کنیم. تا در دفعات بعدی فراخوانی تابع، بدنه تابع مجددا اجرا نشود و از نسخه کش شده استفاده شود.

تابعی که در داخل useCallback قرار می گیرد تنها زمانی مجددا اجرا می شود که یکی از dependency های آن تغییر کند. به مثال زیر توجه کنید:

import React, {useState} from "react";
import ReactDOM from "react-dom";

function Button(props) {
  return <button onClick={props.onClick}>{props.name}</button>;
}

function App() {
  const [count, setCount] = useState(0);
  const [isActive, setActive] = useState(false);

  const handleCount = () => setCount(count + 1);
  const handleShow = () => setActive(!isActive);

  return (
    <div className="App">
      {isActive && (
        <div>
          <h1>{count}</h1>
          <Button onClick={handleCount} name="Increment" />
        </div>
      )}
      <Button onClick={handleShow}
        name={isActive ? "Hide Counter" : "Show Counter"}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

در مثال فوق، با هر بار کلیک روی دکمه، توابع handleCount و handleShow مجددا اجرا می شوند. برای رفع این مشکل، دو تابع مذکور را در داخل useCallback تعریف می کنیم:

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";

function Button(props) {
  return <button onClick={props.onClick}>{props.name}</button>;
}

function App() {
  const [count, setCount] = useState(0);
  const [isActive, setActive] = useState(false);

  const handleCount = useCallback(() => setCount(count + 1), [count]);
  const handleShow = useCallback(() => setActive(!isActive), [isActive]);

  return (
    <div className="App">
      {isActive && (
        <div>
          <h1>{count}</h1>
          <Button onClick={handleCount} name="Increment" />
        </div>
      )}
      <Button
        onClick={handleShow}
        name={isActive ? "Hide Counter" : "Show Counter"}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

در اینحالت توابع مذکور تنها زمانی اجرا می شوند که وابستگی های آنها (یعنی count و isActive) تغییر مقدار داشته باشند.

59- نحوه پیاده سازی اسکرول نامحدود:

Infinite Scroll یا اسکرول بی نهایت زمانی به کار می رود که می خواهیم یک لیست طولانی از دیتا را از وب سرویس گرفته و به کاربر نمایش دهیم. در این بخش برای اجرای اسکرول بی نهایت از پکیج react-infinite-scroll-component استفاده می کنیم. برای نصب این پکیج دستور زیر را اجرا کنید:

npm i react-infinite-scroll-component

در قطعه کد زیر، نحوه کار با کتابخانه infinite-scroll را مشاهده می کنید:

import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import axios from "axios";
import "./styles.css";

class App extends React.Component {
  state = {
    breweries: [],
    pageNumber: 1,
    items: 15,
    hasMore: true
  };

  componentDidMount() {
      //initial request is sent
    this.fetchData();
  }

  fetchData = () => {
    axios
      .get(
        `https://api.openbrewerydb.org/breweries?page=${
          this.state.pageNumber
        }&per_page=${this.state.items}`
      )
      .then(res =>
        this.setState({
          //updating data
          breweries: [...this.state.breweries, ...res.data],
          //updating page numbers
          pageNumber: this.state.pageNumber + 1
        })
      );
  };

  render() {
    return (
      <div className="App">
        <InfiniteScroll
          dataLength={this.state.breweries.length} //This is important field to render the next data
          next={this.fetchData}
          hasMore={this.state.hasMore}
          loader={<h4>Loading...</h4>}
        >
          {this.state.breweries.map(brewery => (
            <ul className="user" key={brewery.name}>
              <li>Name: {brewery.name}</li>
            </ul>
          ))}
        </InfiniteScroll>
      </div>
    );
  }
}

export default App;

خروجی کار به صورت زیر است:

60- نحوه استفاده از آیکون FontAwesome:

به منظور استفاده از آیکون های fontawesome در اپلیکیشن ریکت، نیاز است که پکیج react-icons را ابتدا نصب کنید:

npm install react-icons --save

سپس به شکل زیر براحتی از آیکون موردنظر در طرح خود استفاده کنید:

import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";

function App() {
  return (
    <div className="App">
      <p>
        Accessible icon <FaAccessibleIcon />
      </p>
    </div>
  );
}

export default App;

خروجی کار:

برای تغییر سایز و رنگ آیکون، به شکل زیر عمل کنید:

import React from "react";
import ReactDOM from "react-dom";
import { FaAccessibleIcon } from "react-icons/fa";

function App() {
  return (
    <div className="App">
      <p>
        Accessible icon <FaAccessibleIcon size="50px" color="red" />
      </p>
    </div>
  );
}

export default App;

در اینجا لیست 60 تایی ترفندهای کاربردی ری اکت به پایان می رسد. امیدوارم از این مقاله ها استفاده کرده باشید. اگر سوال یا پیشنهاد و انتقادی دارید از طریق روش های زیر با ما در ارتباط باشید:

• آدرس ایمیل contact@rahkarino.com
• دایرکت به اینستاگرام rahkarino
• پیام به تلگرام rahkarino@
• فرم تماس با ما در سایت