مثال على تطبيق بسيط من 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

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

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

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

انتاج |

رمز

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

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