ⵜⴰⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⴷⴻⴳ React: Amedya ⵓⵙⵍⵉⴳ

ⵔⴻⴰⵛⵜ
ⵜⴰⵏⴻⵎⵀⴰⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ
ⴰⵙⴻⵏⵜⴻⵍ api
ⵜⴰⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⴷⴻⴳ React: Amedya ⵓⵙⵍⵉⴳ cover image

ⵔⴻⴰⵛⵜ ⴷ ⴰⴽⴰⵔⴰⵎ ⵏ goto ⵉ ⵍⴻⴱⵏⵉ ⵏ ⵢⵉⵙⴻⵏⴼⴰⵔⴻⵏ ⵏ ⵜⴰⵎⴰ ⵏ ⵓⵎⵙⴰⵖ ⵉⴷⵉⵏⴰⵎⵉⴽⵢⴻⵏ ⵉ ⵡⴰⵟⴰⵙ ⵏ ⵢⵉⵎⴻⵙⵏⴻⴼⵍⵉⵢⴻⵏ. ⵜⴰⴳⵏⵉⵜ ⵜⴰⴷⵉⵏⴰⵎⵉⵜ ⵏ ⵢⵉⵙⴻⵏⴼⴰⵔⴻⵏⴰ ⵜⴻⴽⴽⴰⴷ ⵙⴻⴳ ⵜⵎⴻⵥⵥⵓⵖⵜ ⴷ ⵓⴹⵔⵉⵙ ⵏ ⵜⴻⵣⵎⵎⴰⵔ ⴷ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⵔⵏⴰⵏ ⴰⵢ ⵉⵣⴻⵎⵔⴻⵏ ⴰⴷ ⴷⵉⵍⵉⵏⵜ ⴷⴻⴳ ⵜⴰⵎⴰ ⵏ ⵓⵎⵙⴰⵖ (ⵛⵍⵉⴻⵏⵜ) ⴰⵢ ⵢⴻⵙⵙⴰⵡⴹⴻⵏ ⵉⵎⵙⵓⴷⴷⵙⴻⵏ ⴰⴷ ⴱⵏⵓⵏ ⵉⵙⴻⵏⴼⴰⵔⴻⵏ ⵙ ⵍⴻⴽⵎⴰⵍⵏⵙⴻⵏ ⴰⵢ ⵢⴻⵜⵜⵡⴰⵄⴻⵔⴹⴻⵏ ⴷⴻⴳ ⵓⵙⴻⵍⴽⵉⵎ ⴷⴻⴳ ⴽⵔⴰ ⵏ ⵜⴻⵙⴷⵉⴷⵉⵏ, ⴷ ⴰⵢⴻⵏ ⵓⵔ ⵏⴻⵍⵍⵉ ⴰⵔⴰ ⴷ ⴰⵢⴻⵏ ⴰⵢ ⴷⵢⴻⵍⵍⴰⵏ . ⵢⴻⵣⵎⴻⵔ (ⵏⴻⵖ ⴷ ⴰⵢⴻⵏ ⵉⵅⵓⵚⵚⴻⵏ ⴰⵟⴰⵙ) ⴷⴻⴳ ⵡⵓⵙⵙⴰⵏ ⵏ ⵡⴻⴱ ⵙⵜⴰⵜⵉⵛ.

ⵙ ⵓⵙⵏⴻⵔⵏⵉⴰ ⴷⴻⴳ ⵜⴻⵣⵎⵎⴰⵔ, ⵜⵓⵙⴰⴷ ⵜⵎⵓⵖⵍⵉ ⵏ ⵓⴹⴼⴰⵔ ⵏ ⵓⵡⴰⵏⴰⴽ, ⴰⴽⴽⴻⵏ ⵢⴻⵜⵜⵏⴻⵔⵏⵉ ⵓⵙⵡⵉⵔ ⵏ ⵓⵙⵡⵉⵔ ⴷⴻⴳ ⵢⵉⵙⴻⵏⴼⴰⵔⴻⵏ ⵏ ⵢⵉⴷⵉⵙ ⵏ ⵓⵎⴽⵍⵉ, ⵢⴻⵜⵜⵏⴻⵔⵏⵉ ⵍⵃⴻⵕⵙ ⵏ ⵓⵃⵔⴰⵣ ⵏ ⵓⵡⴰⵏⴰⴽ ⴰⴷⵉⴳⴰⵏ ⴰⴽⴽⴻⵏ ⴰⴷ ⵢⵓⵖⴰⵍ ⴷ ⴰⵄⴻⵡⵡⵉⵇ ⴷⴻⴳ ⵢⵉⵎⴰⵏⵉⵙ ⵎⴰ ⵢⴻⵍⵍⴰ ⵓⵔ ⵢⴻⵜⵜⵡⴰⵃⵔⴻⵣ ⴰⵔⴰ ⴰⴽⴽⴻⵏ ⵉⵡⴰⵜⴰ ⵢⴻⵔⵏⴰ ⵢⴻⵜⵜⵡⴰⵅⴻⵎⵎⴻⵎ ⵙ ⵜⵎⵓⵖⵍⵉ ⵏ ⵓⵙⵏⴻⵔⵏⵉ.

ⵜⴰⵎⵙⴰⵍⵜⴰ ⵜⵜⵡⴰⵇⴻⴱⵍⴻⵏⵜⵜ ⵙⵖⵓⵔ ⴰⵟⴰⵙ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ, ⵙ ⴹⴻⴼⵔⴻⵏ ⵜⵉⴳⵏⴰⵜⵉⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ ⵢⴻⵔⵏⴰ ⵙ ⵓⵙⴽⴰⵙⵉ ⵖⴻⴼ ⵜⵎⴻⵣⵣⵓⴳⵉⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ ⵏ ⵡⵓⴳⵓⵔⴻⵏ ⵉⵎⴻⵥⵢⴰⵏⴻⵏ, ⴷⵖⴰ ⴷ ⴰⵢⴰ ⴰⵢ ⵢⴻⴵⴵⴰⵏ ⴰⴷ ⵏⴻⵙⵄⵓ ⴰⵙⴻⴼⵀⴻⵎ ⵏ ⵓⵙⵡⵉⵔ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⴳⴻⵎⵎⵉ ⵏ ⵓⴽⴰⵜⴰⵔ ⵏ ⵓⴼⵔⴰⵏ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⵡⴰⵍⵉ ⵍⵃⴻⵕⵙ ⵏ ⵢⴰⵍ ⴰⵙⴻⵏⴼⴰⵔ ⵢⴻⵔⵏⴰ ⴰⴷ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ ⴰⴱⵔⵉⴷ ⵢⴻⵍⵀⴰⵏ ⵙ ⴹⴻⴼⵔⴻⵏ ⵡⵉⴷⵏⵏⵉ . ⵍⵎⵉⵜⵔⴰⵜ. ⵎⴰⴹⵔⵉⵙⴰ ⴰⴷ ⴰⴽⴷ-ⵢⴻⴼⴽ ⴰⴹⵔⵉⵙ ⵏ ⵜⵎⵓⵖⵍⵉ ⵖⴻⴼ ⵜⴻⵎⵙⴰⵍ ⵏ ⵜⴻⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⵜⵓⵛⵔⵉⴽⵜ ⵢⴻⵔⵏⴰ ⴰⴷ ⵜⵄⴻⵔⴹⴻⴹ ⴰⴷ ⴷⵜⴻⵙⵙⴻⴽⵛⴻⵎⴹ ⵜⵉⴳⵏⴰⵜⵉⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ (ⵓⵙⴻⵙⵜⴰⵜⴻ, Context API) ⴷ ⵜⵉⵔⵉⵔⵉⵜ ⴼⴻⵍⵍⴰⵙ. ⵎⴰ ⵢⴻⵍⵍⴰ ⴰⵎⴰⴳⵔⴰⴷⴰ ⴰⴷ ⴷⵢⴻⵙⵙⴽⴻⵏ ⵜⵉⴼⵔⴰⵜ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ, ⴰⴷ ⴷⵢⴻⵙⵎⴻⴽⵜⵉ ⴽⴰⵏ ⵙ ⵡⵓⴳⵓⵔⴻⵏ ⵙ ⵜⵖⴰⵡⵍⴰ ⵜⴰⵎⴻⵛⵟⵓⵃⵜ, ⴰⴷ ⴷⵏⴻⴱⴷⴻⵔ ⵉⵙⴻⵏⵜⴰⵍⴻⵏ ⵉⴳⴻⵔⵔⵣⴻⵏ ⵓⴳⴰⵔ ⴷⴻⴳ ⵢⵉⵎⴰⴳⵔⴰⴷⴻⵏ ⵉ ⴷⵉⵜⴻⴷⴷⵓⵏ.

ⴰⵙⵉⴽⴻⵍ ⵏ ⵓⵎⴰⵀⵉⵍ ⵏ ⵓⵙⴻⴽⵍⴻⵙ

