30-day-React-Learning-Journey

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

Table of contents.

• 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

Introduction

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

part-1

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

day 01 to 02

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.

day-01

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

day-02

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?

day-03

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

day-04

• 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.

part-2

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

• JSX basics
• JSX vs JS
• JSX with JS

day-5

• 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

day-6

• 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

day-7

Conclusion

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?

Author

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