I'm making a notes app and currently I have done my own styling for things such as the FlatList. How can I make the components resemble real iOS components such as the list in the notes app for iPhone?
It is possible by creating a native wrapper for the component. You can try to find maybe somebody who already created it on GitHub or implement it yourself following this guide https://reactnative.dev/docs/0.69/native-components-ios.
If you decide to build it yourself you can use this CLI https://github.com/callstack/react-native-builder-bob which will generate template.
Related
I just started my first NextJS app and followed this guide to add MUI. The only difference I can see is that I'm using the experimental app directory of NextJS 13.
When following the guide, I get a server error of Uncaught TypeError: React.createContext is not a function which is basically rather clear, as the context API is only available to client components and can therefore rather easily be "solved" by placing the 'use client'; directory on top of the erroneous component.
Unfortunately it seems like this is required for every component which uses any part of MUI. E.g. I'd also have to 'use client;' in my root layout.tsx if I'd like to wrap my whole app with the ThemeProvider etc.
My questions are the following:
Do I really have to 'use client;' everywhere I'd like to use MUI or is there some other way around?
If 1 is true: Doesn't this make MUI completely useless in combination with NextJS as it prevents the usage of all the SSR, SSG, ISR goodness etc or do I have some kind of misunderstanding here (I'm very new to NextJS in general...)?
If 1 & 2 are true: Are there other recommendable UI frameworks or libraries which bring a good set of "ready to use" (and out of the box good looking) controls, components etc. that work better with NextJS without those limitations?
FYI, I have the following versions installed ATM:
next#13.0.6
#mui/material#5.10.17
Update
I should have read the NextJS beta docs more careful before posting the question:
It seams like there's no way around this ATM as stated here in the docs and again here in the a ticket.
So this answers question 1, as there doesn't seem to be a way around 'use client'; for now.
However, I'd still really appreciate answers and opinions on questions 2 & 3.
I've been doing a lot of research for an Angular based internal component library we are building and I can't seem to find why a Modal or Dialog component requires the abstraction of a Service to work. I have a working example simply using an approach of an Angular component with some CSS to make it be where it needs to be on the page, using content projection to make the code reusable.
I basically want to understand what hidden funtionality/benefits there are to using a service to call/generate the modal since every Angular based component library I've come across uses this method.
I'm building a web application using ReactJS.
I would like to know if it's a good idea to combine React and Bootstrap or if it's completely useless? Are there things I can do with one and I can't do with the others?
I know that Bootstrap is a Framework and React is a library but I'd like to know what's the difference between the two, since I read some articles explaining the difference between a library and a framework and couldn't really understand!
I would recommend going through this tutorial:
https://ourcodeworld.com/articles/read/561/how-to-use-components-of-bootstrap-4-in-reactjs
Basically, they aren't meant for the same purpose: you can write the business logic (~how your app will work) in ReactJS and then you can show it to the end user with some custom CSS class magic written in Bootstrap 4.
Hope that helps!
The difference between a library and a framework is explained really well in the following Stackoverflow post: What is the difference between a framework and a library?
If you want to use Bootstrap 4 in ReactJS you can use the following super easy and nice to use library: Reactstrap.
I hope this helps you.
Bootstrap is a CSS framework, It is used to make responsive and beautiful websites.
React js is a view library and makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
You can use them together if you want to build interactive and beautiful
websites.
To include bootstrap in React,
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that you get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. However if you are only interested in css, then it's perfect.
Using this you can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If you want simple setup, then you can use reactstrap link
Other frameworks include react-bootstrap link
This does not mean, that you have to use bootstrap only. You can use any other css framework like Bulma, Foundation etc.
Is it worth it using jQuery with React ?
My opinion is not to use jQuery with React, as jQuery or jQuery plugins changes DOM structure, This in turn causes problems with reactjs virtual DOM.
This does not mean you cannot use jQuery, you can, but its little different than normal use.
Reactjs has provided a way to use jQuery and other plugin here Integrating with Other Libraries
Let's say for example I am working on a website which makes use of redux. Then I want to import a different project, e.g. some embedded app, which also uses redux.
So then I have a website written using react & redux, with an embedded app, which also uses react & redux, but neither projects know that the other project uses redux.
Will this be a problem? Will there be any conflicts? And how would the chrome redux plugin work? Would it be able to pick up both redux stores?
Depends on how you plan to embed. It should not be problem.
About Chrome Redux plugin, I'm not sure about this.
you can use IFrame. There should ideally be no problem doing this, till you are on the same domain.
or
If you choose the Web-component way. It will give you shadow dom inside. This can be used to create a widget which then can be used anywhere without conflicting with parent in anyway.
see the
https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components/
hope this helps.
I am currently building a small meteor based quoting tool application. I would like to add Google's material design to it and and having a hard time to decide what is the best way to do that.
I would like to hear from someone who has done this, am I in right track and what are the potential issues with solution options below, or is there better existing solution?
Installing polymer to public folder and use bower to build the client packages.
Installing materialize CSS using Atmosphere package https://atmospherejs.com/materialize/materialize
Using momentum https://atmospherejs.com/percolate/momentum to roll my own components https://atmospherejs.com/percolate/momentum
Elements I want to use are paper-elements + Google drive and sheets, plus might need more in the future.
If you go the Polymer route, you will be able to use the paper-styles component. It would require manual application, but it'd give you the most authentic Material Design experience. In addition, you can use the various paper elements directly, swapping out normal input elements for paper-input, for example.