ⴰⴽⴰⵔⴰⵎ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴳⵏⴻⵏ ⴷⴻⴳ ⵓⵎⴰⴳⵔⴰⴷⵏⵏⵉ ⴰⴽⴽ ⴰⴷ ⵜⵏⴰⴼ [ⴷⴰⴳⵉ] (

ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⴷ ⵓⵙⵎⴻⵍ ⵏ ⵜⵎⵓⵖⵍⵉ ⵙ ⵡⵓⴷⴻⵎ ⵓⵏⵚⵉⴱ [ⴷⴰⴳⵉ](https://span ⵙⵜⵢⵍⴻ="ⴰⴹⵔⵉⵙⴰⵛⴻⴱⴱⴻⵃ:ⴰⴹⵔⵉⵙ;">.

ⵖⴻⵔⵔⴷ ⵜⴰⵍⵓⴼⵜ ⴰⵏⴷⴰ ⴰⵔⴰ ⵏⴻⵙⵙⴻⴹⵔⵓ ⴰⵀⵉⵍ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵉ ⵓⵙⴻⵇⴷⴻⵛ ⵏ React.

User Login

ⴰⴽⴽⴻⵏ ⵉ ⴷⵢⴻⵜⵜⴱⴰⵏ ⴷⴻⴳ GIF ⵏ ⵜⴼⴻⵍⵡⵉⵜ, ⵏⴻⴱⵖⴰ ⴰⴷ ⵏⴻⴵⴵ ⵉⵙⴻⵇⴷⴰⵛⴻⵏ ⴰⴷ ⴽⴻⵛⵎⴻⵏ ⵏⴻⵖ ⴰⴷ ⵙⵇⴻⴷⵛⴻⵏ ⴰⵙⴻⵏⴼⴰⵔⵏⵏⴻⵖ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵖⴻⵍⵍⵉⵙⵜ. ⵎⴰ ⵢⴻⵍⵍⴰ ⵜⵜⵡⴰⴼⴽⴻⵏⵜⴷ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵖⴻⵍⵍⵉⵙⵜ ⵉⵡⴰⵜⴰⵏ, ⴰⵙⴻⵇⴷⴰⵛ ⴰⴷ ⵢⴻⴽⵛⴻⵎ, ⴰⵙⴻⵏⴼⴰⵔ ⴰⴷ ⵢⴻⴷⴷⵓ ⵙ ⵜⵉⵎⴰⴷⵉⵙ ⵖⴻⵔ ⵓⵙⴻⴱⵜⴻⵔ ⵏ ⵓⵖⴻⵔⴱⴰⵣ ⵢⴻⵔⵏⴰ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵉⴽⴻⵎⵎⴻⵍ ⴰⴷ ⵢⴻⵙⵙⴻⵇⴷⴻⵛ ⴰⵙⴻⵏⴼⴰⵔ.

ⴰⵎ ⵡⴰⴽⴽⴻⵏ ⴷⴰⵖⴻⵏ, Ma ⵢⴻⵍⵍⴰ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⴼⴼⴻⵖⴷ, ⴰⴷ ⵜⵜⵡⴰⵃⴻⵔⵣⴻⵏ ⵢⵉⵖⴱⵓⵍⴰ ⵏ ⵓⵙⴻⴱⵜⴻⵔ ⵏ ⵓⵅⵅⴰⵎ ⴷⴻⴼⴼⵉⵔ ⵏ ⵜⵓⴽⴽⵙⴰ, ⴰⵙⴻⴱⵜⴻⵔ ⵏ ⵜⵓⴽⴽⵙⴰ ⴰⴷ ⵢⵉⵍⵉ ⴷ ⴰⵙⴻⴱⵜⴻⵔ ⴽⴰⵏ ⴰⵔⴰ ⵢⴰⵡⴻⴹ ⵓⵙⴻⵇⴷⴰⵛ.

ⵎⴰ ⵏⴻⵅⴷⴻⵎ ⴰⵅⴻⵎⵎⴻⵎ ⵖⴻⴼ ⵜⵎⵓⵖⵍⵉⴰⴳⵉ ⵏ ⵓⵅⴻⴷⴷⵉⵎ ⴷⴻⴳ ⵡⴰⵢⴻⵏ ⵢⴻⵔⵣⴰⵏ ⴰⵙⴻⴹⵔⵓ, ⴰⴷ ⵏⴻⵙⵄⵓ ⴰⴼⴻⵔⴷⵉⵙ ⴰⴳⴻⵊⴷⴰⵏ ⵓⵎⵉ ⵙⴻⵎⵎⴰⵏ App, ⴰⴼⴻⵔⴷⵉⵙ ⵏ App ⴰⴷ ⵢⴻⵙⵙⵉⵡⴻⴹ ⴰⵙⴻⵇⴷⴰⵛ ⵖⴻⵔ ⵢⵉⵡⴻⵏ ⵙⴻⴳ ⵙⵉⵏ ⵏ ⵢⵉⵙⴻⴱⵜⴰⵔ: Axxam ⵏⴻⵖ Asekcem, ⴰⵃⵔⵉⵛ ⵏ ⵜⵓⵔⴰ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ( ⵢⴻⴽⵛⴻⵎ, ⵢⴻⴼⴼⴻⵖ) ⴰⴷ ⴷⵢⴻⵙⴱⴻⴷⴷ ⴰⵏⵡⴰ . ⴰⵙⴻⴱⵜⴻⵔ ⵉⴷⴻⴳ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⴼⵍⵉ ⵓⵙⴻⵇⴷⴰⵛ, ⴰⴱⴻⴷⴷⴻⵍ ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜ ⵏ ⵜⵓⵔⴰ ⵏ ⵓⵙⴻⵇⴷⴰⵛ (ⴰⵎⴻⴷⵢⴰ ⴰⴱⴻⴷⴷⴻⵍ ⵙⴻⴳ ⵓⵙⴻⴽⵛⴻⵎ ⵖⴻⵔ ⵓⵙⴻⴽⵛⴻⵎ) ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⴷⵢⴻⵙⴱⴻⴷⴷ ⴰⵙⴻⵏⵇⴻⴷ ⵏ ⵜⴻⵙⵡⵉⵄⵜ ⵖⴻⵔ ⵓⵙⴻⴱⵜⴻⵔ ⵉ ⴷⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷⴻⵏ.

State

ⴰⴽⴽⴻⵏ ⵉ ⴷⵢⴻⵜⵜⵡⴰⵙⴽⴻⵏ ⴷⴻⴳ ⵜⴼⴻⵍⵡⵉⵜ ⵏ ⵜⴼⴻⵍⵡⵉⵜ, ⵏⴻⴱⵖⴰ ⴰⴼⴻⵔⴷⵉⵙ ⵏ App ⴰⴷ ⵉⵃⴻⵙⵙ ⵉ ⵜⴻⴳⵏⵉⵜ ⵏ ⵜⵓⵔⴰ ⵢⴻⵔⵏⴰ ⴰⴷ ⴷⵢⴻⴼⴽ ⴽⴰⵏ ⵢⵉⵡⴻⵏ ⵙⴻⴳ ⵙⵉⵏ ⵏ ⵢⵉⵙⴻⴱⵜⴰⵔ – Axxam ⵏⴻⵖ Asekcem – ⵙ ⵍⵙⴰⵙ ⵏ ⵜⴻⴳⵏⵉⵜⵏⵏⵉ ⵏ ⵜⵓⵔⴰ.

ⵎⴰ ⵢⴻⵍⵍⴰ ⴰⵙⴻⵇⴷⴰⵛ ⴷ ⵏⵓⵍⵍ, ⴰⵏⴰⵎⴻⴽⵉⵙ ⵓⵔ ⵏⴻⵙⵄⵉ ⴰⵔⴰ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⴼⵍⴻⵏ, ⵉⵀⵉ ⴰⴷ ⵏⵔⵓⵃ ⵙ ⵡⵓⴷⴻⵎ ⴰⵡⵓⵔⵎⴰⵏ ⵖⴻⵔ ⵓⵙⴻⴱⵜⴻⵔ ⵏ ⵜⵓⴽⴽⵙⴰ ⵢⴻⵔⵏⴰ ⴰⴷ ⵏⵃⴰⵔⴻⴱ ⴰⵙⴻⴱⵜⴻⵔ ⵏ ⵓⵅⵅⴰⵎ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ. ⵎⴰ ⵢⴻⵍⵍⴰ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⵍⵍⴰ, ⴰⴷ ⵏⴻⵅⴷⴻⵎ ⵍⴱⴰⵟⴻⵍ.

ⵜⵓⵔⴰ ⵉⵎⵉ ⵏⴻⵙⵄⴰ ⴰⵙⴻⴼⵀⴻⵎ ⵉⴳⴻⵔⵔⵣⴻⵏ ⵏ ⵡⴰⵢⴻⵏ ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵙⵙⴻⴹⵔⵓ, ⴰⴷ ⵏⵡⴰⵍⵉ ⴽⵔⴰ ⵏ ⵜⴼⴻⵔⴷⵉⵡⵉⵏ, ⵎⴰⵛⴰ ⴷⴻⴳ ⵜⴰⵣⵡⴰⵔⴰ ⴰⴷ ⵏⴻⵙⵙⴻⴱⴷⴻⴷ ⴰⵙⴻⵏⴼⴰⵔⵏⵏⴻⵖ ⵏ React, .

Repo ⵏ ⵓⵙⴻⵏⴼⴰⵔ ⵢⴻⵙⵄⴰ ⵢⵉⵡⴻⵏ ⵏ ⵓⵙⵎⴻⵍ ⵏ ⴱⴰⵛⴽⴻⵏⴷ ⵏ ⵍⴻⵎⵜⴻⵍ ⴰⵔⴰ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⵙⵙⴻⴹⵔⵓ ⵜⴰⵎⴰ ⵏ frontend (ⵓⵔ ⵏⴻⴽⵛⴻⵎ ⴰⵔⴰ ⴷⴻⴳⵙ ⵉⵎⵉ ⵎⴰⵞⵞⵉ ⴷ ⵏⴻⵜⵜⴰ ⴰⵢ ⴷ ⴰⵙⴻⵏⵜⴻⵍ ⴰⴳⴻⵊⴷⴰⵏ ⴷⴰⴳⵉ ⵎⴰⵛⴰ ⴰⴽⴰⵔⴰⵎⵏⵏⵉ ⵢⴻⵜⵜⵡⴰⵃⵔⴻⵣ ⵙ ⵍⴻⴱⵖⵉ ⴷ ⴰⵙⴻⴼⵔⵓ ⴰⴽⴽⴻⵏ ⵓⵔ ⵜⴻⵙⵄⵉⴹ ⴰⵔⴰ ⵍⵃⵉⴼ ⵢⵉⴷⵙ )

ⵏⴻⴱⴷⴰ ⵙ ⵓⵙⵏⵓⵍⴼⵓ ⵏ ⵢⵉⵙⴻⴱⵜⴰⵔ ⴷ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏⴰ:

  • ⴰⵙⴻⴱⵜⴻⵔ ⴰⵖⴻⵍⵏⴰⵡ

  • ⴰⵙⴻⴱⵜⴻⵔ ⵏ ⵜⵓⴽⴽⵙⴰ

  • ⴱⴻⴷⴷⴻⵍ ⴰⵙⴻⴱⵜⴻⵔ ⵏ ⵓⵙⴻⵇⴷⴰⵛ

  • ⴰⴼⵜⵓⵙ ⵏ Navbar

  • ⴰⴼⵜⵓⵙ ⵏ ⵓⵙⴻⵇⴷⴰⵛ

ⴰⵙⴻⵏⴼⴰⵔ ⵏ React ⵙ ⵡⴰⵟⴰⵙ ⵏ ⵢⵉⵙⴻⴱⵜⴰⵔ ⵢⴻⵃⵡⴰⴵ ⴰⵙⴻⵏⵇⴻⴷ ⵉⵡⴰⵜⴰⵏ, ⵉ ⵡⴰⵢⴰ ⵏⴻⵣⵎⴻⵔ ⴰⴷ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ reactrouterdom ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵏⴻⵙⵏⵓⵍⴼⵓ ⴰⴹⵔⵉⵙ ⵏ ⵓⵙⴻⵍⴽⵉⵎ ⵏ ⵓⵙⴻⵍⴽⵉⵎ ⴰⵎⴰⴹⵍⴰⵏ ⵢⴻⵔⵏⴰ ⴰⴷ ⵏⴻⵙⵙⴻⴽⵍⴻⵙ ⵉⴱⴻⵔⴷⴰⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ ⵏ React.


yarn add react-router-dom

ⵏⴻⵥⵔⴰ ⴰⵟⴰⵙ ⵏ ⵢⵉⵎⴻⵖⵔⵉⵢⴻⵏ ⵜⵜⵃⴻⵎⵎⵉⵍⴻⵏ ⴰⴷ ⴹⴻⴼⵔⴻⵏ ⴰⴽⴽ ⴷ ⵢⵉⵙⴻⵍⵎⴰⴷⴻⵏ, ⵉⵀⵉ ⴰⵜⴰⵏ ⵍⵇⴰⵍⴻⴱ ⵏ ⵓⵙⴱⴰⴷⵓ ⴰⴽⴽⴻⵏ ⴰⴷ ⴽⵉⴷⵙⵙⵉⵡⴹⴻⵏ ⵙ ⵜⵖⴰⵡⵍⴰ. ⴰⴼⴻⵔⴷⵉⵙⴰⴳⵉ ⵏ ⵓⵙⴱⴰⴷⵓ ⵢⴻⵙⵙⴻⵇⴷⴰⵛ DaisyUI ⵉ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ TailwindCSS JSX ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷⴻⵏ ⵓⵇⴱⴻⵍ. ⵢⴻⵍⵍⴰ ⴷⴻⴳⵙ ⴰⴽⴽ ⵉⴼⴻⵔⴷⵉⵙⴻⵏ, ⵉⵙⴻⴱⵜⴰⵔ ⴷ ⵓⵙⴻⵍⴽⵉⵎ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷⴻⵏ ⵢⴰⴽⴰⵏ. ⵎⴰ ⵢⴻⵍⵍⴰ ⵜⴻⵜⵜⵅⴻⵎⵎⵉⵎⴻⴹ ⴰⴷ ⵜⴹⴻⴼⵔⴻⴹ ⴰⴽⴽ ⴷ ⵓⵙⴻⵍⵎⴻⴷⴰ, ⴰⴷ ⵜⴻⴱⵏⵓⴹ ⴰⴽⴽ ⴰⵥⴻⴹⴹⴰ ⵏ ⴰⵓⵜⵀ ⵙ ⵜⵉⵎⵎⴰⴷⵉⴽ ⵙ ⵜⴹⴻⴼⴼⴻⵔ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵙⵔⵉⴷ, ⴱⴷⵓ ⵙ ⵜⴼⴻⵔⴽⵉⵜ ⵏ ⵓⵙⵎⴻⵍ ⵓⵇⴱⴻⵍ. ⵎⵉ ⴰⵔⴰ ⵜⵜⴻⴼⵔⵓⴹ ⵙ ⵜⵎⴻⵥⴷⵉⵜ, ⵙⵏⵓⵍⴼⵓⵜ-ⵉⴷ ⵢⴻⵔⵏⴰ ⴱⴷⵓ ⵙⴻⴳ ⴱⴷⵓⴷⴰⴳⵉⴰⴼⴻⵔⴷⵉⵙ:


git clone git@github.com:<your-username>/fullstack-resourcify.git

ⵎⴰ ⵜⵊⴻⴱⴹⴻⴹ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵙⴱⴰⴷⵓⴰⴳⵉ:

  • ⵍⴷⵉ ⴰⵙⴻⵏⴼⴰⵔ ⵙ ⵓⵎⴻⵙⴽⴰⵔ ⵏ ⵓⵏⴳⴰⵍ ⵉ ⵜⵃⴻⵎⵎⵍⴻⴹ

  • ⴱⴻⴷⴷⴻⵍ ⴰⴹⵔⵉⵙ ⵖⴻⵔ ⴰⵣⵡⴰⵔⴰ/

  • ⵙⴱⴻⴷⴷ ⵜⵉⵖⴱⵓⵍⴰ : ⵍⵅⵉⴹ

  • ⴱⴷⵓ ⴰⵇⴻⴷⴷⴰⵛ ⵏ ⵓⵙⵏⴻⵔⵏⵉ: ⵢⴰⵔⵏ dev·

ⴰⵙⴻⴽⵍⴻⵙ ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵢⵉⵍⵉ ⴰⵎ ⵡⴰ:

Changing user name

ⵉⵙⴻⵎ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⴷⴻⴳ Navbar – ⵜⴰⵎⴰ ⵜⴰⵢⴻⴼⴼⵓⵙⵜ ⵏ ⵓⴼⴻⵍⵍⴰ – ⴷ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵜⴻⴳⵏⵉⵜ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷⴻⵏ ⴷⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⴰⴳⴻⵊⴷⴰⵏ ⵏ App. ⵢⵉⵡⴻⵏ ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⵢⴻⵜⵜⵡⴰⵄⴻⴷⴷⴰ ⴰⵎⴰ ⵉ Navbar ⴰⵎⴰ ⵉ ⵓⵙⴻⴱⵜⴻⵔ ⵏ Uxxam. ⵜⴰⵍⵖⴰ ⵜⴰⴼⵔⴰⵔⴰⵢⵜ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⵙⴷⴰⵜⴰ ⵜⴻⵙⵙⴻⵎⵔⴰⵙ ⵙ ⵜⵉⴷⴻⵜ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵜⴻⴳⵏⵉⵜ “ⵉⵙⴻⵎ” ⵙⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⵏ EditPage.

ⵙⵉⵏ ⵏ ⵢⵉⴱⴻⵔⴷⴰⵏ ⵉ ⴷⵢⴻⵜⵜⵡⴰⵇⴻⴷⴷⵎⴻⵏ ⴷⴷⴰⵡⴰ ⴰⴷ ⴽⴻⵛⵎⴻⵏ ⴷⴻⴳ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵓⵙⵏⴻⴼⵍⵉ :

ⵜⴰⵇⴻⵔⴱⵉⵜ ⵜⴰⵎⴻⵣⵡⴰⵔⵓⵜ: ⵓⵙⴻⵇⴷⴻⵛⴰⵡⴰⵏⴰⴽ

ⴰⵙⴻⵇⴷⴻⵛ ⵏ Uwanak ()

ⵓⵙⴻⵙⵜⴰⵜⴻ ⴷ ⵢⵉⵡⴻⵏ ⵙⴻⴳ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ React ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⵙ ⵡⴰⵟⴰⵙ, ⵢⴻⵜⵜⴰⴵⴵⴰⴽ ⴰⴷ ⵜⴻⵙⵏⵓⵍⴼⵓⴹ ⵢⴻⵔⵏⴰ ⴰⴷ ⵜⴱⴻⴷⴷⴻⵍⴻⴹ ⴰⵃⵔⵉⵛ ⴷⴻⴳ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ React Functional. ⴰⴼⵜⵓⵙ ⵓⵙⴻⵙⵜⴰⵜⴻ ⵢⴻⵙⵄⴰ ⴰⵙⴻⴹⵔⵓ ⵙ ⵜⵉⴷⴻⵜ ⵙ ⵜⵖⴰⵡⵍⴰ ⵢⴻⵔⵏⴰ ⵢⴻⵙⵀⴻⵍ ⵉ ⵓⵙⴻⵇⴷⴻⵛ : ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵜⴻⵙⵏⵓⵍⴼⵓⴹ ⴰⵃⵔⵉⵛ ⴰⵎⴰⵢⵏⵓⵜ, ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵜⴻⵙⵙⵉⵡⴹⴻⴹ ⵓⵙⴻⵙⵜⴰⵜⴻ ⵙ ⵡⴰⵣⴰⵍ ⴰⵎⴻⵣⵡⴰⵔⵓ ⵏ ⵓⵃⵔⵉⵛⵉⴽ ⵢⴻⵔⵏⴰ ⴰⵖⴻⵔⵙⵉⵡ ⵏ ⵓⵙⴻⵙⵜⴰⵜⴻ ⴰⴷ ⴷⵢⴻⵔⵔ ⵢⵉⵡⴻⵏ ⵏ ⵓⵙⵎⴻⵍ ⵉⴷⴻⴳ ⵍⵍⴰⵏ ⵙⵉⵏ ⵏ ⵢⵉⵎⴻⴹⵇⴰⵏ : ⴰⵎⴻⵣⵡⴰⵔⵓ ⴷ ⴰⵃⵔⵉⵛ . variable ⵉ ⵜⵣⴻⵎⵔⴻⴹ ⴰⴷ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⴻⵙⵎⴻⴽⵜⵉⴹ ⵙ ⵍⵃⴰⵍⴰⵉⵏⴻⴽ, ⴷ ⵡⵉⵙ ⵙⵉⵏ ⴷ ⵜⴰⵖⵓⵍⵜ ⵉ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⴱⴻⴷⴷⴻⵍⴻⴹ ⴰⵣⴰⵍ ⵏ ⵍⵃⴰⵍⴰ: ⵙⵔⵉⴷ ⴰⵟⴰⵙ.

ⴰⵎⴻⴽ ⴰⵔⴰ ⵏⵡⴰⵍⵉ ⴰⵢⴰ ⴷⴻⴳ ⵜⵉⴳⴰⵡⵜ? ⵉⵙⴻⵎ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⴷⴻⴳ Navbar – ⵜⴰⵎⴰ ⵜⴰⵢⴻⴼⴼⵓⵙⵜ ⵏ ⵓⴼⴻⵍⵍⴰ – ⴷ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵜⴻⴳⵏⵉⵜ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷⴻⵏ ⴷⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⴰⴳⴻⵊⴷⴰⵏ ⵏ App. ⵢⵉⵡⴻⵏ ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⵢⴻⵜⵜⵡⴰⵄⴻⴷⴷⴰ ⴰⵎⴰ ⵉ Navbar ⴰⵎⴰ ⵉ ⵓⵙⴻⴱⵜⴻⵔ ⵏ Uxxam. ⵜⴰⵍⵖⴰ ⵜⴰⴼⵔⴰⵔⴰⵢⵜ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⵙⴷⴰⵜⴰ ⵜⴻⵙⵙⴻⵎⵔⴰⵙ ⵙ ⵜⵉⴷⴻⵜ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵜⴻⴳⵏⵉⵜ “ⵉⵙⴻⵎ” ⵙⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⵏ EditPage. ⵜⴰⴳⴳⴰⵔⴰ ⴷ ⵜⴰⴳⵉ: ⵓⵙⴻⵙⵜⴰⵜⴻ ⴷ ⴰⵖⴻⵔⵙⵉⵡ ⵏ ⵜⵖⴻⵔⵖⴻⵔⵜ ⵉⵇⴻⴱⵍⴻⵏ ⴰⵃⵔⵉⵛ ⴰⵎⴻⵣⵡⴰⵔⵓ ⴷ ⴰⴼⴻⵔⴷⵉⵙ ⵢⴻⵔⵏⴰ ⵢⴻⵜⵜⴰⵔⵔⴰⴷ ⵙⵉⵏ ⵏ ⵢⵉⵎⴻⴹⵇⴰⵏ ⵢⴻⵟⵟⴼⴻⵏ ⵙⵉⵏ ⵏ ⵡⴰⵣⴰⵍⴻⵏ, ⴰⵎⴳⵉⵔⴻⴷ ⵏ ⵓⵃⵔⵉⵛ ⵢⴻⵙⵄⴰⵏ ⴰⵃⵔⵉⵛ ⴰⵎⴻⵣⵡⴰⵔⵓ, ⴷ ⵜⵎⴻⵥⵍⴰ ⵏ ⵓⵙⴱⴻⴷⴷ ⵉ ⵢⵉⵡⴻⵏ ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⵏ ⵓⵃⵔⵉⵛ.

ⴰⴷ ⵜⵏⴻⴱⴹⵓ, ⴰⴷ ⵏⵡⴰⵍⵉ ⴰⵎⴻⴽ ⵉ ⴷⵢⴻⵍⵍⴰ ⵡⴰⵢⴰ ⴷⴻⴳ ⵓⵎⴽⴰⵏ ⴰⵎⴻⵣⵡⴰⵔⵓ.

  1. Asnulfu ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⵏ ⵜⴻⴳⵏⵉⵜ “ⵉⵙⴻⵎ” :

./ⵙⵔⵛ/ⴰⵙⵏⴰⵙ.ⵊⵙⵅ


import { useState } from "react";

function App() {
const testValue = "CLA";
 //using the useState hook to create a state variable out of an initial value passed as an argument
 const [name, setName] = useState(testValue);
 console.log(`Rendering: ${name}`);

 return (...)};

ⵉⴼⴰⵔⵉⵙⴻⵏ

Props ⴷ ⵢⵉⵡⴻⵏ ⵙⴻⴳ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵍⴻⴱⵏⵉ ⵏ ⵍⵍⵙⴰⵙ ⵏ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵔⴻⴰⵛⵜ, ⵙ ⵜⵎⵓⵖⵍⵉ, ⵎⴰ ⵜⵅⴻⵎⵎⴻⵎⴻⴹ ⵖⴻⴼ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵜⵖⴰⵔⴰ ⵏ React ⴰⵎ ⵜⵖⴰⵔⴰ ⵏ Javascript, ⵉⵀⵉ props ⵓⵔ ⵍⵍⵉⵏ ⴰⵔⴰ ⴷ ⴰⵢⴻⵏ ⵢⵓⴳⴰⵔⴻⵏ ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵜⵖⴰⵔⴰ, ⴰⵙⴷⵓⴽⴽⴻⵍ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵜⵖⴰⵔⴰ ⴷ ⵓⵙⴻⵙⵜⴰⵜⴻ hook ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⴰⴽⴷ-ⵢⴻⴼⴽ ⴰⴽⴰⵔⴰⵎ ⵉⴵⴻⵀⴷⴻⵏ . ⵉ ⵓⵙⴻⵍⴽⴻⵎ ⵏ ⵓⵡⴰⵏⴰⴽ ⴷⴻⴳ ⵢⵉⵡⴻⵏ ⵏ ⵓⵙⴻⵇⴷⴻⵛ ⵏ React ⴰⴼⵔⴰⵔⴰⵢ.

ⵔⴻⴰⵛⵜ props ⵜⵜⵡⴰⵄⴻⴷⴷⴰⵢⴻⵏ ⴰⵎ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵓⵙⵎⴻⵍ. ⴰⵜⵜⵔⵉⴱⵓⵜⵙ ⵉⵄⴻⴷⴷⴰⵏ ⴷ props ⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵜⵜⵡⴰⴼⴻⵔⵇⴻⵏ ⵙⴻⴳ ⵜⵖⴰⵡⵙⴰ ⵏ props ⵎⵉ ⴰⵔⴰ ⵜⵜⵇⴻⴱⵍⴻⵏ ⴷ ⴰⵔⴳⵓⵎⴻⵏⵜ, ⴰⵎ ⵡⴰⵢⴰ:

ⴰⵄⴻⴷⴷⵉ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ

<Routes>
  <Route path="/" element={<Home name={name} />} /> // Passing name as a prop to
  Home Component
  <Route
    path="/user"
    element={<EditUser name={name} setName={setName} />} // passing both name and setItem function as props to EditUser component
  />
  <Route path="/login" element={<Login />} />
</Routes>

Props ⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵜⵜⵡⴰⵇⴱⵍⴻⵏ ⵢⴻⵔⵏⴰ ⴰⴷ ⵜⵜⵡⴰⵙⴻⵇⴷⴰⵛⴻⵏ ⴷⴰⵅⴻⵍ ⵏ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵜⵖⴰⵔⴰ ⵢⴻⵛⴱⴰⵏ ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵜⵖⴰⵔⴰ ⵏ ⵜⵖⴰⵔⴰ. ⴷⵖⴰ ⵉⵎⵉ “ⵉⵙⴻⵎ” ⵢⴻⵜⵜⵡⴰⵄⴻⴷⴷⴰ ⴷ ⴰⴼⴻⵔⴷⵉⵙ ⵏ Home, ⴷⵖⴰ ⵏⴻⵣⵎⴻⵔ ⴰⴷ ⵜⵏⴻⵔⵔ ⴷⴻⴳ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ. ⴷⴻⴳ ⵓⵎⴻⴷⵢⴰ ⵉ ⴷⵉⵜⴻⴷⴷⵓⵏ, ⵏⴻⵇⴱⴻⵍ ⴰⵙⴻⵏⴼⴰⵔ ⵉⵄⴻⴷⴷⴰⵏ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⴻⵙⵏⵉⵍⴻⵙⵜ ⵏ ⵓⵙⴱⴻⴷⴷⵉ ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵏⴻⴽⴽⴻⵙ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵢⵉⵙⴻⵎ ⵙⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵙⴻⵏⴼⴰⵔ.

ⴰⵇⴱⴰⵍ ⵏ ⵢⵉⴼⴰⵔⵉⵙⴻⵏ

./ⵙⵔⵛ/ⵉⵙⴻⴱⵜⴰⵔ/Axxam.ⵊⵙⵅ

... ...
export default function Home({name}) { //Destructuring the name property from the props object, another approach would be: Home(props.name)
 console.log("Rendering: Home");
 return (
   <div className="flex flex-col bg-white m-auto p-auto">
     <h1 className="flex py-5 lg:px-20 md:px-10 mx-5 font-bold text-2xl text-gray-800">
       Welcome {name}
     </h1>
... ...

ⴰⵙⴻⵖⵜⵉ ⵏ ⵓⵎⴻⵥⵍⵓ

ⵍⴷⵉ ⵜⴰⵖⵓⵍⵜ ⵏ ⵓⵙⴻⵍⴽⵉⵎ, ⵓ ⵥⴻⵔ ⴰⵎⴻⴽ ⴰⴽⴽ ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵏ “ⵉⵙⴻⵎ” ⵜⵜⵡⴰⵄⴻⵔⴹⴻⵏ ⵎⵉ ⴰⵔⴰ ⵉⴱⴻⴷⴷⴻⵍ ⵍⵃⴰⵍ. ⵎⵉ ⴰⵔⴰ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵜⴻⴳⵏⵉⵜ, React ⴰⴷ ⵢⴻⵃⵔⴻⵣ ⵜⴰⴳⵏⵉⵜ ⵉ ⴷⵉⵜⴻⴷⴷⵓⵏ, ⴰⴷ ⴷⵢⴻⵔⵔ ⴰⴼⴻⵔⴷⵉⵙⵉⴽ ⵙ ⵡⴰⵣⴰⵍⴻⵏ ⵉⵎⴰⵢⵏⵓⵜⴻⵏ, ⵢⴻⵔⵏⴰ ⴰⴷ ⵢⴻⵙⵏⴻⴼⵍⵉ UI.

Components Re-rendering

ⵓⵙⴻⵇⴷⴻⵛ ⵏ Uwanak ⵏ ⵡⵓⴳⵓⵔⴻⵏ

Tiɣzi ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ

Props ⴷⵔⵉⵍⵍⵉⵏⴳ ⴷ ⴰⵡⴰⵍ ⵉ ⴷⵢⴻⵙⵎⴻⴽⵜⴰⵢⴻⵏ ⵙ ⵜⵎⴻⵥⴷⵉⵜ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⴰⵏⴷⴰ ⵢⵉⵡⴻⵜ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵜⴻⵃⵡⴰⴵ ⴽⵔⴰ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵢⴻⵜⵜⵓⵏⴻⴼⴽⴻⵏ ⵙⵖⵓⵔ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⴰⵎⴰⵜⵓ, ⴰⵙⴻⵏⴼⴰⵔ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⵏ ⵉ ⵙⵙⴻⵇⴷⴰⵛⴻⵏ ⵙ ⵓⵎⴰⵜⴰ ⵓⵎⵙⴻⴼⵔⴰⴽ ⵓⵔ ⵏⴻⵙⵄⵉ ⴰⵔⴰ ⵜⵎⵓⵙⵙⵏⵉ ⴷ ⴰⵄⴻⴷⴷⵉ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏⴰ ⴷⴻⴳ ⵡⴰⴽⴽ ⵜⴰⵙⵏⵉⵍⴻⵙⵜ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ, ⵜⴰⵎⵙⴰⵍⵜ ⵙ ⵡⴰⵢⴰ . ⵜⵎⵓⵖⵍⵉ ⴷ ⴰⴽⴽⴻⵏ ⴰⴱⴻⴷⴷⴻⵍ ⴷⴻⴳ ⴽⵔⴰ ⵙⴻⴳ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏⴰ ⴰⴷ ⴷⵢⴻⵙⴱⴻⴷⴷ ⴰⴽⴽ ⵜⴰⵙⵏⵉⵍⴻⵙⵜ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵜⴻⵔⵔ, ⵙ ⵜⵖⴰⵡⵍⴰ, ⴰⴷ ⵜⴻⵙⴼⴻⴹ ⴰⴽⴽ ⴰⵙⴻⵏⴼⴰⵔ ⵙ ⵍⴵⴻⵀⴷ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏⴰ ⵓⵔ ⵏⴻⵙⵄⵉ ⵍⵎⴻⵄⵏⴰ, ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵢⴻⵍⵍⴰⵏ ⴷⴻⴳ ⵜⵍⴻⵎⵎⴰⵙⵜ ⵏ ⵜⴻⵙⵏⵉⵍⴻⵙⵜ ⵓⵔ ⵏⴻⵃⵡⴰⴵ ⴰⵔⴰ ⵉⴼⴻⵔⴷⵉⵙⴻⵏⴰ . ⵜⵜⴳⴻⵏ ⴰⵎⵣⵓⵏ ⴷ ⴰⵍⵍⴰⵍⴻⵏ ⵏ ⵓⵙⵉⵡⴻⴹ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵎⴻⵖⵔⴰ.

ⴰⵎⴷⵢⴰ:

  • ⴰⵎⴳⵉⵔⴻⴷ ⵏ ⵜⴻⴳⵏⵉⵜ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷ ⴷⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⴰⴳⴻⵊⴷⴰⵏ ⵏ App ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵓⵙⴻⵙⵜⴰⵜⴻ ()

  • ⵉⵙⴻⵎ ⵏ ⵓⵙⵎⴻⵍ ⵢⴻⵜⵜⵡⴰⵄⴻⴷⴷⴰ ⵉ ⵓⴼⴻⵔⴷⵉⵙ ⵏ Navbar

  • ⵢⵉⵡⴻⵏ ⵏ ⵓⵙⵎⴻⵍ ⵢⴻⵜⵜⵡⴰⵇⴱⴻⵍ ⴷⴻⴳ Navbar ⵢⴻⵔⵏⴰ ⵢⴻⵣⵔⵉ ⴷ ⵓⵙⵎⴻⵍ ⵜⵉⴽⴽⴻⵍⵜ ⵏⵏⵉⴹⴻⵏ ⵉ ⵓⴼⴻⵔⴷⵉⵙ ⵏ UserDropdown

  • UserDropdown ⴷ ⴰⴼⴻⵔⴷⵉⵙ ⴰⵏⴻⴳⴳⴰⵔⵓ ⵏ ⵜⵎⴻⵟⵟⵓⵜ ⵉⵇⴻⴱⵍⴻⵏ ⴰⵙⴻⵏⴼⴰⵔ.

Prop-drilling

./ⵙⵔⵛ/ⴰⵙⵏⴰⵙ.ⵊⵙⵅ

... ...
function App() {
 const [name, setName] = useState(test);
 console.log("Rendering: App");

 return (
   <BrowserRouter>
     <div className="h-screen">
       <Navbar name={name} />

       <main className="px-4">
... ...

./ⵙⵔⵛ/ⵉⴼⴻⵔⴷⵉⵙⴻⵏ/Asmel.ⵊⵙⵅ

import React from "react";
import Logo from "../assets/cla.svg";
import { BiSearchAlt } from "react-icons/bi";
import { Link } from "react-router-dom";
import UserDropdown from "./UserDropdown";

export default function Navbar({ name }) {
  console.log("Rendering: Navbar");

  return (
    <>
      <div className="navbar bg-base-100 drop-shadow-sm">
        <div className="flex-1">
          <Link
            to="/"
            className="btn btn-ghost normal-case text-md md:text-xl px-2 gap-1"
          >
            <img src={Logo} className="h-6" alt="" />
            Resources
          </Link>
        </div>

        <UserDropdown name={name} />
      </div>
    </>
  );
}

ⵅⴰⵢⴻⵍⴷ ⴰⵛⵃⴰⵍ ⴷ ⴰⵢⴻⵏ ⵉⵡⴻⵄⵔⴻⵏ ⴰⴷ ⵜⴻⵟⵟⴼⴻⴹ ⵜⴰⵙⴻⵏⵙⴻⵍⴽⵉⵎⵜ ⵏ React ⵙ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⴰⴽⴽ ⵢⴻⵜⵜⵄⴻⴷⴷⴰⵢⴻⵏ ⵢⴻⵔⵏⴰ ⵜⵜⴳⴻⵏⴷ ⵢⵉⵡⴻⵏ ⵏ ⵍⵃⴰⵍ.

ⵜⵉⵎⴻⵔⵏⵉⵡⵜ ⵏ ⵓⵙⵡⵉⵔ ⴷ ⵜⵖⴰⵔⴰ ⵏ ⵓⴹⵔⵉⵙ

ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵓⵙⴻⵙⵜⴰⵜⴻ ⴷ props ⴷ ⴰⵍⵍⴰⵍ ⴽⴰⵏ ⵏ ⵓⵙⴻⵍⴽⴻⵎ ⵏ ⵓⵡⴰⵏⴰⴽ ⴷⴻⴳ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵔⴻⴰⵛⵜ, ⵜⴰⵖⵓⵍⵜ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵜⴻⵣⵎⴻⵔ ⴰⴷ ⵜⵏⴻⵔⵏⵉ ⵙ ⵜⵖⴰⵡⵍⴰ ⴷⴻⴳ ⵜⵖⴰⵔⴰ, ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵜⴻⵙⵙⴻⵍⵃⵓ ⵎⵔⴰⵡ ⵏⴻⵖ ⵜⵉⵎⴻⵢⵢⴰⵜⵉⵏ ⵏ ⵢⵉⵎⴻⴹⵇⴰⵏ ⵏ ⵓⵡⴰⵏⴰⴽ, ⵉⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵉⵍⵉⵏ ⴷ ⵉⴹⵔⵉⵙⴻⵏ ⵏ ⵡⴰⵢⴻⴹ, ⵜⵜⵡⴰⴼⴻⵔⵇⴻⵏ ⴷⴻⴳ ⵢⵉⴼⵓⵢⵍⴰ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ ⴷ . ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵉⵍⵉⵏ ⴷ ⴰⵢⴻⵏ ⵢⴻⵙⵙⴻⵡⵀⴰⵎⴻⵏ ⴰⵟⴰⵙ, ⵢⴰⵍ ⴰⴱⴻⴷⴷⴻⵍ ⴷⴻⴳ ⵓⵎⴳⵉⵔⴻⴷ ⵏ ⵜⴻⴳⵏⵉⵜ ⵢⴻⵜⵜⵓⵏⴻⴼⴽⴻⵏ ⴰⴷ ⵢⴻⵃⵡⴰⴵ ⴰⵅⴻⵎⵎⴻⵎ ⵙ ⵍⵃⵉⵔ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⴳⴰⵔ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⴰⴽⴽⴻⵏ ⴰⴷ ⵢⴻⵃⴱⴻⵙ ⴽⵔⴰ ⵏ ⵓⵙⵏⴻⵔⵏⵉ ⵏ ⵓⵙⵏⴻⵔⵏⵉ ⵉⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵢⵉⵍⵉ ⴷⴻⴳ ⵓⵙⴻⵇⴷⴻⵛ ⵢⴻⵍⵍⴰⵏ ⵢⴰⴽⴰⵏ ⴷ ⴰⵃⴻⵔⴼⵉ.

ⴰⵇⴻⵔⵔⴻⴱ ⵡⵉⵙ ⵙⵉⵏ: API ⵏ ⵓⴹⵔⵉⵙ

API ⵏ Context ⴷ ⴰⵄⵔⴰⴹ ⵏ React ⴰⴽⴽⴻⵏ ⴰⴷ ⵢⴻⴼⵔⵓ ⵍⵇⴻⵍⵍⴰ ⵏ ⵓⵙⴻⵇⴷⴻⵛ ⴽⴰⵏ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵎⴻⵥⴷⵉⵜ (props) ⴷ ⵓⵙⴻⵙⵜⴰⵜⴻ ⵉ ⵜⵎⴻⵀⵍⴰ ⵏ ⵓⵡⴰⵏⴰⴽ, ⵍⴰⴷⵖⴰ, API ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵢⴻⵜⵜⴰⵙⴷ ⴷ ⵜⵉⵔⵉⵔⵉⵜ ⵖⴻⴼ ⵜⴻⵎⵙⴰⵍⵜ ⴰⵢ ⴷⵏⴻⴱⴷⴻⵔ ⵢⴰⴽⴰⵏ ⴷⴻⴳ ⵡⴰⵢⴻⵏ ⵢⴻⵔⵣⴰⵏ ⴰⵃⵔⵉⵛ ⵏ ⵓⵄⴻⴷⴷⵉ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵎⴻⵥⴷⵉⵜ (props) ⵙ ⵜⵎⴻⵥⴷⵉⵜ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵙ ⵍⴻⴽⵎⴰⵍⵏⵏⴻⵙ. ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⵎⴻⵏⴹⴰⵡⵜ, ⵜⵣⴻⵎⵔⴻⴹ ⴰⴷ ⵜⴻⵙⴱⴻⴷⴷⴻⴹ ⴰⵃⵔⵉⵛ ⵉ ⵢⵉⵙⴻⴼⴽⴰ ⴰⵢ ⵜⵃⴻⵙⴱⴻⴹ ⴷ ⴰⵎⴰⴹⵍⴰⵏ ⵢⴻⵔⵏⴰ ⴰⴷ ⵜⴰⵡⴻⴹ ⵖⴻⵔ ⵜⴻⴳⵏⵉⵜⵏⵏⴻⵙ ⵙⴻⴳ ⵢⴰⵍ ⵜⴰⵏⵇⵉⴹⵜ ⴷⴻⴳ ⵓⵙⴻⴽⵍⵓ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ: ⵓⵍⴰⵛ ⴰⵟⴰⵙ ⵏ propdrilling.

ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⴷⵏⴻⵙⵎⴻⴽⵜⵉ ⴱⴻⵍⵍⵉ API ⵏ ⵜⵎⴻⵏⴹⴰⵡⵜ ⵢⴻⵜⵜⵡⴰⵅⴷⴻⵎ ⴷⴻⴳ ⵜⴰⵣⵡⴰⵔⴰ ⴰⴽⴽⴻⵏ ⴰⴷ ⵢⴻⴼⵔⵓ ⵜⴰⵍⵓⴼⵜ ⵏ ⵓⵄⴰⵡⴻⴷ ⵏ ⵢⵉⵙⴻⴼⴽⴰ ⵉⵎⴰⴹⵍⴰⵏⴻⵏ, ⵉⵙⴻⴼⴽⴰ ⴰⵎ ⵢⵉⵙⴻⵏⵜⴰⵍ ⵏ UI, ⵉⵙⴰⵍⴰⵏ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵢⴻⵍⵍⴰⵏ ⴷ ⵜⴰⵍⵓⴼⵜⵏⵏⴻⵖ ⵏ ⵓⵙⴻⵇⴷⴻⵛ, ⵜⵓⵜⵍⴰⵢⵉⵏ ⴷ ⵡⴰⵢⴻⵏ ⵏⵏⵉⴹⴻⵏ), ⵉ ⵚⵚⴻⵏⴼ ⵏⵏⵉⴹⴻⵏ ⵏ ⵢⵉⵙⴻⴼⴽⴰ ⵉ ⵢⴻⵙⵙⴻⴼⴽⴻⵏ ⴰⴷ ⵜⵜⵡⴰⴱⴹⵓⵏ . ⴳⴰⵔ ⵓⴳⴰⵔ ⵏ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵎⴰⵛⴰ ⵓⵔ ⵢⴻⵍⵍⵉ ⴰⵔⴰ ⴷ ⴰⵎⴰⴹⵍⴰⵏ ⵙ ⵍⵃⴻⵇⵇ ⵉ ⵡⴰⴽⴽ ⴰⵙⴻⵏⴼⴰⵔ, ⴰⴹⵔⵉⵙ ⵢⴻⵣⵎⴻⵔ ⵓⵔ ⵢⴻⵍⵍⵉ ⴰⵔⴰ ⴷ ⴰⴼⴻⵔⴷⵉⵙ ⵉⴳⴻⵔⵔⵣⴻⵏ, ⵙ ⵍⵎⴻⵏⴷⴰⴷ ⵏ ⵜⴻⴳⵏⵉⵜ ⵏ ⵓⵙⴻⵇⴷⴻⵛ, ⵜⵣⴻⵎⵔⴻⴹ ⴰⴷ ⵜⵃⴻⵙⴱⴻⴹ ⵜⵉⴳⵏⴰⵜⵉⵏ ⵏⵏⵉⴹⴻⵏ ⴰⵎ ⴰⵙⵏⵓⵍⴼⵓ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ​​ⵢⴻⵍⵍⴰⵏ ⴱⴻⵔⵔⴰ ⵉ ⵜⵖⴻⵔⵖⴻⵔⵜ ⵏ ⵓⵎⴰⴳⵔⴰⴷⴰ.

ⴰⴱⴻⴷⴷⴻⵍ ⵖⴻⵔ ⵓⴹⵔⵉⵙ

ⴰⵙⵏⵓⵍⴼⵓ ⵏ ⵓⵙⵡⵉⵔ ⵏ Auth

createContext ⴷ ⵙⵔⵉⴷ, ⵢⴻⵙⵏⵓⵍⴼⵓⴷ ⴰⵎⴳⵉⵔⴻⴷ ⴰⵎⴰⵢⵏⵓⵜ ⵏ ⵜⵎⴻⵏⴹⴰⵡⵜ, ⵢⴻⵜⵜⴰⵟⵟⴰⴼ ⴷⴻⴳ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵜⴼⴻⵔⵏⵉⵜ : ⴰⵣⴰⵍ ⵏ ⵜⵎⴻⵏⴹⴰⵡⵜ ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⵏ ⵜⵎⴻⵏⴹⴰⵡⵜ.

ⴰⴷ ⵏⵡⴰⵍⵉ ⴰⵢⴰ ⵙ ⵜⵉⴳⴰⵡⵜ, ⴷⵉ ⵜⴰⵣⵡⴰⵔⴰ ⵙⵏⵓⵍⴼⵓⴷ ⴰⴹⵔⵉⵙ ⴰⵎⴰⵢⵏⵓⵜ “contexts” ⴷ ⵓⴼⴰⵢⵍⵓ ⴰⵎⴰⵢⵏⵓⵜ ⴷⴰⵅⴻⵍⵉⵙ “Auth.ⵊⵙⵅ”. ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵏⴻⵙⵏⵓⵍⴼⵓ ⴰⴹⵔⵉⵙ ⴰⵎⴰⵢⵏⵓⵜ, ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⴷⵏⴻⵙⵙⵓⵜⴻⵔ ⵜⴰⵖⵓⵍⵜ createContext (), ⴰⴷ ⵏⴻⴼⴽ ⴰⵣⴰⵍ ⵢⴻⵜⵜⵡⴰⵇⵇⵏⴻⵏ ⵉ ⵓⵎⴳⵉⵔⴻⴷ ⴰⵎⴰⵢⵏⵓⵜ Auth ⴰⵔⴰ ⴷⵢⴻⴼⴼⵖⴻⵏ ⵙⴷⴰⵜⵏⴻⵖ:

./ⵙⵔⵛ/ⵉⴹⵔⵉⵙⴻⵏ/ⴰⵙⵏⴰⵙ.ⵊⵙⵅ

import { createContext } from "react";

export const Auth = createContext();

ⴻⴼⴽⴷ ⴰⵙⴻⵏⵜⴻⵍ ⵏ ⵓⵙⴻⴽⵍⴻⵙ

ⵜⵓⵔⴰ ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⴷⵏⴻⵙⵙⴻⴽⵍⴻⵙ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵓⵙⵡⵉⵔ "Auth" ⵉ ⴷⵏⴻⵙⵏⵓⵍⴼⴰ ⵣⵉⴽ, ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴰⵡⴻⴹ ⵖⴻⵔ ⵡⴰⵢⴰ ⵏⴻⵙⵙⴻⵅⴷⴰⵎ ⴰⵎⵙⴻⴼⵔⴰⴽ ⵏ ⵓⵙⵡⵉⵔ, ⴰⵎⵙⴻⴼⵔⴰⴽ ⵏ ⵓⵙⵡⵉⵔ ⴷ ⴰⴼⴻⵔⴷⵉⵙ ⵢⴻⵙⵄⴰⵏ ⴰⵙⴻⵏⴼⴰⵔ ⵏ "ⴰⵣⴰⵍ", ⵏⴻⵣⵎⴻⵔ ⴰⴷ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ ⴰⵙⴻⵏⴼⴰⵔⴰ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴱⴻⴹⴹⵓ ⴰⵣⴰⵍ – ⵉⵙⴻⵎ . – ⵖⴻⴼ ⵜⵖⴻⵔⵖⴻⵔⵜ ⵏ ⵜⴼⴻⵔⴽⵉⵜ, ⵙ ⵓⵙⵇⴻⵔⴷⴻⵛ ⵏ ⵜⴼⴻⵔⴽⵉⵜ ⵏ ⵜⴼⴻⵔⴽⵉⵜ ⵙ ⵜⴼⴻⵔⴽⵉⵜ ⵏ ⵓⵎⵙⴻⴼⵔⴰⴽ ⵏⴻⵅⴷⴻⵎ ⴰⵣⴰⵍⵏⵏⵉ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵡⴻⴹ ⵙⴻⴳ ⵢⴰⵍ ⴰⵎⴽⴰⵏ ⴷⴰⵅⴻⵍ ⵏ ⵜⴼⴻⵔⴽⵉⵜ ⵏ ⵜⴼⴻⵔⴽⵉⵜ, ⵡⴰⵔ ⵎⴰ ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵏⴻⵙⵙⵉⵡⴻⴹ ⴰⴼⴻⵔⴷⵉⵙⵏⵏⵉ ⵉ ⵢⴰⵍ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵍⵍⵓⴼⴰⵏ ⵙ ⵜⵉⵎⵎⴰⴷⵉⵙ.

ⴷⴻⴳ ⵓⵎⴻⴷⵢⴰⵏⵏⴻⵖ ⵏ ⵓⵙⵏⴻⴼⵍⵉ, ⵏⴻⵃⵡⴰⴵ ⴰⴱⴻⴷⴷⴻⵍ ⴰⴽⴽⴻⵏ ⴰⴷ ⵢⴻⵟⵟⴻⴼ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵙⴻⵇⴷⴰⵛ, ⴷ ⴽⵔⴰ ⵏ ⵚⵚⴻⵏⴼ ⵏ ⵓⵙⴻⵎⵔⴻⵙ ⴰⴽⴽⴻⵏ ⴰⴷ ⵉⵃⴰⵔⴻⴱ ⵖⴻⴼ ⵓⴱⴻⴷⴷⴻⵍⵏⵏⵉ ⵏ ⵜⴻⴳⵏⵉⵜ, ⴰⵢⴰ ⴷ ⵜⴰⵍⵓⴼⵜ ⵏ ⵓⵙⴻⵇⴷⴻⵛ ⵉⴽⴻⵎⵍⴻⵏ ⵉ ⵓⵙⴻⵙⵜⴰⵜⴻ. ⵎⵉ ⴰⵔⴰ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ Context, ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵜⵃⴻⵇⵇⵔⴻⴹ ⴱⴻⵍⵍⵉ ⵜⴻⵙⴱⴻⴷⴷⴻⴹ ⵉⵙⴻⴼⴽⴰ ⵉ ⵜⴻⴱⵖⵉⴹ ⴰⴷ ⴷⵜⴻⴼⴽⴻⴹ, ⵢⴻⵔⵏⴰ ⵜⴻⵙⴱⴻⴷⴷⴻⴹ ⵉⵙⴻⴼⴽⴰⵏⵏⵉ – ⴰⵙⴻⵇⴷⴰⵛ ⴷⴻⴳ ⵓⵎⴻⴷⵢⴰⵏⵏⴻⵖ – ⵉ ⵡⴰⴽⴽ ⴰⵙⴻⴽⵍⵓ ⵏ ⵜⴼⴻⵔⴽⵉⵜ ⵉ ⴷⵢⴻⵙⴱⴻⴷⴷⴻⵏ ⴷⴰⵅⴻⵍ, ⵉⵀⵉ ⵙⴱⴻⴷⴷ ⴰⵙⴻⵇⴷⴰⵛ ⴰⵎⴰⵢⵏⵓⵜ ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⵏ ⵜⴻⴳⵏⵉⵜ ⴷⴰⵅⴻⵍ ⵏ ⵜⴼⴻⵔⴽⵉⵜ ⵏ ⵓⵎⵙⴻⴼⵔⴰⴽ ⴷ . ⵜⴰⴳⴳⴰⵔⴰ ⴰⴷ ⵏⴻⵙⵙⵉⵡⴻⴹ ⴰⵎⴰ ⴷ ⴰⵙⴻⵇⴷⴰⵛ ⴰⵎⴰ ⴷ ⵙⴻⵜⵓⵙⴻⵔ ⴷⴰⵅⴻⵍ ⵏ ⵢⵉⵡⴻⵏ ⵏ ⵓⵙⵡⵉⵔ ⴰⵎ ⵡⴰⵣⴰⵍ ⴰⵔⴰ ⴷⵢⴻⵙⴱⴰⵏ ⵓⵎⵙⴻⴼⵔⴰⴽ ⵉ ⵓⵙⴻⴽⵍⵓ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ:

./ⵙⵔⵛ/ⵉⴹⵔⵉⵙⴻⵏ/Asnefli.ⵊⵙⵅ

import { createContext, useState } from "react";

export const Auth = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  return <Auth.Provider value={[user, setUser]}>{children}</Auth.Provider>;
};

ⵜⴰⵖⴰⵡⵙⴰ ⵏⵉⴹⴻⵏ ⵉ ⵏⴻⵣⵎⴻⵔ ⴰⴷ ⵜⵜⵏⴻⵅⴷⴻⵎ ⴷ ⴰⵙⴻⵏⵇⴻⵙ ⵏ ⵓⵎⴳⵉⵔⴻⴷⵏⵏⴻⵖ ⵏ ⵜⴻⴳⵏⵉⵜ “ⵉⵙⴻⵎ” ⵙⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵜⴻⵙⴳⵉⵍⵜ ⵜⴰⵖⴻⵍⵏⴰⵡⵜ ⵖⴻⵔ ⵓⵙⵡⵉⵔ ⵏ Auth ⵢⴻⵔⵏⴰ ⴰⴷ ⵜⵏⴻⵙⵙⴻⴽⵍⴻⵙ ⵉ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵜⵎⴻⵥⴷⵉⵜ:

import { createContext, useState } from "react";

export const Auth = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [name, setName] = useState("CLA");
  return <Auth.Provider value={[name, setName]}>{children}</Auth.Provider>;
};

ⵜⵓⵔⴰ ⴰⵢⴻⵏ ⴰⴽⴽ ⵉ ⴷⵢⴻⵇⵇⵉⵎⴻⵏ ⴷ ⴰⵙⴻⵏⵇⴻⵙ ⵏ ⵜⴻⵙⴳⵉⵍⵜⵏⵏⴻⵖ ⴷⴻⴳ ⵢⵉⵡⴻⵏ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ AuthProvider ⵉ ⴷⵏⴻⵙⵙⴻⴽⵛⴻⵎ ⵜⵓⵔⴰ ⴽⴰⵏ.

./ⵙⵔⵛ/ⴰⴳⴻⵊⴷⴰⵏ.ⵊⵙⵅ:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthProvider } from "./contexts/Auth";

import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <AuthProvider>
    <App />
  </AuthProvider>
);

ⵉⵎⵉ ⵏⴻⵍⵍⴰ ⵏⴻⵙⵙⴻⴽⵛⴰⵎⴷ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵢⵉⴳⴻⵔⴷⴰⵏ ⴷⴰⵅⴻⵍ ⵏ Auth.Provider, ⴰⴽⴽ ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷⴻⵏ ⴷⴰⵅⴻⵍ ⵏ ⵜⴼⴻⵔⴽⵉⵜ AuthProvider ⵣⴻⵎⵔⴻⵏ ⵜⵓⵔⴰ ⴰⴷ ⵙⵇⴻⴷⵛⴻⵏ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵡⴰⵣⴰⵍ ⵉ ⴷⵏⴻⵣⴳⴻⵔ ⵉ Auth.Provider. ⴰⵀⴰⵜ ⴰⴷ ⵢⵉⵍⵉ ⴷ ⴰⵢⴻⵏ ⵉⵅⵓⵚⵚⴻⵏ, ⵎⴰⵛⴰ ⵎⵉ ⴰⵔⴰ ⵜⵜⵊⴻⵔⵎⴻⴹ, ⵄⵔⴻⴹ ⴰⴷ ⴷⵜⴻⴼⴽⴻⴹ ⵢⴻⵔⵏⴰ ⴰⴷ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ ⴰⵃⵔⵉⵛ ⴰⵎⴰⴹⵍⴰⵏ - ⴰⴹⵔⵉⵙ -. ⴰⴽⴽⴻⵏ ⵢⴻⴱⵖⵓ ⵢⵉⵍⵉ, Yefkiyid ⴽⴰⵏ ⵍⵎⴻⵄⵏⴰ ⴷⴻⴼⴼⵉⵔ ⵎⴰ ⵙⵇⴻⴷⵛⴻⵖ API ⵏ Context.

ⴰⵙⴻⵇⴷⴻⵛ ⵏ ⵓⴹⵔⵉⵙ ⵏ ⵓⵙⴻⴽⵍⴻⵙ

ⴰⴹⵔⵉⵙ ⴰⵏⴻⴳⴳⴰⵔⵓ ⴷ ⵡⵉⵏ ⵙⵔⵉⴷ, ⵏⴻⵙⵙⴻⵅⴷⴰⵎ ⴰⵇⴻⵔⵔⵓⵢ ⵏ ⵜⴼⴻⵍⵡⵉⵜ "useContext" ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴰⵡⴻⴹ ⵖⴻⵔ ⵡⴰⵣⴰⵍ ⵉ ⴷⵢⴻⵜⵜⴰⴽ ⵓⵎⵙⴻⴼⵔⴰⴽ ⵏ ⵜⴼⴻⵍⵡⵉⵜ ⵏ "Auth", ⴷⵖⴰ ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜⵏⵏⴻⵖ ⴷ ⴰⴹⵔⵉⵙ ⵉⴷⴻⴳ ⵢⴻⵍⵍⴰ ⵓⵙⴻⵔ ⴷ ⵙⴻⵜⵓⵙⴻⵔ, ⴷⴻⴳ ⵓⴹⵔⵉⵙ ⵉ ⴷⵉⵜⴻⴷⴷⵓⵏ, ⵏⴻⵣⵎⴻⵔ ⴰⴷ . ⵙⵙⴻⵇⴷⴻⵛ useContext ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ ⴰⴹⵔⵉⵙ ⵏ Auth ⴷⴰⵅⴻⵍ ⵏ Navbar. ⴰⵢⴰ ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⵉⵍⵉ ⴽⴰⵏ ⵉⵎⵉ Navbar ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷ ⴷⴰⵅⴻⵍ ⵏ ⵓⴼⴻⵔⴷⵉⵙ ⵏ App, ⵢⴻⵔⵏⴰ ⵉⵎⵉ AuthProvider ⵢⴻⵜⵜⵃⴰⴷⴰⵔ ⴰⴼⴻⵔⴷⵉⵙ ⵏ App, ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵡⴰⵣⴰⵍ ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⴹ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⵎⴻⵥⴷⵉⵜ useContext ⴽⴰⵏ. ⴰⵍⵍⴰⵍ ⵏⵏⵉⴹⴻⵏ ⵉⴳⴻⵔⵔⵣⴻⵏ React ⵢⴻⵜⵜⴰⴽⴷ ⵙⴻⴳ ⵜⴼⴻⵍⵡⵉⵜ ⴰⴽⴽⴻⵏ ⴰⴷ ⵢⴻⵙⵙⴻⵍⵃⵓ ⵢⴰⵍ ⵉⵙⴻⴼⴽⴰ ⵉⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵜⵜⵡⴰⵇⴻⴷⵛⴻⵏ ⴷⴻⴳ ⵓⵎⴰⴹⴰⵍ ⵢⴻⵔⵏⴰ ⴷⴰⵖⴻⵏ ⴰⴷ ⵜⵜⵡⴰⴹⴻⴼⵔⴻⵏ ⵙⵖⵓⵔ ⵢⴰⵍ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵎⵙⴻⵇⴷⴻⵛ.

./ⵙⵔⵛ/ⵉⴼⴻⵔⴷⵉⵙⴻⵏ/Asmel.ⵊⵙⵅ

export default function Navbar() {
 const [name, setName] = useContext(Auth);
 console.log(name)

 return (...)};

ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⵡⴰⵍⵉⴹ ⴰⵎⴻⴽ ⵓⵔ ⵏⴻⵇⴱⵉⵍ ⴰⵔⴰ ⴽⵔⴰ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⴷⴻⴳ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵜⵎⴻⵥⴷⵉⵜ Navbar(). ⵏⴻⵙⵙⴻⵇⴷⴰⵛ useContext(Auth) ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⵙⵙⴻⵎⵔⴻⵙ ⴰⴹⵔⵉⵙ ⵏ Auth ⴷⴻⴳ ⵓⵎⴹⵉⵇⵉⵙ, ⴰⴷ ⵏⴻⵟⵟⴻⴼ ⴰⵎⴰ ⴷ ⵉⵙⴻⵎ ⴰⵎⴰ ⴷ ⵙⴻⵜName. ⴰⵢⴰ ⴷⴰⵖⴻⵏ ⴰⵏⴰⵎⴻⴽⵉⵙ ⵓⵔ ⵏⴻⵃⵡⴰⴵ ⴰⵔⴰ ⴰⴷ ⵏⴻⵙⵙⵉⵡⴻⴹ prop ⵖⴻⵔ Navbar:

./ⵙⵔⵛ/ⴰⵙⵏⴰⵙ.ⵊⵙⵅ

// ... //
return (
   <BrowserRouter>
     <div className="h-screen">
       <Navbar/> // no need to pass prop anymore
// ... //

ⴰⵙⵎⴰⵢⵏⵓⵜ ⵏ ⵓⵙⴻⵏⵜⴻⵍ ⵏ ⵓⵙⴻⴽⵍⴻⵙ

ⵏⴻⵣⵎⴻⵔ ⴷⴰⵖⴻⵏ ⴰⴷ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ ⵜⴰⵖⵓⵍⵜ ⵙⴻⵜⵏⴰⵎⴻ ⵢⴻⵜⵜⵓⵏⴻⴼⴽⴻⵏ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⵙⵙⴻⵎⵔⴻⵙ ⴰⴱⴻⴷⴷⴻⵍ ⵏ ⵜⴻⴳⵏⵉⵜ “ⵉⵙⴻⵎ”:

./ⵙⵔⵛ/ⵉⵙⴻⴱⵜⴰⵔ/Abeddel ⵏ Useqdac.ⵊⵙⵅ

export default function EditUser() { // no need to accept props anymore
 const [name, setName] = useContext(Auth); // grabbing the name and setName variables from Auth context
 console.log("Rendering: EditUser");

ⴰⵙⴻⴽⵛⴻⵎ ⵏ ⵓⵙⴻⵏⵇⴻⵙ ⵏ ⵓⵙⴻⵇⴷⴻⵛ ()

ⴷⴻⴳ ⵓⵎⴻⴷⵢⴰ ⵉⵄⴻⴷⴷⴰⵏ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ API ⵏ ⵜⵎⴻⵏⴹⴰⵡⵜ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⵙⵙⴻⵎⵔⴻⵙ ⵢⴻⵔⵏⴰ ⴰⴷ ⵏⴱⴻⴹⴹⵓ ⵍⵃⴰⵍⴰⵏⵏⴻⵖ ⴷⴷⴰⵡ ⵏ ⵜⵥⴻⴳⵡⴰ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ, ⴰⵀⴰⵜ ⵜⵡⴰⵍⴰⴹ ⴱⴻⵍⵍⵉ ⵎⴰⵣⴰⵍ ⵏⴻⵙⵙⴻⵅⴷⴰⵎ ⵓⵙⴻⵙⵜⴰⵜⴻ ⴷ ⵍⵍⵙⴰⵙ ⵏ ⵍⵇⴰⵏⵓⵏⵏⵏⴻⵖ, ⵢⴻⵔⵏⴰ ⴰⵢⴰ ⴷ ⴰⵢⴻⵏ ⵢⴻⵍⵀⴰⵏ ⴰⵟⴰⵙ ⵉⵎⵉ ⵍⵃⴰⵍⴰⵏⵏⴻⵖ ⵎⴰⵣⴰⵍⵉⵜⵜ ⴷ ⴰⵢⴻⵏ ⴰⴼⵔⴰⵔⴰⵢ . ⴷⴻⴳ ⵜⴰⵍⵍⵉⵜⴰ ⵎⴰⵛⴰ ⵎⴰ ⵢⴻⵍⵍⴰ ⴰⴷ ⵏⴻⵙⵙⴻⵎⵖⴻⵔ ⵜⵉⵣⴻⵎⵎⴰⵔ ⵏ ⵓⵙⵉⴽⴻⵍⵏⵏⴻⵖ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⴰⴷ ⵏⴻⵃⵡⴰⴵ ⵙ ⵜⵖⴰⵡⵍⴰ ⴰⴷ ⵏⴻⵃⵔⴻⵣ ⵓⴳⴰⵔ ⵏ ⵜⵎⴰⵛⵉⵏⵉⵏ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴽⴰⵏ ⴰⵢ ⴷⵉⴽⴻⵛⵎⴻⵏ ⵜⵓⵔⴰ, ⵢⴻⵔⵏⴰ ⴷⵖⴰ ⴷ ⴰⵢⴰ ⴰⵢⴷⴻⴳ ⴰⵔⴰ ⴷⵏⵓⵖⴰⵍ ⵖⴻⵔ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⴰⵢⴷⴻⴳ ⵏⴻⵍⵍⴰ ⵣⵉⴽ ⴷⴻⴳ ⵡⴰⵢⴻⵏ ⵢⴻⵔⵣⴰⵏ . ⴰⵙⴻⵇⴷⴻⵛ ⵏ ⵓⵙⴻⵙⵜⴰⵜⴻ ⵙ ⵜⴻⴳⵏⵉⵜ ⵏ ⵜⵎⴻⵥⴷⵉⵜ, ⵙ ⵍⵅⵉⵔ, React ⵢⴻⴼⵔⵓ ⵜⴰⵍⵓⴼⵜⴰ ⵙ ⵓⵙⵏⴻⴼⵍⵉ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵏ ⵓⵙⴻⵙⵜⴰⵜⴻ ⵉ ⵓⵙⴻⵍⴽⴻⵎ ⵏ ⵜⴻⴳⵏⵉⵜ ⵏ ⵜⵎⴻⵥⴷⵉⵜ: ⵙⵙⴻⴽⵛⴻⵎ ⵓⵙⴻⵔⴻⴷⵓⵛⴻⵔ.

ⵓⵙⴻⵔⴻⴷⵓⵛⴻⵔ ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵅⴻⵎⵎⴻⵎ ⴷ ⴰⴹⵔⵉⵙ ⴰⵎⴰⵜⵓ ⵏ ⵓⵙⴻⵙⵜⴰⵜⴻ, ⵢⴻⵜⵜⴰⵟⵟⴰⴼ ⵙⵉⵏ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ : ⵜⴰⵖⵓⵍⵜ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⴷ ⵜⴻⴳⵏⵉⵜ ⵜⴰⵎⴻⵣⵡⴰⵔⵓⵜ.

ⵓⵍⴰⵛ ⴰⵢⴻⵏ ⵢⴻⵙⵙⴻⵡⵀⴰⵎⴻⵏ ⴰⵔⴰ ⴷⵏⴻⴱⴷⴻⵔ ⵉ ⵜⴻⴳⵏⵉⵜ ⵜⴰⵎⴻⵣⵡⴰⵔⵓⵜ, ⵙⵃⵓⵔ ⵜⴻⴹⵔⴰⴷ ⴷⴰⵅⴻⵍ ⵏ ⵜⵎⴻⵥⵍⴰ ⵏ ⵓⵙⵏⴻⴼⵍⵉ : ⵜⴻⵜⵜⵡⴰⵍⵉ ⵚⵚⴻⵏⴼ ⵏ ⵜⵉⴳⴰⵡⵜ ⵉ ⴷⵢⴻⴹⵔⴰⵏ, ⵢⴻⵔⵏⴰ ⵙ ⵍⵎⴻⵏⴷⴰⴷ ⵏ ⵜⵉⴳⴰⵡⵜⵏⵏⵉ, ⵓⵙⵏⴻⴼⵍⵉ ⴰⴷ ⴷⵢⴻⵙⴱⴰⵏ ⴷ ⴰⵛⵓ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵜⵉⵎⴰⵢⵏⵓⵜⵉⵏ ⴰⵔⴰ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⵉ ⵜⴻⴳⵏⵉⵜ ⵢⴻⵔⵏⴰ ⴰⴷ ⴷⵢⴻⵔⵔ ⴰⵣⴰⵍⵉⵙ ⴰⵎⴰⵢⵏⵓⵜ . .

ⵎⴰ ⵏⵎⵓⵇⴻⵍ ⵖⴻⵔ ⵓⴽⴰⵔⴰⵎ ⴷⴷⴰⵡⴰ, ⵜⴰⵖⵓⵍⵜ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵜⴻⵙⵄⴰ ⵙⵏⴰⵜ ⵏ ⵚⵚⴻⵏⴼ ⵏ ⵜⵉⴳⴰⵡⵉⵏ ⵉⵣⴻⵎⵔⴻⵏ ⴰⴷ ⵉⵍⵉⵏⵜ:

  • "LOGIN": ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜⴰ, ⴰⵃⵔⵉⵛ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⴼⵍⵉ ⵙ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵜⵉⵎⴰⵢⵏⵓⵜⵉⵏ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⵢⴻⵜⵜⵓⵏⴻⴼⴽⴻⵏ ⴷⴰⵅⴻⵍ ⵏ ⵜⵖⴰⵡⵙⴰ ⵏ ⵜⵉⴳⴰⵡⵜ.

  • "LOGOUT": ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜⴰ, ⴰⴷ ⵢⴻⵜⵜⵡⴰⴽⴽⴻⵙ ⵍⵃⴰⵍ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⵙⴻⴳ ⵓⵃⴻⵣⵣⴻⴱ ⴰⴷⵉⴳⴰⵏ ⵢⴻⵔⵏⴰ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵇⵇⴻⵍ ⵖⴻⵔ ⵏⵓⵍⵍ.

ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⴷⵏⴻⵙⵎⴻⴽⵜⵉ ⴱⴻⵍⵍⵉ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵜⵉⴳⴰⵡⵜ ⵢⴻⵙⵄⴰ ⴰⵎⴰ ⴷ ⴰⵃⵔⵉⵛ ⵏ ⵚⵚⴻⵏⴼ ⵉ ⴷⵢⴻⵙⴱⴻⴷⴷⴻⵏ ⴷ ⴰⵛⵓ ⵏ ⵍⵇⴰⵏⵓⵏ ⴰⵔⴰ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ, ⴰⵎⴰ ⴷ ⴰⵃⵔⵉⵛ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵍⴼⴰⵢⴷⴰ ⵏ ⵜⴼⴻⵔⵏⵉⵜ ⴰⵔⴰ ⴷⵢⴻⴼⴽⴻⵏ ⵉⵙⴻⴼⴽⴰ ⵉⵍⴰⵇⴻⵏ ⵉ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵍⵇⴰⵏⵓⵏⵏⵏⵉ.

ⵜⴰⴳⴳⴰⵔⴰ, ⴰⵖⴻⵔⵙⵉⵡ ⵓⵙⴻⵔⴻⴷⵓⵛⴻⵔ ⵢⴻⵜⵜⴰⵔⵔⴰⴷ ⵜⴰⵍⵍⵉⵜ ⵏ ⵜⵓⵔⴰ ⴷ ⵜⵎⴻⵥⵍⴰ ⵏ ⵓⵛⴻⴳⴳⴻⵄ ⵉ ⵏⴻⵙⵙⴻⵅⴷⴰⵎ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⵙⵙⵉⵡⴻⴹ ⵜⵉⴳⴰⵡⵜ ⵉ ⵓⵙⵏⴻⴼⵍⵉ.

ⵉ ⵡⴰⵢⴻⵏ ⵏⵏⵉⴹⴻⵏ ⵏ ⵍⵇⴰⵏⵓⵏ, ⵢⴻⵜⵜⴻⵎⵛⴰⴱⵉ ⵖⴻⵔ ⵓⵎⴻⴷⵢⴰ ⵉⵄⴻⴷⴷⴰⵏ:

./ⵙⵔⵛ/ⵉⴹⵔⵉⵙⴻⵏ/Asnefli.ⵊⵙⵅ

import { createContext, useEffect, useReducer, useState } from "react";

export const Auth = createContext();
import { createContext, useReducer } from "react";

export const Auth = createContext();
const reducer = (state, action) => {
  switch (action.type) {
    case "LOGIN":
      return { user: action.payload };

    case "LOGOUT":
      localStorage.removeItem("user");
      return { user: null };

    default:
      break;
  }
};

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    user: null,
  });

  return (
    <Auth.Provider value={{ ...state, dispatch }}>{children}</Auth.Provider>
  );
};

