مثال على تطبيق بسيط من React: جلب معلومات مستخدمي GitHub عبر واجهة برمجة التطبيقات

مثال بسيط جدًا لنموذج يقبل اسم مستخدم GitHub وبمجرد أن يتلقى ملفsubmitالحدث ، يطلب من واجهة برمجة تطبيقات GitHub معلومات المستخدم ، ويطبعها.

مثال بسيط جدًا لنموذج يقبل اسم مستخدم GitHub وبمجرد أن يتلقى ملفsubmitالحدث ، يطلب من واجهة برمجة تطبيقات GitHub معلومات المستخدم ، ويطبعها.

هذا الرمز يخلق قابلة لإعادة الاستخدامبطاقةعنصر. عند إدخال اسم في ملفinputالمجال الذي يديرهاستمارةالمكون ، هذا الاسمملزمة حالتها.

متيإضافة بطاقةالضغط ، يتم مسح نموذج الإدخال عن طريق مسحuserNameحالةاستمارةعنصر.

يستخدم المثال ، بالإضافة إلى React ، مكتبة Axios. إنها مكتبة مفيدة وخفيفة الوزن للتعامل مع طلبات الشبكة. قم بإضافته إلى إعدادات Pen في Codepen ، أو قم بتثبيته محليًا باستخدامnpm install axios.

انتاج |

The React example output

رمز

نبدأ بإنشاء ملفCardالمكون الذي سيعرض صورتنا وتفاصيلنا كما تم جمعها من GitHub. يحصل على بياناته عبر الدعائم ، باستخدام

  • props.avatar_urlالصورة الرمزية للمستخدم
  • props.nameاسم المستخدم
  • props.blogعنوان URL لموقع المستخدم

    const Card = props => {
    return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.name}</div>
        <div>{props.blog}</div>
      </div>
    </div>
    )
    }
    

نقوم بإنشاء قائمة بهذه المكونات ، والتي سيتم تمريرها بواسطة مكون رئيسي في ملفcardsدعم لCardList، والذي يتكرر عليه باستخدامmap()ويخرج قائمة البطاقات:

const CardList = props => (
  <div>
    {props.cards.map(card => (
      <Card {...card} />
    ))}
  </div>
)

المكون الرئيسي هو التطبيق الذي يخزن ملفcardsمجموعة في حالتها الخاصة ، تدار باستخدامuseState()صنارة صيد:

const App = () => {
  const [cards, setCards] = useState([])

return ( <div> <CardList cards={cards} /> </div> ) }

رائع! يجب أن يكون لدينا طريقة الآن لنطلب من GitHub الحصول على تفاصيل اسم مستخدم واحد. سنفعل ذلك باستخدام ملفFormالمكون ، حيث ندير دولتنا (username) ، ونطلب من GitHub الحصول على معلومات حول مستخدم يستخدم واجهات برمجة التطبيقات العامة الخاصة به ، عبرأكسيوس:

const Form = props => {
  const [username, setUsername] = useState('')

handleSubmit = event => { event.preventDefault()

<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">`https://api.github.com/users/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">username</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">resp</span> =&gt; {
  <span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">onSubmit</span>(<span style="color:#a6e22e">resp</span>.<span style="color:#a6e22e">data</span>)
  <span style="color:#a6e22e">setUsername</span>(<span style="color:#e6db74">''</span>)
})

}

return ( <form onSubmit={handleSubmit}> <input type=“text” value={username} onChange={event => setUsername(event.target.value)} placeholder=“GitHub username” required /> <button type=“submit”>Add card</button> </form> ) }

عندما يتم تقديم النموذج نسميhandleSubmitالحدث ، وبعد الاتصال بالشبكة ندعوهاprops.onSubmitتمرير الوالد (App) البيانات التي حصلنا عليها من جيثب.

نضيفه إلىApp، تمرير طريقة لإضافة بطاقة جديدة إلى قائمة البطاقات ،addNewCard، مثلonSubmitدعم:

const App = () => {
  const [cards, setCards] = useState([])

addNewCard = cardInfo => { setCards(cards.concat(cardInfo)) }

return ( <div> <Form onSubmit={addNewCard} /> <CardList cards={cards} /> </div> ) }

أخيرًا نقوم بعرض التطبيق:

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

إليك الكود المصدري الكامل لتطبيقنا الصغير React:

const { useState } = React

const Card = props => { return ( <div style={{ margin: ‘1em’ }}> <img alt=“avatar” style={{ width: ‘70px’ }} src={props.avatar_url} /> <div> <div style={{ fontWeight: ‘bold’ }}>{props.name}</div> <div>{props.blog}</div> </div> </div> ) }

const CardList = props => <div>{props.cards.map(card => <Card {…card} />)}</div>

const Form = props => { const [username, setUsername] = useState(’’)

handleSubmit = event => { event.preventDefault()

<span style="color:#a6e22e">axios</span>
  .<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">`https://api.github.com/users/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">username</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>)
  .<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">resp</span> =&gt; {
    <span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">onSubmit</span>(<span style="color:#a6e22e">resp</span>.<span style="color:#a6e22e">data</span>)
    <span style="color:#a6e22e">setUsername</span>(<span style="color:#e6db74">''</span>)
  })

}

return ( <form onSubmit={handleSubmit}> <input type=“text” value={username} onChange={event => setUsername(event.target.value)} placeholder=“GitHub username” required /> <button type=“submit”>Add card</button> </form> ) }

const App = () => { const [cards, setCards] = useState([])

addNewCard = cardInfo => { setCards(cards.concat(cardInfo)) }

return ( <div> <Form onSubmit={addNewCard} /> <CardList cards={cards} /> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

تحقق من ذلك على Codepen فيhttps://codepen.io/flaviocopes/pen/oJLyeY

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: