קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח

ברוכים הבאים לקורס חינם בריאקט! זהו מיני קורס חינמי, שבו נלמד שניים מהטכנולוגיות היותר פופולאריות היום בשוק והם:

1. React – סביבת עבודה זו הוקמה ע"י facebook ומשרתת מליוני אנשים וחברות בפיתוח front end .
2. GraphQL – דרך חדשנית נוחה ביותר לעשות שאילתות ממסד הנתונים דרך הAPI. כל פרויקט וכל שפה יכולה לעבוד עם GraphQL .

בנוסף נציג עוד כמה טכנולגיות נלוות לקורס והן:

1. fireBase – מסד הנתונים NoSQL של גוגל.
2. typescript – נעשה שימוש עם typescript בריאקט
3. scss – דרך נוחה יותר לכתוב CSS
4. צד שרת בNODE – תשתית בסיסית מאד רק בשביל לקריאות ממסד הנתונים

קורס ריאקט GQL – מתחילים!

אז לא מבזבזים את הזמן שלנו בהסברים כי הקורס הזה הוא קורס מזורז. אז ניגש לעניינים ונרים את התשתית של הפרויקט:

נרים פרויקט ריאקטי:

npx create-react-app tiktaktoe --template typescript

לאחר שהסתיימה ההתקנה תוכלו לגשת לתיקיה ולמחוק הקבצים הבאים:

• app.test.tsx
• logo
• setupTest.tsx

ובקובץ App.tsx לנקות ולהשאיר את זה (הוספתי כותרת h1)

import './App.css';

function App() {
  return (
    <div className="App">
    <h1>
      TIK-TAK-TOE
    </h1>
    </div>
  );
}

export default App;

נקנפג sass בשביל לעבוד עם קבצי scss . נשנה את app.css לapp.scss . על מנת לקנפג sass כל מה שצריך לעשות זה להתקין:

npm install sass

הכל מוכן ! אפשר להתחיל.

אז אם נריץ את האפליקציה בעזרת הפקודה

npm run start

נקבל דף לבן עם הכותרת שלנו. אז מה בהמשך?

• נתחיל לכתוב את היואיי (לפני שנכתוב את השרת ואת המידע ואת הGQL שלנו)
• נכתוב את השרת ונחבר את מסד הנתונים
• נכין schema לgql
• נכתוב את הקריאות של gql ונחלי את התוכן הסטטי ביואיי

ממשיכים.. 🐊❤

פוסטים קשורים:

קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE בעיות נפוצות ב-react | קינפוג עם sass מדריך ריאקט – react hooks | useState מדריך ריאקט – react hooks | Custom Hook