ⴰⵙⴻⵏⵇⴻⴷ ⵏ ⵜⵉⴳⴰⵡⵉⵏ ⴷⴻⴳ ⵓⵎⴹⵉⵇ ⵏ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⵎⴻⵥⵍⴰ ⵏ ⵓⵙⴱⴻⴷⴷ ⵙⴻⵜⵙⵜⴰⵜⴻ – ⴰⵎⴻⴷⵢⴰ: ⵙⴻⵜName – .

ⴰⴽⴽⴻⵏ ⵉ ⴷⵏⴻⵏⵏⴰ ⵜⵓⵔⴰ ⴽⴰⵏ, ⵏⴻⵙⵙⴻⵅⴷⴰⵎ ⵜⴰⵖⵓⵍⵜ ⵏ ⵓⵛⴻⴳⴳⴻⵄ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⵙⵙⵉⵡⴻⴹ ⵜⵉⴳⴰⵡⵜ ⵉ ⵓⵙⵏⴻⴼⵍⵉ, ⴷⴻⴳ ⵓⴹⵔⵉⵙ ⵉ ⴷⵉⵜⴻⴷⴷⵓⵏ, ⴰⴷ ⵏⴻⴱⴷⵓ ⵜⵉⴳⴰⵡⵜ ⵏ LOGIN ⵢⴻⵔⵏⴰ ⴰⴷ ⴷⵏⴻⴼⴽ ⵉⵎⴰⵢⵍ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴰⵎ ⵜⵖⴰⵡⵙⴰ ⵏ ⵍⴼⴰⵢⴷⴰ, ⵜⵓⵔⴰ ⵍⵃⴰⵍⴰ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴰⴷ ⵜⴻⵜⵜⵡⴰⵙⵏⴻⴼⵍⵉ ⵢⴻⵔⵏⴰ ⴰⴱⴻⴷⴷⴻⵍⴰ ⴰⴷ ⴷⵢⴻⵙⴱⴻⴷⴷ . ⴰⵄⵉⵡⴻⴷ ⵏ ⵓⵙⵏⵓⵍⴼⵓ ⵏ ⵡⴰⴽⴽ ⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜ ⵏ ⵓⵙⴻⵇⴷⴰⵛ. ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⴷⵏⴻⵙⵎⴻⴽⵜⵉ ⴱⴻⵍⵍⵉ ⴰⵄⵉⵡⴻⴷ ⵏ ⵓⵙⵏⵓⵍⴼⵓ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵙⴱⴻⴷⴷ ⴽⴰⵏ ⵎⴰ ⵢⴻⵍⵍⴰ ⵢⴻⴹⵔⴰⴷ ⵓⴱⴻⴷⴷⴻⵍ ⵏ ⵜⵉⴷⴻⵜ ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜ, ⵓⵍⴰⵛ ⴰⵄⵉⵡⴻⴷ ⵏ ⵓⵙⵏⵓⵍⴼⵓ ⵎⴰ ⵢⴻⵍⵍⴰ ⴰⵙⴻⵏⵇⴻⵙ ⵢⵓⵖⴰⵍⴷ ⵙ ⵜⴻⴳⵏⵉⵜⵏⵏⵉⴹⴻⵏ ⵉⵄⴻⴷⴷⴰⵏ.

