5 ms·
The library commonly paired with React/React Native for data is Redux. People who use React and React Native to share code between web and native typically rep
by JaRail 9y ago
The library commonly paired with React/React Native for data is Redux.
People who use React and React Native to share code between web and native typically report 85-90% of their code can be shared. Some UX code is platform-specific. Most of the application code should be reusable. Much of the UX code, such as for a button or input field, should be reusable. Getting high reusability depends on strong knowledge of both platforms. That's kind of the case with any abstraction though. The better you know the entire system, the better your code sharing.
React is different from many UX libraries because of its functional structure. You describe what you want, say <b>text</b>. Most people use JSX, but it's really just representing that in a tree structure, an object for each node, references to child nodes, etc. You don't code the algorithm/steps to represent that to the platform. In a traditional native UX library, you'd do something more like "Element textEl = new Text("text"); el.isBold = true; container.add(textEl);". Then when you want to change things, you'd find the element and adjust the properties, delete it, etc. In react, the mental model is to just rerun your render code which spits out the new UX. The library handles the diff/update. React Native essentially takes your tree, it's knowledge of the platform's current state, does a diff, and makes those updates for you. Naturally, there are a lot of underlying heuristics which make that diff/update efficient.
Traditionally, coding a cross-platform app for both web and native platforms is quite a bit more intensive than a simple language port. It's a ground-up re-write.
Should also be pointed out that React Native is only useful for the traditional event-driven style of apps, eg Facebook. You wouldn't use it for games.
- mkirklions 9y agoI find the structure very interesting. Thanks for explaining it, in your own words. I like the concept, but I'm struggling ton managing data outside the component. I've read this is by intention. Thinking I'll just call everything from my server, save user data into the server directly and constantly recall from mysql. Goal would be to eliminate variables. Although this is a pipe dream, I'll still have to keep users logged in, and securely since this is a finance app. Redux solves this problem?
- JaRail 9y agoRedux is appropriate for that, yes. You'll need to write the code to communicate with the server. So whatever fetch/update APIs you write there. Then interpret the response, and push the data into Redux. Your server is your main single-source of truth. But on the client, redux is that source of truth that your UX and application code reference. Lin Clark is amazing at explaining concepts in the React and Mozilla worlds. Here's her intro to Redux concepts: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 https://code-cartoons.com/a-cartoon-intro-to-redux-3afb77550...
- mkirklions 9y agoThank you, validated what I thought I needed. Wondering how I should hide all the goodies, pick an encrypt library and move everything over GET? I wanted to avoid doing back end work in the mysql/php? I could never get the debugger to work.
- JaRail 9y agoAlso, if you want to focus on how components in React get their data, that's pretty simple. They just subscribe to it. If you wanted to render a list of accounts, you could have a couple levels. At the top, you have an account lists component. It gets a list of accountIds from a global data store (in redux). Then it outputs something like this: <List> <Account id="1" /> <Account id="2" /> </List The Account components then pull info from Redux about whatever they need to render whatever account they're responsible for. Each component registers a listener/callback with Redux when its first instantiated. So if the balance of an account changes, it's listening for that change. The change triggers your callback, that triggers a fresh render(). Then the next render() pass pulls the updated account balance with its next pass, etc.
- mkirklions 9y agoredux is going to solve my problems, very excited to get this tip.