The code and notes here are part of: 30-day-React-Learning-Journey Series.

• Introduction
• part-1
  • day 01 to 02
    • day 01: Choosing the course
    • day 02: Why React
  • day 03 : Getting Started
  • day 04 : the first line
• part-2
  • day 5 : JS vs JSX
  • day-6 : JSX basics
  • day-7 : JSX with JS
• Conclusion
• Author

This repo contains the full code and also some additional notes for 30-day-React-Learning-Journey article by Youssef Hafnawy.

📚 I know you're lazy so I collected all my tweets about React on → React-Tweet

📚 I have also compiled all the explanations on one page for you → React-Summary

• you can find here all the links and photos collected in one place.

• The full explanation and details of the trip will be in the article.

• Notes: You can view each part of the Journey individually from the Commits section

  • This article has more than one source of pleasure. You may find links that lead to different sources according to each commit

we talked in this part about:

• Suggestions for learning resources.
• Why you should learn React.
• how to get started.
• wrote our first line in React.

All this with sharing my personal learning experience and some tips + a simplified explanation of what I learned.

30-Day React Learning Journey! part 1

Because there is no written code at the beginning of the learning journey, just basics to get started, so only links and pictures will be uploaded.

Choosing the course

• Suggested learning resources:
  • YouTube
    • freeCodeCamp + Scrimba
    • Full Modern React Tutorial by The Net Ninja
    • ReactJS Tutorial for Beginners
    • The Complete React Developer Course
  • General courses
    • React Docs
    • w3schools React Tutorial

Why React?

• before starting you must at least know the following:

  • HTML basics.
  • CSS basics.
  • JS basics.
  • Npm basics.

• Topics talked about:

  • before starting
  • what is React?
  • What is a library?
  • why react?

• how do we start using React?
  • CDN Links
  • create-react-app
  • vite create-react-app

• Topics talked about:
  • add an<main id="app"></main>.
  • Create a variable and link it to the element you create.
  • What is createRoot().
  • What is ReactDOM.
  • What is render().
  • Congratulations, you have used React for the first time.

We will continue from day 5 to day 7, and we talked in this part about:

• JSX basics
• JSX vs JS
• JSX with JS

• React docs: JSX
• Topics talked about:
  • Create and add an element to DOM using just JS
  • Create and add an element to DOM using JSX
  • First impression about JSX

• React docs: React Without JSX
• Topics talked about:
  • link a JSX element to a variable
  • using it with a function or if
  • butting JSX inside an array or an object
  • using a class with JSX or an attributes

Thank you to anyone who reads this article, I promise to anyone who reads this article that I will complete the entire journey.

• I would like to hear your opinions about the article?
  • What was missing?
  • Did you like the use of the meme in the article?
  • Should I add more or fewer details?
  • Do I add more explanation or cut it out and only talk about the experience?

• professional links:
  • Twitter
  • LinkedIn
  • GitHub
• Hire me:
  • UpWork
  • Freelancer
• Blog:
  • HashNode
  • Dev.to
  • Medium