I need a frontend UI for my react web application and I was looking to Material UI and Reactstrap. Which one do you think is better and easier for begginers to understand? Also are there any tutorials for either them because I found both of their documentations confusing.
I am confused about how to incorporate the components and than customize them as well
About customizing them, there is a section explaining about it and they provide examples as well.
You only need to import the component you want and plug it to your React apps just like regular React component.
As for API part on Material UI, most of them consist of 3 parts (Props, CSS API, Demos) for each component. The props section provide you with all the available props for the corresponding component. For example the Button props API, it list all the available props you can provide for the Button component
CSS API section is the section you would want to look for when you want to customize the component, it list all the available keys for you to override, in my opinion it's best to look at the corresponding component implementation before customizing it because I find it a bit tricky. The source are available for public on their Github repo
Related
I try to follow vercel next.js example folder structure, but don't know what is the difference between ui and common inside components folder in vercel/commerce next.js example source code.
It seems that UI is an atomic styled component that is a reusable building block, and Common is a component that is build using what have been defined in UI folder but used everywhere too.
This is the source code:
https://github.com/vercel/commerce/tree/main/site/components/common
That is a great question! I am also developing on top of Next.js Commerce, and I find that they don't provide any specific documentation for the custom hooks, schema (API) and the overall structure of the project.
It seems that UI is an atomic styled component that is a reusable
building block, and Common is a component that is build using what
have been defined in UI folder but used everywhere too.
You are right!
Essentially in the components/ui folder, you will find all the components that comprise of the UI design of the application & are used repeatedly over the website. For example, button, link, grid, dropdown, input...
In the components/common folder though, you will find components that are also used repeatedly throughout the application, and are not single elements like the UI ones (button, link, input...). Instead, they are a combination of UI components with additional functionality, that are also meant to be used in various places through the code (e.g. avatar, footer...)
Hope my answer was clear!
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
I'm having trouble doing the same with my app. I've added a Select component, but it doesn't render correctly. Should I be using a different nested component to create this?
I cannot see an example in material-UI's documentation. I am not sure of the correct styles to use. I am using a Select component here, but I'm not sure if its the same the Material UI website is using as it doesn't seem to inherit the correct style. It would be great if someone can point me to the correct method of adding a drop-down to the Toolbar.
That "dropdown" is actually composed of Button Component and Menu Component.
The docs site is open-sourced and you can check the implementation here.
I using the Gatsby Material Starter kit for a personal project (essentially to learn Ract and Gatsby). https://github.com/Vagr9K/gatsby-material-starter
The design I want is to have a homepage that doesn't render the toolbar in the header (the toolbar that containers the hamburger navlist). The homepage has a big body and footer but no header ie a giant 'hero'.
After a few hours of hacking with layouts and templates there must be an elegant way to achieve this design ? Any direction or working code to share ?
All the pages in Gatsby Material Starter are wrapped with a MainLayout component to provide consistent styling.
In it's turn, MainLayout uses the Navigation component to render a NavigationDrawer while passing the styling information to it.
If you want to change the fixed toolbar, then you'll have to replace it with Toolbar and Drawer components from react-md.
NOTE: I would not recommend learning ReactJS like this, since GatsbyJS adds additional complexity (that's specific to it) and starters (or any other pre-made projects like this) aren't easily customizable unless you have previous experience with React.
Disclaimer: I'm the author of Gatsby Material Starter.
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.