Make the admin dashboard in the right way - reactjs

I use Yii2, ReactJS and Redux in my project. So, client side is good and beautiful, but current admin panel is the most ugly thing in the world (legacy). My goal is create new one.
How can I make admin dashboard using my stack?
My needs:
Modular structure
Individual structure of the state of each module
Write frontend fully on React and make it interactive (React Router?)
Not only CRUD. Some sections may be only informative, with some buttons and checkboxes. Or reports. Or for other purposes. (dont think that REST is only one thing that I need)
Don't wanna store all of DB records in the global redux state. But wanna load all records and other information by need (Depending on the page, sections, current state etc). And it should automatically clean off the state once I change page.
Maybe there's something else that I don't know yet..)
I need advice from professionals. Maybe articles or good libraries that can help me. I'll be very grateful.
P.S.This question is all about how to connect backend and frontend and keep state clean. Not about UX or UI
P.P.S. Sorry for my "Russian" English. Hope you'll understand me :)

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)

Handling a lot of screens in react native

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.

Question on react and express website and updating them

I have been trying to figure out how to learn making a website.
Does all blog or a any news website have to be a cms. Then wouldn't all pages be the same. If not how does one update their website when adding new posts. Can I do it only from database?
It seems if its made only on html and css updating it would involve adding new new html page every time?
For example this website, how do they add new articles?
Would you recommend making a blog on react?
Thanks very much?
Does all blog or a any news website have to be a cms.
I will say, yes and no,
You can dynamically add new html page whenever you have new posts, or blog, then you create a new route for each request. It works fine,(and a lot simpler, and less worry about other stuff, learn from there and then you get a taste of how it works, I will always suggest you to go with something easier, start really small, since you are starting to learn) until you have to post a lot of post, which will be troublesome to update the server code each time.
Where you have to do as follow: Update codebase (new route: /get/my-new-blog-123), then deploy your server code whenever you have a new post to the cloud server, eg: google cloud platform, heroku, etc. Which is a lot of work.
Till then, which comes to what you have mentioned, Content Management System, where most blog post is structure properly, such as how to insert a picture, text style, typography, etc. Then this html structure will store in database, the route will likely be /get-post/?article-name
article-name will be something u can query from database, then your life will be a lot easier with this.
Would you recommend making a blog on react?
Yes, definitely, It is easy to learn, but try not to overwhelm yourself with so many tools, such as formik(form submission), redux(state management), whenever you learn something from a blog, most time you will see this. Which will be quite overwhelming, when you are learning so many stuff at once. Especially, if you are really new to HTML, CSS and javascript.
Start small, learn fast, then grow. All the best to you.
It’s like when you fill out a form
When you press send or save
It’ll go into the backend which means it’s in the database
And from the back end it’ll render to the front which is the website
I can try to elaborate it more if you want.
And you can make a blog using any framework you are comfortable with
Or you can just use plain ol HTML Css and JavaScript.
I think it’s best to start at this before moving to a framework

Structure React events on global config

We are working on a new React application but I am a bit struggling on how to handle all these events. One of the requirements I have is that I need to be able to realtime update the application configuration.
I read this article which pushed me to some directions but I am still now 100% convinced: http://andrewhfarmer.com/component-communication/
For example:
I have a LoginForm component which, as it says, handles the login form. There are 2 configurable settings on this form:
Where is the endpoint for the webservice
Where should i redirect to once the login is ok
The question now is how should I structure that with the configuration. The configuration itself will be a JSON file hosted somewhere on the local filesystem and will be read every 5 minutes for example to check for changes. I can of course create a global eventemitter but is this really the way forward?
Other way around, do i need to keep passing all these small events down the pipe?
Hope that somebody can help me with some insights and maybe some good examples where it is handled in a proper way
Thanks alot

Backbone - how to maintain state in my case

I've read a lot of threads here but can't find a real answer.
I'm building a desktop app that first loads a lot of json records (let's call them "cards"). Then the user can filter them down with by using many checkboxes, so he can "sum/substract" options (read: query vars).
I'm also trying to use routes.
So, I can have for example (and I don't really know if I'm doing it the right way):
app.com/#/cards/?near_address=London
app.com/#/cards/?near_address=London&cat=concerts
app.com/#/cards/?near_address=London&cat=concerts&day=8
app.com/#/cards/?near_address=London&radius=10000
[...]
Basically, every time the user change filters, I should add/remove query vars.
I could do it in many ways, for examble using some simple "state" json object, but I'm not sure it would be a good practice, mostly because I'm not really sure if I can instead do it maybe only by using routes (I'm quite new to the routes concept).
Is there any "good practice" in doing this kind of things with backbone?
thank you
Using routes to store state is actually a very good idea. That's what routes are there for, to store state, but it's up to you how granular you would want to go with them. some developers choose to go route per page and some choose to get more granular like your example and that's perfectly fine too. You just have to be careful not to go overboard and make your URLs too long and cryptic.
Using routes to store states gives your a few really important benefits:
Your pages will be refreshable. There is nothing more annoying than refreshing a page and losing all your progress and be take back to the start page of the app.
Your URIs are sharable. I could create a filter see the result and send the uri to anyone and they would see the same page as I was.
They make your life easier as a dev. which goes back to your pages being refreshable, they allow you to change your styles or scripts files and refresh the page and see the updated page without having to navigate through your app to get back to the same view over and over again.

Resources