export default function Login() {
 const { dispatch } = useContext(Auth);


 const handleLogin = async (e) => {
   // Updating the global Auth context
   dispatch({ type: "LOGIN", payload: {email: email.current.value} });
 };

 return (...)};

ⴰⴽⴻⵛⵛⵓⵎ ⵏ ⵓⵙⴻⵇⴷⴰⵛ

JWT Local storage

ⴰⵙⴻⵖⵜⵉ ⵏ ⵓⵎⴻⵥⵍⵓ

ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⵡⴰⵍⵉⴹ ⴰⵎⴻⴽ ⴰⵢ ⵢⴻⵜⵜⵡⴰⵃⵔⴻⵣ ⵜⵓⵔⴰ ⵓⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴰⵢ ⴷⵏⴻⵜⵜⴰⴼ ⴷⴻⴼⴼⵉⵔ ⵏ ⵓⵙⴻⴽⵛⴻⵎ ⵙ ⵔⵔⴱⴻⵃ ⴷⴻⴳ localStorage.

Asenqed ⵏ ⵓⵎⵙⴰⵖ ⵉ Ukeccum

ⵜⵓⵔⴰ ⵉⵎⵉ ⵏⴻⵙⵄⴰ ⴰⴹⴰⵔ ⵢⴻⵍⵀⴰⵏ ⵖⴻⴼ ⵓⵙⴻⵔⴻⴷⵓⵛⴻⵔ, ⵏⴻⵣⵎⴻⵔ ⴰⴷ ⵏⴻⵙⵙⴻⵎⵔⴻⵙ ⵓⴳⴰⵔ ⵍⵇⴰⵏⵓⵏⵏⵏⴻⵖ ⵏ ⵜⵓⴽⴽⵙⴰ ⴷ ⵜⵓⴽⴽⵙⴰ ⴷⴻⴳ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏⵏⵙⴻⵏ ⵏ ⵜⵎⴻⵥⴷⵉⵜ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ, ⵙ ⵢⵉⵡⴻⵏ ⵏ ⵓⵙⵉⵡⴻⵍ ⵖⴻⵔ ⵜⵎⴻⵥⴷⵉⵜ ⵏ Login, ⵏⴻⵣⵎⴻⵔ ⴰⴷ ⵏⴻⵙⵙⴻⵎⵔⴻⵙ ⴰⵙⵉⵡⴻⵍ ⵏ API ⵖⴻⵔ ⵓⴱⵔⵉⴷ ⵏ ⵜⵓⴽⴽⵙⴰ, ⴰⴷ ⴷⵏⴰⵡⵉ ⴰⵙⴻⵇⴷⴰⵛ ⴰⵎⴰⵢⵏⵓⵜ . ⵏ ⵜⵖⴻⵍⵍⵉⵙⵜ ⵢⴻⵔⵏⴰ ⵃⵔⴻⵣⵉⵜⴻⵏⵜ ⴷⴻⴳ ⵓⵃⴻⵣⵣⴻⴱ ⴰⴷⵉⴳⴰⵏ, ⵙⵙⵉⵡⴹⴷ ⴰⵙⵉⵡⴻⵍ ⵏ LOGIN ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⴻⵙⵏⴻⴼⵍⵉⴹ ⴰⵃⵔⵉⵛ ⵏ ⵓⵙⴻⵇⴷⴰⵛ, ⴰⴽⴽ ⴷⴻⴳ ⵡⴰⴽⵓⴷ ⴰⵢⴷⴻⴳ ⴰⵔⴰ ⵜⵇⴰⴱⴻⵍⴹ ⴰⵃⴰⵔⴻⴱ ⵖⴻⴼ ⵜⵓⵛⵛⴹⴰ:

