As I learned more about website design and React, I wanted to move away from using the bootstrap library to create responsive websites. But I was wondering what are the other great alternative ways to have a responsive websites- not only in changing the layout but also the type of components being rendered.
Let's say for a weather website, I would like to display a full graphics components with weather details (which includes graphical images with data) in desktop while in mobile version I would like to simply display the relevant data to pass the information in the possible given space. What's the best method to be undertaken in react?
react-router offers a Responsive Routing feature and their docs are very straightforward. I have yet to use this myself but want to on my next project.
react-training
Related
I know this might be far-fetched to ask, but does anyone know how to design a list like the one on spotify's desktop app that displays the songs in a playlist when you select a playlist. In my project, I am getting my playlist data from spotify's api and want to display the data in a browser using react native. I am not used to using react native on the web and its a little challenging than using plain react
This is how I would like it to look.
As you can see it has a header and what looks like a list item that gets highlighted when the mouse pointer is hovered over it.
This is another example, but it doesn't have a header
I have tried to create the design, but I have terrible design skills. Btw these are all figma sketches
Try material-UI. They have an amazing table component. Also, there's a ready-made component for all sorts of tables that has a bunch of cool functionalities: https://material-table.com/. After you get the functionality down then you can work on the design by using their JSS modules which is the best out there honestly.
I am currently storing an object containing many React components and would like to display them all in some sort of gallery format.
I tried rendering the component directly in the gallery itself, but it was too slow and caused too many DOM issues.
Similar to how Google Drive displays a preview of each doc, what is the best and fastest way to generate a visual snapshot of each component in React?
You can check Storybook, it's an open-source tool for developing UI components in isolation for React and other libraries and there is a lot of useful add ons which will help you during work process.
I have tried this for myself you can check it here react-ui
If you want to have some page with a list of all components, you can create one story where you can show a list of all stories which you have in your project.
I'm new to React.
In React, we use navigation with a library like... 'react-router-dom' to navigate to pages. My question is most of the time, I can show and hide the entire Component based on the item selected in a navigation bar. I can store a value in the state and if the selection changes, I can show another component. Then why should we use a navigation library to navigate around?
I can not find any clear information about this online. Please help.
I was writing in this answer about having a more organized code (easier to maintenance) and a better folder structure, but you could easily have it working without a navigation library.
Probably the main point to use a navigation library is, as said in React Router page, whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native.
Web
The library will help you work with the URL, receive parameters, navigate between pages.
Mobile
You can make use of deep linking, receive parameters, navigate between screens, animations, components ready for Stack navigation, Drawer navigation, Bottom Tab navigation...
You can do anything I mentioned above by yourself, but libraries exist because other people had a need and you decide to use it if you have the same need and think it's worth it.
Why should we use a navigation library to navigate around?
In short, because they are widely used, well-tested libraries, with a performance that you may not be able to achieve easily if you want to have many different functionalities like those libraries have. And they will certainly save you a lot of time in case you need to create a way to navigate and work with things related to navigation (like those mentioned about Web and Mobile).
If your project is simple, there is no need to use a navigation library. To have a more practical experience, you can even try to do your project without using such a library, and when you are having difficulties, try replacing your logic with some library and analyze if it was worth it.
I'm struggling with determining the best route to integrate various components of a single React app on a page within my traditional website. I've worked with React a bit, but they have always been self-contained pieces of content (meaning it fits nicely in one div in the HTML). But now I have a page where I need to sprinkle React into different sections. And each React piece will share various data.
See the attached image. Dark green sections will be React. The rest is a traditional PHP page pulling in content from a CMS.
I'm trying to figure out the best strategy for the React portion.
Should I have multiple renders each going to an appropriate div?
ReactDOM.render(<Section2 />, document.getElementById("react-app-div1"));
ReactDOM.render(<Section1 />, document.getElementById("react-app-div2"));
Since the React elements will all be sharing similar info, am I looking at Redux or Context API to manage that information?
Or is there a better way?
Is this antithetical to React, and I should just get all the markup into the React app itself?
I hope this question makes sense.
image of sample layout
Is there any way to create a sample login page and a home page in React native without using stack Navigator?
Yes. You can create your own navigation. Even react-navigation is a library built by components. If you are building your own navigation it will take more time and effort.
There are several navigation solutions are available for react-native. You should use one of this unless it is not fitting your need.
Some of the popular navigation solutions,
ReactNavigation - Js implementation
ReactNativeNavigation - Native implementation
React Native Router - Js implementation
An advantage of using navigation solutions out there is they got 100s of contributors. The solution is made by more than one person. Unity is strength. These libraries are updated frequently by adding more features and fixing bugs.
Using one of these solutions(libs) is a wise choice up to me.
Still, you wanna build your own navigation. Please follow Build Your Own Navigation