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.
Related
If I create a JSS react component and import it into Sitecore, can I add it to my Available Renderings in my SXA site and then add it to a page in my SXA site or vice-versa (i.e. add an SXA component to a page in my JSS Page?)
I tried doing that although the component shows up successfully when I try to add the component to my SXA page in Experience Editor, I cannot see the component on the page, after I associate the Data content with it.
You definitely can combine SXA and JSS, but the most common use case would be at an app level, not necessarily at a component level... As you would normally just build out the component with the framework you are using.
You can look through the docs on managing JSS apps within an SXA site to get more of an idea how it would work Here
Depending on your server setup and taking into account that the Experience Editor behaves very differently with JSS than it would when viewing the live site, I don't think anyone could give you the right direction here.
To get some proper advice and if you are actually doing this the guys in the sitecore slack would be keen to help:
Slack Request Form
We will be doing our first project using React.
It will not be a Single Page App, but a Multiple Page App.
What I'm trying to figure out at the moment is : what's the difference between a component and an app.
If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?
Thanks for the information you can bring !
THoma
There is no special object called "React App". React Components build an "React App" by coming together.
But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.
You don't need redux for state management in React Components.
I hope the answers have helped.
Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.
You can also look at the React Context APIs as an alternate to Redux.
An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.
If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.
You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data.
Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.
If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).
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
I'm a visual learner, This would help me a lot in designing, implementing, testing etc.
I need a kinda diagram that visualizes props, state, events, input, processing, output etc for each component in the tree and also as a whole. I want to visualize the components themselves and the relationship between these components, using a software like omnigraffle or anything else.
This can be achieved with a Browser Extension or a global npm package. (rarely a local one) Let me show you the two most popular tools.
React Sight (chrome extension)
React Sight is a live view of the component hierarchy tree of your React application with support for React Router and Redux.
Source: https://github.com/React-Sight/React-Sight
React Monocle (npm package)
React Monocle parses through your React source files to generate a visual tree graph representing your React component hierarchy. The tree is then displayed along with a live copy of your application.
Source: https://github.com/team-gryff/react-monocle
I think you should try React Developer Tools. It is a Chrome DevTools extension for React. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You can also inspect their state and other properties.
If anyone is looking for this now, I found this extention for VSCode. It's pretty nice. Just make sure to use the Command center to run generate tree command. It's not perfect, but it's best I could find.
https://marketplace.visualstudio.com/items?itemName=HabeebArul.react-component-tree
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