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.
Related
This question already has answers here:
What is the difference between React Native and React?
(45 answers)
Closed 1 year ago.
I want to study a course about React, but I don't know couple of things, like:
What is the difference between React, ReactJS, and React Native ?
Well, if there is a big difference, What is the best one of them to study ?
I am really looking forward to study it, so if you got any information on the best way to start learning this course, I would appreciate it.
Thank you so much.
React and React.Js is one and the same.
React / ReactJs
ReactJS is an open-source JavaScript library used to build the user interface for Web Applications. It is responsible only for the view layer of the application. It provides developers to compose complex UIs from a small and isolated piece of code called "components." ReactJS made of two parts first is components, that are the pieces that contain HTML code and what you want to see in the user interface, and the second one is HTML document where all your components will be rendered.
React Native
React Native is an open-source JavaScript framework used for developing a mobile application for iOS Android, and Windows. It uses only JavaScript to build a cross-platform mobile app. React Native is same as React, but it uses native components instead of using web components as building blocks. It targets mobile platforms rather than the browser.
Link for Further information
What is the best one of them to study ?
React and React native both solves different kind of problem. React is common library between react and react-native which provides supports for hooks and generate virtual dom.
react-dom will render content on web using virtual dom created by react.
However on other side react-native will create bundle for android and iOS.
Main differences between Reactjs and React Native
When it comes to a web platform, Reactjs can be defined as a base
derivative of React DOM, while React Native acts as a base
derivative by keeping workflow and syntax the same alongside
altering components.
React is a JavaScript library that can help your developers in
building a highly responsive UI Layer and React Native on the other
hand is a complete framework to develop cross-platform applications.
Virtual DOM is used to extract browser code in React; native APIs
help in rendering components in mobile in React Native.
In React Native, UI is rendered with the help of JSX but the
applications curated with Reactjs extract HTML in UI.
For styling in Reactjs, CSS is used, and React Native platform
requires a stylesheet for styling.
Using CSS, you can carry out animation in Reactjs; for animation in
React Native, you need to use an animated API.
Recently I have a requirement where I need to use the react native component in react web app. I have searched and found one component i.e React Native Web.
That converts the react native component to work in react web app. Although I am having some errors but I actually wanted to confirm that whether it is doable to use the react native component in react web app SO that whenever we make changes in React Native Component, that will automatically be handled to be shown in the web. Because for react-native-web, we need to provide the react native file that will be converted into the web view. But how we can make sure that whenever we update the mobile component, changes will automatically be reflected on the web without making any changes.
Any help would be much appreciated.
Thanks
Yeah , U can use react-native-web.
But not all components working in react-native works on react-native-web , so u have to take care of those components and then u can maintain same codebase for both.
Further more, u can refer to https://github.com/necolas/react-native-web modules and components section
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.
There are lots of React components available. How do I know which ones are usable on React Native platform (IOS and Android)?
Web React components use DOM elements to display (ex. div, h1, table, etc) but these are not supported by React Native. You'll need to find libraries/components made specifically for React Native.
I doubt there are components that supports both, thus it should be fairly easy to figure out if it's made for React Native or not. As of now, if the creator does not specifically say that they made for React Native, it probably does not work on React Native.
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.