Handling a lot of screens in react native - reactjs

I'm building a online learning platform with react native, and i have a problem.
The learning platform i am going to build has over 200 video's, how am i going to manage that? do i need to make 200 screens and navigate to them or are there reusable screens were i can send props to?
There is also a user authentication in the app with different levels of permission, some lessons are locked for some users and some are free to watch.
i already tried to make a few screens but i think there is a better way.

Of course there is a better way. You can make a screen that is free to use without authentication and another one that requires authentication to be used.
After that you can send the array of videos with different id in them, by using the id's in the url.
Being a beginner may be it's becoming difficult for you to understand, so I will recommend you to watch some online tutorial from YouTube where the instructor is sending products to different screens of an e-commerce store.
You will definitely get the idea on how to implement your system from there.

Related

How does it work when there are multiple users accessing a React web app?

I am learning React.js and new to web programming. All along when doing my own projects it's only for my own use, and hosted on localhost:3000. (i.e. one user).
I have a question about multiple users which I don't know if it's specific to React or just general web programming, but I can't seem to find it online, as perhaps it's too basic? And sorry if it's a very basic question. I will have to make an app for internal use for a team of less than 10 people soon, and it will be hosted on a local server accessible by this team.
Would the code be any different in terms of how I write this app? (say, it's just a todo list where users are able to add and remove items)
Specifically, how do states work when there are more than one user? Are they stored on the user's local device?
If one user clicks a button and sets some state from true to false for example, does it re-render for the other users too? Or do all users get their own instance of the app?
I would also appreciate it if you would know what kind of resources I should look at for this question, as I would like to read more in-depth about it.
well, all the apps run on each user own machine independently. State, actions and all other(whole app) are happening only one user own machine. So there is no interaction if I may say so out of the box between different machines(users). You may achieve that with help of some sockets connections( for example instant chat)

Changes in real time with react, express, node mongodb/postgress

in the last few months i've done some MERN projects, and i found something that really bothered me, not because i didn't know what was that thing, but because it's something i've never heard about.
What i'm trying to say, is that, every project i did, i can not see the changes in real time, for example, i did a facebook clone, where you register and post stuff, and you can see how things change in your pc, changes in real tme in your pc, but, if i try to see those changes from another pc, i can't i have to update the page with f5 to see those results
what do i have to learn to make my big apps, like the facebook clone, to make everything in real time, like facebook, whatsapp, instagram, twitter do ?
I am not sure what Facebook, Whatsapp, Instagram, etc. use but as far as real time updates is concerned, you need to learn Websockets or Socket.io. You can also opt for services like Firebase that offer services that provide real time updates. Twilio is also another one that offers such services. But if you want to build it on your own, then you need Websockets.
I am not sure about Facebook but Whatsapp and any other messenger or chat services probably use sockets under the hood.
Look at this list of open source clones and some of the projects use the MERN stack along with socket.io just in case it helps: https://gourav.io/clone-wars . I looked through that list and found this one that may be helpful: https://github.com/Sandermoen/instaclone
I am personally taking a course on Udemy by Robert Bunch that is completely on socket.io.

How to implement real-time comment system in a django-react app with channel/celery/redis etc..?

I have a web-app with Django backend and react frontend where inside an organization or company, there are multiple users. Now, I am trying to implement real-time commenting system where if one user types any comment and posts it, another user will be able to see it without refreshing the page.
I have seen some examples of asynchronous tasks using celery with redis but couldn't find any with react implementation.
What would be a good approach towards achieving the real-time comment system in the react/django app?
Here is an example of simple tasks with celery, redis and WebSockets (Django Channels) and frontend in React (and docker for deployment). The task state and progress are updated over WebSockets https://github.com/pplonski/simple-tasks
The other option will be long-polling, the user will not need to refresh the page, but React will make requests every few seconds to get new data (simple and solid approach). I've seen this approach in many (many) applications. A few years ago I will be afraid of such implementation (too many requests). But now, I will select this approach because of its simplicity.
There's also CollabKit which provide a React commenting system. https://collabkit.dev

Can we use Gatsby js to build a simple social networking website

I need to develop a simple social networking website which will just act as a platform for different businesses to discover each other. Each Business man/Service provider will have his own profile that he can manage and these profiles will be characterised and sorted according to their types. Basically I would need a Home Page, Profile page for each profile, Search page along with registration and login. I don't need to make any messaging module.
So for this purpose I wanted to know if using Gatsbyjs is a good idea, also if not then what are the other frameworks that I can use for a easier and faster development.
One main problem with gatsby for this use case is: Once a new business signs in and wants to create and edit a new profile, this new profile is not part of the build process. Gatsby builds only the HTML pages you know in advance. Triggering a rebuild, which may take several minutes, everytime a business edits their page is not feasible. You would have to hack something together with client-side routes which is not the intended nor recommended way of doing things.
A server-side framework like Next.js is better suited for this task. This way you can dynamically add and change the profile pages.

Recommended pattern to fetch data from API's in React

We are writing dash board app in React that requires us to fetch data from remote API's asynchronously. Until data s fetched, dashboard widgets need to show a hour glass or something similar. Using hooks, using Redux/Saga, using a local data access service are some of the approaches we considered. We are mostly biased towards using Redux/Saga for this but want to check if there are any standard/recommended patterns used by react community.
Recent days I've seen these two libraries circling around community posts, haven't tried them myself, but maybe will be useful to your project:
https://github.com/zeit/swr
https://github.com/tannerlinsley/react-query

Resources