./ⵙⵔⵛ/ⵉⵖⴻⵔⵙⵉⵡⴻⵏ/ⴰⵙⴻⵇⴷⴻⵛ ⵏ ⵓⵙⴻⴽⵛⴻⵎ.ⵊⵙⵅ

import { useContext, useState } from "react";
import { Auth } from "../contexts/Auth";

export const useLogin = () => {
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const { dispatch } = useContext(Auth);

  const login = async (email, password) => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch("/api/users/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });

      const json = await response.json();

      if (json.name === "Error") {
        setError(json.message);
        setIsLoading(false);
      }

      if (!response.ok) {
        setIsLoading(false);
        setError(json);
      }

      if (response.ok) {
        // Save the user and token in the localstorage
        localStorage.setItem("user", JSON.stringify(json));

        // Updating the global Auth context
        dispatch({ type: "LOGIN", payload: json });

        setIsLoading(false);
      }
    } catch (error) {
      console.log(error);
    }
  };

  return { error, isLoading, login };
};

ⵜⴰⵎⴰⵡⵜ: ⵉ ⵢⵉⵎⵙⴻⵇⴷⴰⵛⴻⵏ ⵏ React ⵉ ⴷⵢⴻⵙⴼⴰⵢⴷⵉⵏ ⵓⴳⴰⵔ ⴳⴰⵔ ⵢⵉⵎⴻⵖⵔⵉⵢⴻⵏ, ⴰⵀⴰⵜ ⵜⴻⵜⵜⵃⴻⵇⵔⵉⴹ ⴰⵛⵉⵎⵉ ⵓⵔ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ ⴰⵔⴰ ⵜⴰⵖⴰⵡⵙⴰ ⵏ ⵓⵙⴱⴰⴷⵓ ⵏ ⵜⵎⴻⵥⵥⵓⵖⵜ ⵏ ⵓⵙⴻⵔⴻⴷⵓⵛⴻⵔ ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵏⴰⵡⵉ ⵜⵉⵖⴱⵓⵍⴰ ⵏ ⵓⵙⴻⵇⴷⴰⵛ, ⵓⵙⴻⵔⴻⴷⵓⵛⴻⵔ ⵢⴻⵇⴱⴻⵍ ⴰⴼⴻⵔⴷⵉⵙ ⵡⵉⵙ ⴽⵔⴰⴹ ⵏ ⵜⴼⴻⵔⴽⵉⵜ ⵓⵎⵉ ⵇⵇⴰⵔⴻⵏ ⵜⴰⵖⴰⵡⵙⴰ ⵉⵏⵉⵜ, ⵜⴰⵖⴰⵡⵙⴰⴰ ⵜⴻⵜⵜⵡⴰⵙⴻⵇⴷⴰⵛ ⴷⴻⴳ ⵜⴻⴳⵏⵉⵜ . ⵉⵍⴰⵇ ⴰⴷ ⵏⴻⵙⵙⴻⵅⴷⴻⵎ ⴽⵔⴰ ⵏ ⵍⵇⴰⵏⵓⵏ ⵓⵇⴱⴻⵍ ⴰⴷ ⴷⵏⴰⵡⵉ ⴰⵣⴰⵍ ⴰⵎⴻⵣⵡⴰⵔⵓ ⵏ ⵓⵡⴰⵏⴰⴽ, ⵙⵙⴻⴱⴱⴰ ⵓⵔ ⵏⴻⴼⵔⴻⵏ ⴰⵔⴰ ⴰⵢⴰ ⴷ ⵜⴰⵎⵙⴰⵍⵜ ⵏ ⵜⴼⴻⵔⵇⴻⵏⵜ ⵏ ⵡⵓⴳⵓⵔⴻⵏ, ⴰⴽⴰⵔⴰⵎ ⵙ ⵡⴻⴱⵔⵉⴷⴰ ⴷ ⵡⵉⵏ ⵉⵙⴻⵀⵍⴻⵏ ⵉ ⵓⵙⴼⴻⵀⴻⵎ ⵢⴻⵔⵏⴰ ⵙ ⵡⴰⵢⴰ, ⴷ ⴰⵢⴻⵏ ⵉⵙⴻⵀⵍⴻⵏ ⵉ ⵓⵃⴰⵔⴻⴱ . .

