Is there a way to only install certain components of React Material UI. Especially the AutComplete component?
More than "Installing", what you are looking for seems to be only adding the components you use to your final bundle when your app is built, otherwise known as Treeshaking.
There's a guide in the documentation about this that might help you out.
https://mui.com/material-ui/guides/minimizing-bundle-size/
I have a working NUXT application with various pages and components in universal mode. Now I need to render one of the components on another static html site.
I can easily export a regular Vue application's component just adding a bundle script and div element to which the components renders.
But how can I do it with NUXT?
Nuxt is not really meant for a quick plug (with a script tag) but for an SSR usage (with some NodeJS build), so I highly doubt that you can make this. Or at least, I don't really see the point if you only use it as an SPA component.
If somebody knows a solution to make it work, I'm all yours on your opinion on this.
I have few ideas for my npm packages but I need a little bit of help as I am just starting out. I saw tutorials on youtube and they all write those packages in vanilla JavaScript and I saw few repos on GitHub where the package was made in react.
My goal is to make special components that people can just put in their app and render out and later customize through passing down props. For example:
https://www.npmjs.com/package/react-player
This React Player - which you basically put in your app and pass down props to customize
import React from 'react'
import ReactPlayer from 'react-player/youtube'
<ReactPlayer
url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
playing='true'
controls='true'
/>
Should I make my project in React or vanilla JS in my case? What are the benefits of whatever I choose?
I am a little confused because everyone on YouTube is teaching making it in vanilla JS.
Thank you a lot for helping.
Since you said you want your code consumed like ‘ReactVideoPlayer’ using ‘props’, you are talking about building a reusable React component. For this you by definition need to use React.
You would use Vanilla JS for building a library that could be used in any JavaScript context, in or outside of React.
If I have a react based website, can I transform it to react native easily? Or should I build it as react native from day one?
If I have a react based website, can I transform it to react native
easily? Or should I build it as react native from day one?
No. There is no "magic-converter-thingamabob" you can use. But depending on your existing React code, and your specifications for the native app, you should be able to share some of the code-base between the apps.
The view part will have to be done from scratch. Not only because it’s necessary to replace the HTML elements with React Native components, but also because the components will probably have a very different behaviour on the mobile app (source).
React Native has less of a "write once, run everywhere", and more of a "learn once, write everywhere" philosophy. Here is an article with examples and github repo.
Consider writing your app's UI from scratch as this in line with Facebooks's “learn once, write anywhere” approach (https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html).
I'm building a webapp and ios/android (same app). At first I thought cordova may be a good choice then after reading I thought React-native may be a better choice.
My question is: Will I have to write the same app twice (one in react for web and one in reactnative for mobile) ?
I've seen some library that can share react-native component for web but I feel I'm gonna be limited.
What do you think ?
Edit: One more question
With react I would use flux (and probably now redux) what should I do to keep my react-native app clean and readable, I mean how should I manage data there ? thanks for your answers already
Doing the same thing right now - I am not sharing the code base because the content of web/mobile app is different - I am using web for administration and mobile app for viewing the content.
React native uses the native views UIView, Text etc for display. You can't have the same code base for them.
React native uses flex box( it has its own implementation) so that also wont work for web react projects.
The only way is to keep them seperate.Also Web and App would be having different design .
Right now you can't share code base b/w React Native / React codes since one relies on native UI code and the other html DOM. There is an interesting project to combine the two (https://github.com/necolas/react-native-web) but it's by no means production ready.
I know this may be a late answer but it will be helpful in future. Check https://github.com/este/este, it has different stacks for mobile, web and server. You could use common components in common folder. It uses firebase as a backend service, but you can change to any service.
While it's true you can't use the exact same code for react native and react JS, you can architect your code base to reuse as much code as possible. Check out this project:
https://github.com/benoitvallon/react-native-nw-react-calculator
You actually can use the same code with the use of WebView component in React-Native.
Here is a link:
https://facebook.github.io/react-native/docs/webview.html
React Native relies on Native UI code and not html, meaning that all view components will have to be rewritten. However, if you keep all you logic out of your 'dumb' functional components in your web app, you should be able to reuse a substantial portion of your web code.
For instance, you might have an outer container that handles anything you want to happen on mount with componentDidMount, handles and defines onClicks, and determines which view components to render. This code can be exactly the same in web and mobile, and then your 'dumb' function view components would differ in that one uses native view elements and the other uses HTML.
The code for the web-app and the native apps can't be the same (or you might be fine with a WebView wrapper as apps). I suppose you're asking that because the functionality would be the same for both interfaces. The look and feel can be (almost) the same.
If you see your apps only as views, the backend (controllers & models) could be shared with multiple platforms. You could also try a Backend as a Service like Firebrand or Parse. Not really an answer on the redux part but it is an easy way to get kickstarted.
I definitely think you can reuse some of your code. If you're using redux which you probably will if you have some complexity - stuff like actions and reducers are easily reusable. While the UI components itself is not reusable always you can reuse some of the stuff supporting it.
Like timvp mentioned you can also use WebViews to reuse the code but I would not recommend since it does not have the same kind of performance as native modules always.
I suggest you to look at Redux architecture.
You will likely get the following folder architecture :
.
└── src
├── actions
├── components
├── containers
└── reducers
If you organize well your code, the react-native specific component will only be located inside the component folder.
All the logic and even the organization is reusable.
You will rewrite the components with plain html instead of native component. And also the apps entrypoints as they are different, but I don't find it is a really big deal.
More redux examples https://github.com/reactjs/redux/tree/master/examples
To answer to your second question : Redux is the state(data) manager.
It flows in a unidirectionnal manner.
For example, how do you handle a user click ?
The event is fired from the component
The container (which holds the logic) dispatches the action (say BUTTON_CLICK)
The reducers receive the BUTTON_CLICK with the current state, only the concerned ones will update the application state (ex: increment a counter)
When the state is updated, the render tree runs
Here is the full explaination of redux flow https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.z0bcil3i0
To better understand why this mess is awesome read this http://redux.js.org/
You can share most of your code between React and React Native (especially if you use react-native-web.
Try this article : http://jkaufman.io/react-web-native-codesharing/
It gives a pretty neat example of how to do it.
I highly recommend that you keep most of your domain logic (API calls, flux, and even Smart component handling the logic) and only rewrite the dumb components handling the view so that you can implement the best UX for either Desktop or Mobile.
You can name your dumb component view files like so:
MyComponent.js (for your web app)
MyComponent.native.js (for your native app) or MyComponent.ios.js & MyComponent.android.js if you rather have different views according to the platform.
The short answer is... YES!...
You need to write 2 code-base, but read on for the longer answer.
React Native is created for coding Application using some features of React, while React is created to do Website and Web applications, so they have similarity in nature, syntaxes and library which both using, So basically you need to rewrite some parts of you application, I can say around 20% to 70% percent and it really depends.
I compare React Native and React with some code samples from both for a small component, you can check the differences, but just let you know, for a real application, the difference could much more than what you see here:
React Native
React Native lets you build mobile apps using only
JavaScript. It uses the same design as React, letting you compose a
rich mobile UI from declarative components.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class WhyReactNativeIsSoGreat extends Component {
render() {
return (
<View>
<Text>
If you like React on the web, you'll like React Native.
</Text>
<Text>
You just use native components like 'View' and 'Text',
instead of web components like 'div' and 'span'.
</Text>
</View>
);
}
}
more info here
React
React 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.
Declarative views make your code more predictable and easier to debug.
import React, { Component } from 'react';
class HelloMessage extends React.Component {
render() {
return (
<div>
<p>If you like React Native on the devices, you'll like React.</p>
<p>You just use web components like 'div' and 'span',
instead of native components like 'View' and 'Text'.</p>
</div>
);
}
}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
more info here
I wonder why noone is mentioning ReactXP. ReactXP is
a library maintained by Microsoft that lets you create web, ios, andoid and windows apps with React:
XP means X-Platform
Share most of your code between the web, iOS, Android, and Windows.
https://microsoft.github.io/reactxp/
Other options as mentioned are
https://github.com/necolas/react-native-web
https://github.com/este/este
React Native is for apps only, it generates fully native components and React Native has specific syntax for its components.
Using some package to conert React Native code base into web would be noth worth it as you would be limited, and you go against React Native flow, it would be the same as converting Swift or Java written app into web via package. It is not optimal and limited.
This is the beauty that you learn javascript and with React(or any other library/framework of your choice) you write best possible web app with web experience, while at the same time using your knowledge on JS you can deliver fully native experience into your apps.
That's about the point of getting close to doing web and native - you can use the same core language and deliver best experiences on both worlds.
You can share the business logic using the same JavaScript codes (simply by copying the code). On the other hand, because of the nature of the hardwares, it is completely normal to have different presentation layers for web (mostly on your desktop/laptop browsers) and mobile (native).
You can refer to react-spa-jwt-authentication-boilerplate (*) as an example. It shares the "business logic" between web and native versions via a folder named common-logic by keeping exact copies of *.js files. On the other hand navigation and presentation layer differs. It implements a sample authentication process which itself can also be used as a baseline for new projects.
(*) Disclimer: I am the implementer of the repo. We needed to implement the repo for the exact same need of reducing development time between mobile and web applications.
i'm trying to do the same thing. RN is not all the same with React, you will have to deal with native views like: Text, View, ScrollView, ListView, etc. except this, they are nearly the same.
so, you can organize your code like this:
root
src
lib // code for all other three platform
android // code for android only
ios // code for ios only
web // code for web only
index.js //for web
index.ios.js // for ios
index.android.js // for android