Context was came after React version 16.3. In react, data is passed top-down (Parent to child) via props. When you want to pass data from Layout to one component where inside a few layer. You have to need pass props to every layer componentes. Context is primarily used when some data needs to be accessible by many components at different nesting levels. In this expamle, Demonstrates how to use context in authenticate.
You can learn more information about context in here
If you want to clone your local environment. You can use below command
git clone https://github.com/mbozkaya/react-authentication-with-context-api.gitYou can click here to look at the live preview.
In this example, You able to use these features which login, signup and logout. Also I want to say, I've done login and signup requests use client side. If you want to look at this you can clik here
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Context özelliği React'ın 16.3 versiyonundan sonra gelmiştir. Bu özellik sayesinde artık componentler arası state paylaşımı basit hale gelmiştir. React'ta bilindiği üzere componentler arası veri paylaşımı yukarıdan aşağıya yani parenttan child'a doğrudur ve aksi yönde veri paylaşmak için farklı yöntemler kullanılmaktadır. Ayrıca veriyi paylaşmak için en üst componentten hedef component'e kadar her component veriyi içeri aktarmak zorundadır. Context özelliğiyle birlikte bu zorunluluk ortadan kalkmış ve Oluşturulan bir context, useContext metoduyla her yerden erişilebilir hale gelmiştir. Bu sayede veri paylaşımı basit hale gelmiştir. Bu örnekte Context yaklaşımıyla authentication yapılandırmasını göreceksiniz.
Context hakkında daha fazla bilgi almak için burayı ziyaret edebilirsiniz.
Buraya tıklayarak canlı örneğe göz atabilirsiniz.
Basit bir şekilde web sitesine giriş yapma, çıkış yapma ve kaydolma özelliklerini kullanabilirsiniz. Tamamıyla client tarafında çalışan bir örnek olduğu için ön tarafta sahte bir api requesti kullanmaktadır. Sahte apiyi incelemek için buraya tıklayabilirsiniz.
Bir düzeltme yada geliştirme yapmak için rahatlıkla çekme isteği(PR yada MR) oluşturabilirsiniz.