ⴰⵙⴻⴱⵜⴻⵔ ⵏ ⵜⵓⴽⴽⵙⴰ

ⴰⵜⴰⵏ ⵡⴰⵎⴻⴽ ⵉ ⵜⵉⴷⵢⴻⵜⵜⵡⴰⵍⵉ ⵓⵃⵔⵉⵛ ⵏ ⵜⴼⴻⵍⵡⵉⵜ ⵏ ⵓⵙⴻⴱⵜⴻⵔⵏⵏⴻⵖ ⵏ Ukeccum ⴷⴻⴼⴼⵉⵔ ⵎⴰ ⵜⴻⵙⵇⴻⴷⵛⴻⴹ ⴰⵖⴻⵔⵙⵉⵡ useLogin() ⴰⴽⴽⴻⵏ ⴰⴷ ⴷⵜⴻⵙⵙⵓⴼⵖⴻⴹ ⵜⴰⵖⵓⵍⵜ ⵏ ⵜⵓⴽⴽⵙⴰ, ⴷ ⵓⵙⵎⴻⴽⵜⵉ ⵏ ⵜⴰⵖⵓⵍⵜ ⵏ ⵜⵓⴽⴽⵙⴰ ⵙ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵖⴻⵍⵍⵉⵙⵜ ⵉ ⴷⵢⴻⵙⵙⵓⵎⴻⵔ ⵓⵙⴻⵇⴷⴰⵛ:

