Im trying to create an application targettng both web and mobile. The idea is to create react components that differ on how they render but share the logic.
React v.014 blog post stated "we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.
The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components."
I've found a great example (http://blog.benoitvallon.com/projects/a-mobile-desktop-and-website-app-with-the-same-code/) that uses the same concept and accomplished the result (react-native 0.13.6 and react 0.14.2).
In this code, you will see nothing special just a smart idea on how to extend react-native naming conventions system to include a web version. The minute I upgrade to latest react-native, it complaints about any component that uses React.Component from the react package instead of react-native.
This is confusing since 0.14 release seem to indicate that was exactly the point moving fw. Let React create components, let react-dom deal with the DOM and let react-native deal with ios/android views.
I think this is a brilliant idea but I cant seem to pass this particular problem. Any thoughts, ideas will be greatly appreciated.
Thanks
The transition to make react native work this way is underway but incomplete. See AMA.
We are working hard to stop using our fork such that people can use require('react') and work the same as require('react-native'), this will make it possible for all the third party plugins to work on both places without doing anything.
Right now we can't use relay on the open source version of react-native without forking it, which is a huge shame and we're working on fixing that.
Related
I want to use the same component lib on web and mobile with react. I know that semantic-ui-react fits to web, but tried to use it in a react-native project without success.
Am I missing some specific config, or it does not work in both platforms?
You're not missing any configuration. Semantic UI React only generates elements using react-dom. The only way to use it with React Native would be if the entire library was updated to render native elements for other target environments. This is not something that Semantic UI supports... and would represent a significant, likely breaking, refactor to do.
Maybe this package meet your need in react-native
https://www.npmjs.com/package/#muratoner/semantic-ui-react-native
I am currently studying RN by myself, without prior knowledge in React. A lot of things seem to exist in both such as Redux and hooks. Many of the resources I find refer to React in the title (e.g "Redux Crash Course With React").
My question is: where does the line cross between React and React Native? Would I be fine studyig form these resources that refer to React, or would that just confuse me?
I'm trying to understand a go to approach to understand which resource I'd be fine with and which would be irrelevant.
React Native contains React library to use it as front-end library.
Most of usages of React are the same for React-Native. And it is same for Redux too.
React-Native must have other libraries to build applications that can run on both of Android and iOS.
Also it has middleware libraries that allow us to use most of native libraries' functionalities. As an example you can check Alert directory out. It is used for to show native Android alert dialogs.
Good luck..
Both react and react native use javascript to create the user interface we need but the difference is in the rendering, style and bundling and you should know that react native is a framework itself but react.js is a library. the main difference:
---React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way. Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app.
---With React-Native, you’ll have to learn a completely new way to animate the different components of your app with Javascript.
--- navigating between pages are totally different!!!
so we conclude that it's better to study references based on RN not react.js . but some functionalities such as redux or hooks or a lot of it's components are exactly the same and you can study react.js references for them. only the 3 differents that i said above are important.
Reference MV* Architecture using React js
I understand that React is an View Engine and it still requires many other libraries like Redux..etc.
Is there a list of libraries to be used along with React to build a complete ecosystem like Angular ?
The React/JS ecosystem has become so rich, you can't really decide of a set of libraries to use by default in every projects.
It really depends on your needs.
Many people choose to generally go with react-router for the client-side routing, react-dom to interact with the DOM, redux for the state management, and react-redux to connect your components to the redux state.
You might find better answers by looking at the code of these react boilerplates, some of them explain there choices: http://andrewhfarmer.com/starter-project/
One of the key decisions in choosing React over Angular for us was that React is a technology, not a framework.
The ability to mix librairies to your needs is the big plus; there is no best list. As a quick example, redux makes tons of sense for us for the webapps, however it does not for the react-native mobile app where it may not blend well with the Navigator or may be overkill...
for react web, I'd like to try semantic-ui (http://react.semantic-ui.com/usage)
for react-native, I don't think there's a framework that can help us with styling. (which is hard to believe, maybe I'm too new to react world)
My question is, Is there a way for us to share styles for the two platforms (web/native) somehow?
There are external dependencies that could be used as tools to achieve what you are talking about react-native-css is one option.
Without any external dependencies I think you can still achieve succesfull results... You will just need to export style modules in your react-native app and pass them as props. You can use the Platform module (from rn) to conditionally render styles depending on device operating system. Remember, layouts in react native are created with flexbox so any successful shared styles between web and native would have to be written with that in mind. (Bootstrap 4 supports flex.)
I am going to develop a web + mobile application using React and React Native. I'd like to share as much code as possible between React and React Native. I was looking for some starter kits, but found only este. However, for me, it seems to be an overkill as it has too many dependencies (also I wasn't able to make it work for Android - when I fix some error, I run into another one).
I'd like to have just React + React Native + Redux + web bundling etc. Are there any other alternatives? Or at least very simple example apps that I could use?
Did you check the awesome React-native list ?
As I said in this thread, as long as you follow the component / container pattern with Redux; you are able to reuse a lot of code.
The pattern encourages you to separate every presentational code into the comopnent. The container holds all the logic.
Then when you want to reuse the code, you just have to rewrite the component.
Here is a great explanation on how to implement it.
Also, you may want to check React-native-web. It allows you to code in react-native for the .... browser.
Update: I now know why there aren't almost any starter kits that would combine React + React Native. The reason is that it is not a good idea to combine web React and React Native. Just create two separate apps, you'll save yourself a lot of headaches. For those still interested in combining the two platforms, have a look at React Native for Web instead.
So in the end, I've created my own started kit. You can find it here: https://github.com/gina-system/react-starter
why do not you check out https://github.com/teallabs/react-native-init
pretty amazing react-native starter kit with codepush, google signin, sentry, react-navigations and all setup steps.