Just starting out with React. Built a very simple app. Now I’d like to add an admin template but have no clue how to implement it. To start I’ll just be downloading a free template.
My question is how do I integrate the template with my app? The info I’m finding points mainly to building a template, not integration. If I download one what do I do? Do I merge the files with my app? Will they be accessed by a diff route? Or do I have the template as it’s own app and it communicates with the first?
I don’t have much experience with react yet. If you know of something I should focus my attention on first that would help me solve this problem please feel free to make recommendations.
Need a lot more context here. Do you mean you’ve downloaded an HTML/CSS template, or a prebuilt React template (I didn’t really realise these existed, so now sure how that would work)? If it is the latter, what do the instructions say? Admin is generally extremely specific to how an application works, and React is designed for building UIs from data (which is why the info you’re finding mainly relates to building stuff) – so how does your app work? What do you mean by merge the files, what are those files?
Normally it would be user authenticates -> authorises as admin -> allow access to admin area on some route (so in a react app, use a router) -> UI in admin area aloows changes to public facing and/or backend resources in some way
It is the latter. It’s a template for the admin side of a website/react app. My app currently reads from reddit and displays results. The admin dashboard is where I imagine I’d would give access to the owner so they can make their changes easily.
Here is an example of one. It has install instructions. I can get it installed but don’t know enough to get my react app connectedaand controlled by the admin dashboard.
Would I start with the admin dashboard? Then build everything off of that? If so how do people move from an app with no admin dashboard to one with?
Imo I would dump that and build something simpler from scratch, look for tutorials on adding an admin area. This app is complicated with basically no documentation whatsoever on how to use it. You’re supposed to grab all the code, then build on top of it, but there’s close to zero information on how to do that. The best I can come up with re how to use it is this:
I realise this isn’t a super helpful answer, I’ll see if I can dig around and find something that might be helpful
Are you looking to connect a content management system to your app? If you’re planning on authenticating users, it sounds like you’re going to want to store user info in a database or in a flat file. If you’re thinking about flat files, I’ve got a video tutorial on how to use Netlify CMS with an existing react app.
@DanCouper@willjw3
After reading your responses and doing some more research I’ve got a better idea of what I need to do. What I explained in the beginning isn’t very clear.
I will have some data processed in the background (a python app that is storing info on a DB). I would like to display this data using React. The back end will have some controls I’d like to be able to adjust from the React front end.
What I called an “admin template” may be incorrect. I saw these displaying different stats and with controls for sites so I thought it was what I needed.
Do you have any suggestions on how to structure this? Is it difficult to pull data from python to react and to have inputs form the UI back to the python program?
Not difficult at all if you can make an API on your Python backend that pulls data from your DB and gives it in a readable format; JSON would be good. Then, call that API from your React frontend.
I found cubeJS. It is a template for a dashboard. It reads directly from your db and displays info on charts.
Your suggestion of creating a API that delivers JSON, is that the ‘work’ that a dashboard template would be doing for you? (aside from the data visualization components).
If I were to create my own API, what do you suggest for data visualization? If I want to display the info on a graph. Are there common tools for this?
being new to this I can sometimes confuse things further by not knowing the correct terms. Am I using the right terms (data visualization, dashboard template).
It’s better to take a look at what an API is at a fundamental level.
You could use a library that allows you to plug in data and generates charts for you. Some recommendations can be found here:
If you’re looking to create your own custom visualizations, D3.js is great. In fact, it’s what some of the most popular charting libraries are built with. There’s a significant learning curve with D3, though.
No worries on that front, I get confused about terms all the time.