// ... ... //
export default function Login() {
 const { login, isLoading, error } = useLogin();
 console.log("Rendering: Login");
 const email = createRef(null);
 const password = createRef(null);

 const handleLogin = async (e) => {
   await login(email.current.value, password.current.value);
 };
 return (...)
// ... ... //

ⵏⴻⵙⵙⴻⵅⴷⴰⵎ ⴷⴰⵖⴻⵏ ⵜⴰⵖⵓⵍⵜ ⵏ Uceggeɛ ⵎⵉ ⴰⵔⴰ ⴷⵢⴻⵙⵙⵉⵡⴻⴹ ⵓⵙⴻⵇⴷⴰⵛ ⵜⴰⴼⴻⵍⵡⵉⵜ:

<button
  onClick={handleLogin}
  disabled={isLoading}
  className="btn btn-square w-full bg-gray-100 text-gray-600 hover:bg-gray-300 border-none"
>
  {isLoading && "A moment please!"}
  {!isLoading && "Login"}
</button>

ⵓ ⵙ ⵓⵙⵏⵓⵍⴼⵓ ⵏ ⵢⴰⵍ ⵜⵓⵛⵛⴹⵉⵡⵉⵏ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵉ ⴷⵏⴻⵜⵜⴰⴼ ⵙⴻⴳ ⴱⴰⵛⴽⴻⵏⴷⵏⵏⴻⵖ:

{
  error && <span className="text-red-500 p-2">{error.message}</span>;
}

Rendering Errors

ⴰⵃⴰⵔⴻⴱ ⵖⴻⴼ ⵜⴻⴳⵏⵉⵜ ⵏ ⵓⵙⴻⵇⴷⴰⵛ

ⴰⵀⴰⵜ ⵜⴻⵜⵜⵃⴻⵇⵔⵉⴹ ⴰⵛⵉⵎⵉ ⵉ ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵏⴻⵃⵔⴻⵣ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴷⴻⴳ localStorage, ⵙ ⵡⴰⵡⴰⵍ ⵙ ⵜⵖⴰⵡⵍⴰ, ⵏⴻⴱⵖⴰ ⴰⴷ ⵏⴻⵃⵔⴻⵣ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⵜⵜⵡⴰⵙⵎⴻⵍ ⵙⴽⵓⴷ ⵓⵔ ⵢⴻⴼⵙⵉ ⴰⵔⴰ ⵓⵙⵎⴻⵍ. ⴰⵙⴻⵇⴷⴻⵛ ⵏ localStorage ⴷ ⴰⴱⵔⵉⴷ ⵢⴻⵍⵀⴰⵏ ⵉ ⵓⵃⴻⵣⵣⴻⴱ ⵏ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ JSON, ⴰⵎ ⵡⴰⴽⴽⴻⵏ ⵢⴻⵍⵍⴰ ⴷⴻⴳ ⵓⵎⴻⴷⵢⴰⵏⵏⴻⵖ. ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⵡⴰⵍⵉⴹ ⴰⵎⴻⴽ ⴰⵔⴰ ⵢⴻⵜⵜⵡⴰⵙⴼⴻⴹ ⵓⵡⴰⵏⴰⴽ ⵎⴰ ⵢⴻⵍⵍⴰ ⵜⴻⵙⵏⴻⴼⵍⵉⴹ ⴰⵙⴻⴱⵜⴻⵔ ⴷⴻⴼⴼⵉⵔ ⵎⴰ ⵜⴽⴻⵛⵎⴻⴹ. Aya ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⴻⵜⵜⵡⴰⴼⵔⵓ ⵙ ⵜⵖⴰⵡⵍⴰ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵓⵙⴻⴻⴼⴼⴻⵛⵜ hook ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⵥⴻⵔ ⵎⴰ ⵢⴻⵍⵍⴰ ⵏⴻⵙⵄⴰ ⴰⴼⴻⵔⴷⵉⵙ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⵢⴻⵜⵜⵡⴰⵃⴻⵔⵣⴻⵏ ⴷⴻⴳ localStorage, ⵎⴰ ⵢⴻⵍⵍⴰ ⵢⴻⵍⵍⴰ, ⴰⴷ ⵏⴻⴽⵛⴻⵎ ⴰⵙⴻⵇⴷⴰⵛ ⵙ ⵡⵓⴷⴻⵎ ⴰⵡⵓⵔⵎⴰⵏ:

// ... ... //
export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    user: null,
  });

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("user"));

    if (user) {
      return dispatch({ type: "LOGIN", payload: user });
    }
  }, []);

  return (
    <Auth.Provider value={{ ...state, dispatch }}>{children}</Auth.Provider>
  );
};

ⵉⵖⴻⵔⵔⵓⴱⴰ ⵏ ⵓⵎⵙⴻⴹⵔⵓ ⵉ ⵜⵓⴼⴼⵖⴰ

ⴰⵎ ⵡⴰⴽⴽⴻⵏ ⴷⴰⵖⴻⵏ ⵉ ⴷⵢⴻⵍⵍⴰ ⵙ ⵜⵎⴻⵥⴷⵉⵜ ⵏ Logout, ⴷⴰⴳⵉ ⵏⴻⵙⵙⴻⵣⴳ ⵜⵉⴳⴰⵡⵜ ⵏ LOGOUT ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⴻⴽⴽⴻⵙ ⵜⵉⵖⴱⵓⵍⴰ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⵏ ⵜⵓⵔⴰ ⴰⵎⴰ ⵙⴻⴳ ⵓⵡⴰⵏⴰⴽ ⴰⵎⴰ ⵙⴻⴳ ⵓⵃⴻⵣⵣⴻⴱ ⴰⴷⵉⴳⴰⵏ:

./ⵙⵔⵛ/ⵉⵖⴻⵔⵔⵓⴱⴰ/ⴰⵙⴻⵇⴷⴻⵛ ⵏ ⵓⵙⵓⴼⴻⵖ.ⵊⵙⵅ

import { useContext } from "react";
import { Auth } from "../contexts/Auth";

export const useLogout = () => {
  const { dispatch } = useContext(Auth);

  const logout = () => {
    // delete user from the localstorage
    localStorage.removeItem("user");
    // Wipe out the Auth context (user:null) / dipatch 'LOGOUT'
    dispatch({ type: "LOGOUT" });
  };

  return { logout };
};

ⵜⵓⴼⴼⵖⴰ ⵏ ⵓⵙⴻⵇⴷⴰⵛ

ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⴻⵙⵙⵓⴼⵖⴻⴹ ⴰⵙⴻⵇⴷⴰⵛ, ⴰⴷ ⵏⴻⵔⵏⵓ ⵜⴰⴷⵢⴰⵏⵜ ⵏ ⵜⵎⴻⵥⵥⵓⵖⵜ ⵉ ⵜⵎⴻⵥⵥⵓⵖⵜ ⵏ ⵓⵙⴻⴽⵛⴻⵎ ⵉ ⴷⵢⴻⵜⵜⵡⴰⴼⴽⴰⵏ ⴷⴻⴳ UserDropdown.ⵊⵙⵅ, ⴰⴷ ⵜⵜⵏⴻⴼⵔⵓ ⴰⴽⴽⴻⵏ ⵉⵍⴰⵇ:

./ⵙⵔⵛ/ⵉⴼⴻⵔⴷⵉⵙⴻⵏ/Aseqdac.ⵊⵙⵅ

