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.
Related
We are developing an application in React which has components like Input, Select, Accordion etc which can be re-used in a lot of other projects in our organisation to maintain a consistency.
We are using Material-UI styles to style our components using Javascript rather than CSS so that when other developers reuse the components they don't override the existing styling with CSS.
However, we have realised that the build time is long and when the components will be re-used in all the other projects,they will have a dependency on Material-UI which we don't want.
Can you guys please suggest on what is the best approach to maintain such application which can be re-used elsewhere and the best way to maintain the styles?
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
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
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
I am new to ReactJs and I am not sure where and how should I define Layout for components. Specifically I want my SideBar Header and Footer remain sticky and using react-router-dom I want to mount rest of the components at appropriate places whenever needed (click on sidebar item)? So should I render multiple components together or there is a another way to first define the layout and then render components at predefined places ?
For dynamic components, use css to lay them out on different pages and render them at once by calling them under render of that main big component. This would make could modular and non-redundant too.
Refer this github , I found it good for referral.
https://github.com/airbnb/react-sketchapp
For the quick layouts you can use bootstrap templates. ( This can help you get started)
https://getbootstrap.com/docs/4.0/examples/