// Extracting the logout function from useLogout() and handling the click event listener //
export default function UserDropdown() {
 const { user } = useContext(Auth);
 const { logout } = useLogout();
 console.log("Rendering: UserDropdown");

 const handleLogout = () => {
   logout();
 };
// ... ... //

// Adding a click event listener to logout button //
<li>
   <button onClick={handleLogout}>Logout</button>
</li>
// ... ... //

User Logout

ⴰⵃⴰⵔⴻⴱ ⵖⴻⴼ ⵉⴱⴻⵔⴷⴰⵏ ⵏ React

ⴰⵃⵔⵉⵛ ⴰⵏⴻⴳⴳⴰⵔⵓ ⴷⴻⴳ ⵓⵙⴻⴹⵔⵓ ⵏ ⵓⵙⴻⵇⴷⴻⵛⵏⵏⴻⵖ ⴷ ⴰⵙⵙⴻⵇⴷⴻⵛ ⵏ ⵜⴻⴳⵏⵉⵜ ⵏ ⵓⵙⴻⵇⴷⴰⵛ ⴰⵎⴰⴹⵍⴰⵏ ⴰⴽⴽⴻⵏ ⴰⴷ ⵏⵃⴰⵔⴻⴱ ⵖⴻⴼ ⵓⵙⴻⵍⴽⴻⵎ ⵏ ⵓⵙⴻⵇⴷⴰⵛ, ⴷ ⴰⵙⵎⴻⴽⵜⵉ ⵙ ⵜⵖⴰⵡⵍⴰ ⵖⴻⴼ ⵡⴰⵛⵓ ⵏ ⵜⵉⴽⵍⵉ ⵢⴻⵙⵙⴻⴼⴽ ⴰⴷ ⵜⵜⵏⴻⵙⵙⵉⵡⴻⴹ : ⴷⴻⴳ ⵜⴰⵣⵡⴰⵔⴰ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⵜⵜⵡⴰⵙⴻⵍⵍⴻⵎ ⵙ ⵓⵙⴻⴱⵜⴻⵔ ⵏ ⵜⵓⴽⴽⵙⴰ, ⵙⴻⴳ ⵜⵖⴰⵡⵙⴰⵏⵏⵉ ⴰⵙⴻⵇⴷⴰⵛ ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⴰⵡⴻⴹ ⴽⴰⵏ ⵖⴻⵔ ⵓⵙⴻⴱⵜⴻⵔ ⵏ ⵓⵅⵅⴰⵎ . ⴷⴻⴼⴼⵉⵔ ⵏ ⵜⵓⴽⴽⵙⴰ ⵙ ⵔⵔⴱⴻⵃ, ⴰⴽⴽⴻⵏ ⴷⴰⵖⴻⵏ ⴰⵙⴻⵇⴷⴰⵛ ⴰⴷ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⴼⵍⵉ ⵙ ⴰⵙⴻⴱⵜⴻⵔ ⵏ ⵜⵓⴽⴽⵙⴰ ⵎⵉ ⴰⵔⴰ ⴷⵢⴻⴼⴼⴻⵖ.

ⵏⴻⵙⵙⴰⵡⴻⴹ ⵖⴻⵔ ⵡⴰⵢⴰ ⵙ ⵜⴰⵍⵍⴻⵍⵜ ⵏ ⵜⴻⵎⴽⴰⵔⴹⵉⵜ ⵏ reactrouterdom ⵙ ⵓⵙⴻⴱⴷⴻⴷ ⵏ 2 ⵏ ⵢⵉⴱⴻⵔⴷⴰⵏ: "/" ⴷ "/login", ⵏⴻⵜⵜⴹⴰⴼⴰⵔ ⴰⵏⵡⴰ ⴰⴼⴻⵔⴷⵉⵙ ⴰⵔⴰ ⴷⵏⴻⴼⴽ ⴷⴻⴳ ⵢⴰⵍ ⴰⴱⵔⵉⴷ ⵙ ⵓⵙⴻⵇⴷⴻⵛ ⵏ ⵜⴻⴳⵏⵉⵜ ⵏ ⵓⵓⵜⵀ ⴰⵎⴰⴹⵍⴰⵏ ., ⴰⵓⵜⵀ ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵏ ⵖⴻⵔ ⵏⵓⵍⵍ ⵢⴻⵜⵜⴳⴻⵏⵙⵉⵙⴷ ⴰⵙⴻⵇⴷⴰⵛ ⵓⵔ ⵢⴻⵜⵜⵡⴰⵙⵏⴻⴼⵍⴻⵏ ⴰⵔⴰ ⴷ viceversa:

./ⵙⵔⵛ/ⴰⵙⵏⴰⵙ.ⵊⵙⵅ

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Login from "./pages/Login";
import { useContext } from "react";
import { Auth } from "./contexts/Auth";

function App() {
  const { user } = useContext(Auth);
  return (
    <BrowserRouter>
      <div className="h-screen">
        <Navbar />
        <main className="px-4">
          <Routes>
            <Route
              path="/"
              element={user ? <Home /> : <Navigate to="/login" />}
            />
            <Route
              path="/login"
              element={!user ? <Login /> : <Navigate to="/" />}
            />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;

ⴰⴹⵔⵉⵙ ⵏ ⵓⵙⵎⴻⴽⵜⵉ

Diagram

ⴰⵙⴻⵎⵔⴻⵙ

ⴷⴻⴳ ⵓⵎⴰⴳⵔⴰⴷⴰ ⵏⴻⵄⵔⴻⴹ ⴰⴷ ⵏⵇⴻⴱⵍⴻⴹ ⵜⴰⵍⵓⴼⵜ ⵏ ⵓⵙⴻⵇⴷⴻⵛ ⴰⴼⵔⴰⵔⴰⵢ ⵎⴰⵛⴰ ⵢⴻⵜⵜⵡⴰⵙⵙⵏⴻⵏ ⴰⵟⴰⵙ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵏ ⵜⴻⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⵉ ⵢⵉⵡⴻⵏ ⵏ ⵓⵅⴻⴷⴷⵉⵎ ⵏ ⵓⵙⵏⴻⴼⵍⵉ, ⵙ ⵜⵎⵓⵖⵍⵉⵡⵉⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ, ⵙ ⵙⵙⴻⴱⴱⴰ ⵏ ⵢⴰⵍ ⵢⵉⵡⴻⵜ ⴷ ⵜⵎⵓⵖⵍⵉⵡⵉⵏⵏⵙⴻⵏⵜ. ⵜⴰⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⴷⴻⴳ ⵢⵉⴼⴻⵔⴷⵉⵙⴻⵏ ⵏ ⵜⴰⵎⴰ ⵏ ⵓⵎⴽⵍⵉ ⴰⴽⴽⴻⴷ ⴷⴻⴳ React ⵍⴰⴷⵖⴰ ⴷ ⵢⵉⵡⴻⵏ ⵙⴻⴳ ⵢⵉⵙⴻⵏⵜⴰⵍ ⵉⵖⴻⴼ ⵜⵜⵎⴻⵙⵍⴰⵢⴻⵏ ⴰⵟⴰⵙ ⴷⴻⴳ ⵜⵎⴻⵜⵜⵉ ⵏ frontend, ⵉⵎⵉ ⴽⴰⵏ ⵢⴻⵣⵎⴻⵔ ⴰⴷ ⵢⴻⵅⴷⴻⵎ ⵏⴻⵖ ⴰⴷ ⵢⴻⵔⵥⴻⵎ ⴰⵅⴻⴷⴷⵉⵎ ⴷ ⵓⵙⵏⴻⵔⵏⵉ ⵏ ⵓⵙⴻⵇⴷⴻⵛⵉⴽ. ⴰⵎⴹⴰⵏ ⴰⵎⴻⵇⵔⴰⵏ ⵏ ⵜⴻⵙⵏⴰⵜⵡⵉⵍⵉⵏ, ⵏ ⵜⵎⵓⵖⵍⵉⵡⵉⵏ, ⵏ ⵜⴻⵎⴽⴰⵔⴹⵉⵢⵉⵏ ⴷ ⵡⴰⵍⵍⴰⵍⴻⵏ ⵢⴻⵎⴳⴰⵔⴰⴷⴻⵏ ⴰⵢ ⵢⴻⵜⵜⵄⴻⵔⵔⵉⴹⴻⵏ ⴰⴷ ⴼⵔⵓⵏ ⵜⴰⵎⵙⴰⵍⵜⴰ ⵏ ⵜⴻⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ (ⴷⴷⵓⵍⴰ) ⴷ ⴰⵢⴻⵏ ⴰⵢ ⴷⵢⴻⵙⵏⴻⴽⵔⴻⵏ ⴰⵟⴰⵙ, ⵉⵙⵡⵉⵏⵏⴻⵖ ⵢⴻⵍⵍⴰⴷ ⴷ ⴰⴽⴽⴻⵏ ⴰⴷ ⴰⴽⴷ-ⵏⴻⴼⴽ ⵜⵉⴼⵔⴰⵜ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵙ ⵜⵖⴰⵡⵍⴰ ⴰⴽⴽⴻⵏ ⴰⴷ ⵜⵜⴻⵙⵙⴻⴼⵔⴻⴽⴹ ⴷⴻⴳ ⵓⵙⴻⵇⴷⴻⵛⵏⵏⴻⴽ, ⵉ ⵍⵎⴻⵏⴷ ⵏ ⵓⵙⵏⴻⵔⵏⵉ ⵓⴳⴰⵔ . ⵜⴻⴽⵏⵉⵡⵉⵏ ⴷ ⵜⵎⵓⵖⵍⵉⵡⵉⵏ ⵏ ⵜⴻⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⴷⴻⴳ ⵢⵉⵙⴻⵏⴼⴰⵔⴻⵏ ⵉⵅⵓⵚⵚⴻⵏ ⵓⴳⴰⵔ, ⵥⴻⵔ ⴰⵎⴰⴳⵔⴰⴷⵏⵏⴻⵖ ⵉ ⴷⵉⵜⴻⴷⴷⵓⵏ ⴰⵏⴷⴰ ⴰⵔⴰ ⵏⴻⴽⵛⴻⵎ ⴷⴻⴳ ⵔⴻⴷⵓⵅ ⵉ ⵜⴻⴷⴱⴻⵍⵜ ⵏ ⵓⵡⴰⵏⴰⴽ ⵙ ⵜⵖⴰⵔⴰ ⴷⴻⴳ React.

ⵇⵕⵉⴱ ⴰⴷ ⴷⵯⵢⴰⵡⴻⴹ

ⴰⴹⵔⵉⵙ ⵏ API ⵎⴳⴰⵍ ⵜⴰⵖⴻⵔⵖⴻⵔⵜ ⵏ ⵡⴰⵍⵍⴰⵍⴻⵏ ⵏ ⵔⴻⴷⵓⵅ

ⵔⴻⴷⵓⵅ ⵢⴻⵙⵄⴰ ⴰⵟⴰⵙ ⵏ ⵢⵉⵙⴻⴳⴳⴰⵙⴻⵏ ⵏ ⵓⵙⵇⴻⵔⴷⴻⵛ ⴷⴻⴳ ⵜⵎⴻⵜⵜⵉ ⵓⵇⴱⴻⵍ ⵜⵎⴻⵥⴷⵉⵜ ⵏ ⵡⴰⵍⵍⴰⵍⴻⵏ ⵏ Redux, ⴷⴻⴳ ⵜⵉⴷⴻⵜ, RTK ⵢⴻⵜⵜⵡⴰⵙⵇⴻⴷⵛⴻⵎ ⴷ ⴰⴹⵔⵉⵙ ⵏ ⵓⵙⴱⴰⴷⵓ ⵉ ⵓⵙⴱⴰⴷⵓ ⵏ ⵜⵎⴻⵀⵍⴰ ⵏ ⵓⵡⴰⵏⴰⴽ ⵏ ⵔⴻⴷⵓⵅ ⴷⴻⴳ ⵢⵉⵙⴻⵏⴼⴰⵔⴻⵏ ⵉⵎⴰⵢⵏⵓⵜⴻⵏ (ⵉⵙⴻⵎⵉⵙ ⴰⵎⴻⵣⵡⴰⵔⵓ ⴷ “reduxstarterkit” ⴷⴻⴳ Tuber 2019), ⵖⴰⵙ ⴰⴽⴽⴻⵏ . ⴰⵙⵙⴰ, ⵢⴻⵍⵍⴰ ⵓⵎⵙⴻⴼⵀⴰⵎ ⴰⵎⴰⵜⵓ ⴳⴰⵔ ⵢⵉⵎⴹⴻⴱⴱⵔⴻⵏ ⵏ Redux ⴷ ⵜⵎⴻⵜⵜⵉ ⴱⴻⵍⵍⵉ Redux toolkit ⴷ ⴰⴱⵔⵉⴷ ⵉⵡⵓⵍⵎⴻⵏ ⵉ ⵓⵅⴻⴷⴷⵉⵎ ⵙ ⵔⴻⴷⵓⵅ.RTX ⵢⴻⵜⵜⵃⴻⵜⵜⵉⵎ ⴰⵟⴰⵙ ⵏ ⵍⵇⴰⵏⵓⵏ ⵏ Redux ⵉ ⵢⴻⵙⵙⴻⴼⵙⴰⵢⴻⵏ ⴰⵙⴻⵇⴷⴻⵛ, ⵙ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵏ ⵜⵖⴰⵡⵙⵉⵡⵉⵏ ⵙ ⵡⴰⵟⴰⵙ, ⵢⴻⵔⵏⴰ ⵢⴻⵙⵙⴻⴼⵔⴰⵢ ⵉⵎⵙⵓⴷⴷⵙⴻⵏ ⴰⴷ . ⴹⴻⴼⵔⴻⵏ ⵜⵉⴳⵏⴰⵜⵉⵏ ⵢⴻⵍⵀⴰⵏ, ⵢⵉⵡⴻⵏ ⵏ ⵓⵎⴳⵉⵔⴻⴷ ⴰⴳⴻⵊⴷⴰⵏ ⴳⴰⵔ ⵙⵉⵏⴰ ⴷ ⴰⴽⴽⴻⵏ Redux ⵢⴻⵜⵜⵡⴰⴱⵏⴰ ⴰⴽⴽⴻⵏ ⵓⵔ ⵢⴻⵙⵄⵉ ⴰⵔⴰ ⵔⵔⴰⵢ, ⵢⴻⵜⵜⴰⴽⴷ API ⵜⴰⵎⴻⵥⵢⴰⵏⵜ ⵢⴻⵔⵏⴰ ⵢⴻⵜⵜⵔⴰⴵⵓ ⵉⵎⵙⵓⴷⴷⵙⴻⵏ ⴰⴷ ⵅⴻⴷⵎⴻⵏ ⴰⵎⵓⵔ ⴰⵎⴻⵇⵔⴰⵏ ⵙⴻⴳ ⵓⵙⵏⴻⵔⵏⵉ ⴰⵥⵉⴹⴰⵏ ⵙ ⵜⵉⵔⴰ ⵏ ⵜⴻⵎⴽⴰⵔⴹⵉⵢⵉⵏⵏⵙⴻⵏ ⵉ ⵍⴻⵛⵖⴰⵍ ⵓⵛⵔⵉⴽⴻⵏ ⴷ ⵓⵇⴻⴷⴷⵉⵛ ⵏ ⵜⴳⴻⵎⵎⵉ ⵏ ⵓⴹⵔⵉⵙ, ⴰⵢⴰ ⵢⴻⵙⵙⴰⵡⴻⴹ ⵖⴻⵔ ⵡⴰⴽⵓⴷ ⵏ ⵓⵙⵏⴻⴼⵍⵉ ⵙ ⵜⵖⴰⵡⵍⴰ ⴷ ⵍⵇⴰⵏⵓⵏ ⵉⵅⵓⵚⵚⴻⵏ, Redux toolkit ⵢⴻⵔⵏⴰⴷ ⴷ ⵜⴰⵙⴼⵉⴼⵜ ⵏ ⵓⵙⵏⴻⵔⵏⵉ ⵏ ⵜⵎⵓⵖⵍⵉ (abstraction) ⴰⵢ ⵢⴻⵜⵜⴰⴵⴵⴰⵏ ⵉⵎⵙⴻⵏⴼⴰⵔⴻⵏ ⴰⴷ ⵖⵍⵉⵏ ⴷⴻⴳ ⵜⵖⴰⵡⵙⵉⵡⵉⵏⵏⵏⴻⵙ ⵜⵉⵎⴻⵇⵔⴰⵏⵉⵏ, ⵥⴻⵔ ⴰⴹⵔⵉⵙ ⵓⵏⵚⵉⴱ ⵉ ⵓⴳⴰⵔ ⵏ ⵜⵎⵓⵖⵍⵉⵡⵉⵏ ⴷ ⵜⵎⵓⵖⵍⵉⵡⵉⵏ ⵙⴻⴳ ⵡⵉⴷ ⴰⵢ ⵜⵉⵃⴻⵔⵣⴻⵏ ⴷⴰⴳⵉ.


Career Services background pattern

ⵉⵎⴻⵥⵍⴰ ⵏ ⵜⵎⵓⵙⵏⵉ

Contact Section background image

ⴰⴷ ⵏⴻⵇⵇⵉⵎ ⴷⴻⴳ ⵓⵙⵉⵡⴰⴹ

Code Labs Academy © 2025 ⵉⵣⴻⵔⴼⴰⵏ ⴰⴽⴽ ⵜⵜⵡⴰⵃⴻⵔⵣⴻⵏ.