As a web developer, can you explain why React is needed?
In the early days of the internet, web sites were essentially made of static HTML files. Web servers were little more than file servers, when a user would come to a url, the web server would simply fetch it, and send it to the user via their browser, along with all kind of assets, like fonts and images.
The functionality of this kind of web pages are very limited, so eventually the web became more dynamic. When people would visit a page or interact with a form, instead of just fetching data, the server could perform an operation and prepare some content on demand. That content would still be sent to the user’s browser. There could also a little bit of code running on the browser, to animate pages, handle form and what not, but not very much.
So up until around 2010, that was the dominant model. Code could be involved to generate content but the browser wouldn’t do much, most of the logic would happen on servers which would just send prepared content to the browser.
However, in the early 2010s, this paradigm started to shift. With HTML5/CSS3, the browser became much more capable, and so people started to move the logic that would generate content from the server to the browser. Instead of sending a whole styled HTML page, a web server could just send the data needed to create it. Then, code could run on the browser to actually turn that data into HTML. That browser code could also update what the user would see, making just the required data calls.
So, in the early to mid 2010s, front-end code would typically:
- render complex web pages from data retrieved from back-end,
- simulate “navigation” between different views: when the user would do some actions, the entire page would change, the url would update etc. but without actually loading a new page from the server.
- maintain the state of an application: the application could track certain things about the user and the session, and won’t have to reload that information from the server all the time.
- dynamically update both contents and style of a web page.
Now, all of this is possible to do in “vanilla javascript”. But it’s really cumbersome to implement it, and especially tricky to do it in a performant way. There are millions and millions of “web apps” that are replacing the static “web sites” of old, and which all need to dynamically render content. Should developers reimplement that from scratch each time?
Enter the web frameworks such as React. These frameworks are abstractions that let the developers focus on the logic of their web app (where the data comes from, how content is organized) without being tied to the nitty gritty. Web frameworks make developers organize their code in building blocks called modules or components. Somebody could write a header component and someone else building a page could reuse that header component. And a third developer could change the header component, and that change would be reflected everywhere the component is used. Folks could also build 3rd party libraries compatible with the web framework ecosystem, that would address common problems that many developers face. For instance, someone could create a date picker component (a notably tricky interface) that anyone can reuse and customize. Or create a solution to deal with very long pages by only rendering what is in the browser viewport, and creating/deleting elements as a user would scroll.
To have the support of this ecosystem is a huge productivity boost. There are millions of developers who work with React, and the most popular React libraries are very elegant solutions to hard problems(the same could be said of Angular, Vue etc. though their communities are a bit smaller).
React and web frameworks aren’t exactly needed, in fact there is a reverse trend in the last couple of years to go back to server generated content in some cases or to only use vanilla javascript, but it’s a very solid foundation to build a web app.
Comments:
1- The specific rationale for React is state management and efficient page updates, it’s underlying power comes not just from the structure and tooling provided by it being a framework, but also the shadow-DOM and component lifecycle that along with state management empower greater interactivity without very slow inefficient page updates.
2- React isn’t needed, but it is a great framework that can reduce the amount of work you do in making a website/webapp.
React is great for widgets and implementing patterns. You can keep data/text separate from structure and behavior. React, angular and vue are all popular frameworks. Before that we used stuff like dust, handlebars, jQuery and UI libraries like dojo and jQuery UI.
Developers are always looking for ways to be more efficient and more maintainable. React is a current iteration tool for being more efficient.
3- It is needed as a pattern for the devs to create packages that will works (The React packages). In NPM there are many packages, but all them are following its own logic, docs or no docs, they are based on another packages, etc. With things like React, you are somehow limited to follow its rules and you are entering its ecosystem which is good. This is true for all frameworks/libraries.
React also has some configurations which follows the best practices (create-react-app, NextJS, etc), but this is the same and for others.
The difference is that React is close to JS and there is a lot of freedom, what to use like a package, starter pack, use or not Typescript
- React Weekly Issue 42by This Week In I/O (Reactnative on Medium) on July 3, 2022 at 2:51 pm
Welcome to the 42nd issue of React Weekly, weekly roundup of the latest React and React Native links and tutorials.Continue reading on React Weekly »
- React Weekly Issue 42by This Week In I/O (React on Medium) on July 3, 2022 at 2:51 pm
Welcome to the 42nd issue of React Weekly, weekly roundup of the latest React and React Native links and tutorials.Continue reading on React Weekly »
- React: useEffect and useStateby Ann Omao (React on Medium) on July 3, 2022 at 2:38 pm
Hooks were introduced in React version 16.8. Hooks are functions that let you use state and other React features without having to write…Continue reading on Medium »
- Do I need to install create-react-app locally or globally?by /u/TheRNGuy (React – A JavaScript library for building user interfaces) on July 3, 2022 at 2:20 pm
submitted by /u/TheRNGuy [link] [comments]
- Top UI Frameworks for Angular and react.by Shrihari Mohan (React on Medium) on July 3, 2022 at 2:06 pm
Here are the frameworks you should know before you start your next project. Most common ones comes last in the list. You should never use…Continue reading on Medium »
- Does React-dnd support multiselect?by /u/maxifederer (React – A JavaScript library for building user interfaces) on July 3, 2022 at 1:50 pm
https://stackoverflow.com/questions/55750718/how-to-drag-drop-multiple-elements-in-react I was trying to select multiple items, but it doesn't seem to support it. Can you easily swap React-dnd with React-beautiful-dnd? I already have a big application at hand and I am using React-dnd, so I am wondering how difficult it would be to swap. I see a solution for react-draggable, but not react-dnd. https://codepen.io/markvital/pen/vYNZXgW?editors=001 submitted by /u/maxifederer [link] [comments]
- Express & Typescript ile JWTby Alperen Bayramoğlu (React on Medium) on July 3, 2022 at 1:10 pm
JWT (JsonWebToken), RFC 7519 standartı ile tanımlanan eşler arası iletişimin güvenliğini JSON objesi ile sağlar. JWT’te veri gizlenmez…Continue reading on Medium »
- Run NodeJS and ReactJS Concurrentlyby Yoonhlee (React on Medium) on July 3, 2022 at 12:18 pm
When developing a full-stack application, you need to run them separately which can be stressful especially when you have to go back and…Continue reading on Medium »
- GSoC’22 Week 1 with SCoRELabby Janvi thakkar (React on Medium) on July 3, 2022 at 11:54 am
The community bonding period went awesome. I have other partner contributors on the same project. We all had an unofficial meeting to know…Continue reading on SCoRe Lab »
- What’s new in Next.js 12.2?by Claudio marzella (React on Medium) on July 3, 2022 at 11:36 am
Next.js, it’s a React framework that help you in a construction of blocks. When you are developed a block in React there are multiple…Continue reading on Medium »
- 3 usecases for useRef in 3 minutesby /u/Web-devil (React – A JavaScript library for building user interfaces) on July 3, 2022 at 11:29 am
submitted by /u/Web-devil [link] [comments]
- Performance Optimization Strategies Inside React You Don’t Knowby bytefish (React on Medium) on July 3, 2022 at 11:21 am
The Road to be a React Champion.Continue reading on Medium »
- GitHub: Reactby Swarnalataroydeb Wikiance (React on Medium) on July 3, 2022 at 11:14 am
About GitHubContinue reading on Medium »
- The easiest way to prefetch links and fix fetch waterfalls in react-query, useSWR, Apollo-client or…by Howard (React on Medium) on July 3, 2022 at 9:54 am
TL;DRContinue reading on Medium »
- Built a pixel art app in Reactby /u/jpsworkshop (React – A JavaScript library for building user interfaces) on July 3, 2022 at 8:05 am
Hi, I built a pixel art app in React with express and MySQL on the backend, and as a new developer would love to get some feedback. https://20squared.pitans.co.uk/ Thanks submitted by /u/jpsworkshop [link] [comments]
- If I use React Router, is it still a SPA?by /u/raulalexo99 (React – A JavaScript library for building user interfaces) on July 3, 2022 at 5:40 am
Or a SPA should not rely on routing? submitted by /u/raulalexo99 [link] [comments]
- Stuck with proper type for child componentsby /u/Red3nzo (React – A JavaScript library for building user interfaces) on July 3, 2022 at 5:32 am
The following error keep popping up when I compile, Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ReactNode'. I'm working on a state management Class with Mobx & I'm using React Context to pass the class around with the active state. Below I have a file that is essentially my `GlobalStore` that wild keep all the active state classes alive. // Provider without children typed throws `Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ReactNode'. Type '{ children: Element; }' is missing the following properties from type 'ReactPortal': key, type, propsts(2322)` export const StoreProvider = (children) => ( <StoreContext.Provider value={useGlobalStore()}>{children}</StoreContext.Provider> ); // Provider with what I think is the proper type export const StoreProvider = (children: React.ReactNode) => ( <StoreContext.Provider value={useGlobalStore()}>{children}</StoreContext.Provider> ); I'd think that would work but since I'm adding this provider in my root component which I cleverly named `Root` then throws the error I've state on the first line of this post. // Root.tsx const Root = () => { let location = useLocation(); let state = location.state as { backgroundLocation?: Location } return ( <OStoreProvider> // <---- Error occurs here 🙁 <div className='main_container'> <ApplicationGlobalStyle /> <Routes location={state?.backgroundLocation || location}> <Route path="/" element={<HomeScreen />} /> </Routes> {state?.backgroundLocation && ( <Routes> <Route path="/creation" element={<BaseModal />} /> </Routes> )} </div> </StoreProvider> ); } submitted by /u/Red3nzo [link] [comments]
- Step-by-step guide to translation in React Nativeby Saad Khan (Reactnative on Medium) on July 3, 2022 at 5:14 am
In this short guide, I will try to document the following —Continue reading on Medium »
- Placing interactive D3 graph into React websiteby /u/soconfusedwith_react (React – A JavaScript library for building user interfaces) on July 3, 2022 at 12:11 am
Hey all - help requested. I'm using a form of this graph and trying to place it into a React website, but nothing I'm doing seems to be working. I'm trying to retain the interactivity - toggles, search bar - but html to React packages aren't working and I don't know what else to try. Helmet and dangerouslysetinnerhtml both have issues: the former kept returning with errors for "Property 'class' does not exist" and I couldn't get the latter to accept any CSS. Is there anything else I can try? I'm a beginner with React. submitted by /u/soconfusedwith_react [link] [comments]
- useState and useMemoby /u/Pengwyn2 (React – A JavaScript library for building user interfaces) on July 2, 2022 at 10:01 pm
Hi, So I have an issue I am not sure how to resolve. I want the ability to update multiple states at the same time, however only a subset of those states are used as dependencies for a useMemo. If I bring these together into a collection object and make that object a useMemo dependency, then any setState on the collection object will call a new expensive computation even if the child states that would otherwise not call a new expensive computation did not change. What are some suggestions on how to deal with this please? Thanks submitted by /u/Pengwyn2 [link] [comments]
- React Native Development Servicesby MTCPE For You (Reactnative on Medium) on July 2, 2022 at 9:46 pm
Yojji offers several React Native development services to companies interested in cross-platform app development. With React Native, you…Continue reading on Medium »
- What do you guys think of doing grids and columns like this?by /u/ThisSoFrustrating (React – A JavaScript library for building user interfaces) on July 2, 2022 at 6:39 pm
Will this be good or okay for responsivness for phone and ipads? export const LandingSection = ()=>{ return( <div className="landing-section-row"> <p className="section-title">my section title</p> <div className="landing-section-column">Hello 1</div> <div className="landing-section-column">Hello 2</div> <div className="landing-section-column">Hello 3</div> <div className="landing-section-column">Hello 4</div> <div className="landing-section-column">Hello 5</div> <div className="landing-section-column">Hello 6</div> <div className="landing-section-column">Hello 7</div> <div className="landing-section-column">Hello 8</div> </div> ) } Wrapper of the <div> row .content-wrapper{ max-width: 1400px; margin:auto; } .landing-section-row{ width: 100%; } .landing-section-column{ width: 325px; margin-bottom: 20px; margin-left: 20px; float:left; background-color: yellow; height:200px; } submitted by /u/ThisSoFrustrating [link] [comments]
- Login With Regex Expo React Nativeby Muralitharan A (Reactnative on Medium) on July 2, 2022 at 11:31 am
Login Screen with React Native appContinue reading on Medium »
- what is queryKey in useQueryby /u/HaveNoIdea20 (React – A JavaScript library for building user interfaces) on July 2, 2022 at 9:55 am
What is beginner friendly explanation of queryKey in useQuery() submitted by /u/HaveNoIdea20 [link] [comments]
- How to build a great App as a Solo Developer — Week 3: Data designby Christopher Schaumloeffel (Reactnative on Medium) on July 2, 2022 at 8:56 am
After outlining what the app should look like, we’ll now focus on how the app should work like. This week’s article covers the design of…Continue reading on Medium »
- Please rate and comment on my portfolio!by /u/original_kimchi (React – A JavaScript library for building user interfaces) on July 2, 2022 at 8:12 am
Dear Redditors, I hope this post finds you well. https://youngjun827.github.io/ Any feedback would be greatly appreciated. Thank you guys in advance! submitted by /u/original_kimchi [link] [comments]
- Flutter Vs React Native — Which Framework is Better?by Sannan Malik (Reactnative on Medium) on July 2, 2022 at 4:20 am
In the Flutter vs. React Native debate, there are many pros and cons to each. While Flutter is more widely used among junior developers…Continue reading on Medium »
- 8 Things that should be Considered While Choosing A React Native Agencyby MTCPE For You (Reactnative on Medium) on July 1, 2022 at 8:33 pm
Are you struggling to find a competent react-native agency that could match your requirements? Are you guilty of hiring react native app…Continue reading on Medium »
- The Best Reasons to Develop React Native Appsby MTCPE For You (Reactnative on Medium) on July 1, 2022 at 8:32 pm
Statistical data says nearly a hundred thousand apps are released in a single month. New apps are launched every day and many older ones…Continue reading on Medium »
- Want To Optimize React Native Performance? The Dos And Don’tsby MTCPE For You (Reactnative on Medium) on July 1, 2022 at 8:32 pm
Using a framework like React Native means the business and developer wants better performance.Continue reading on Medium »
- List of Top Local Databases used for React Native App Development in 2022!by MTCPE For You (Reactnative on Medium) on July 1, 2022 at 8:03 pm
This post enlists the prominent local databases to watch out for in 2022 if you are planning to develop an app with React NativeContinue reading on Medium »
- Programmer Browser | Open Source Browser for Developersby /u/Zestyclose_Fig_3805 (React – A JavaScript library for building user interfaces) on July 1, 2022 at 6:31 pm
submitted by /u/Zestyclose_Fig_3805 [link] [comments]
- body as root instead of divby /u/TheRNGuy (React – A JavaScript library for building user interfaces) on July 1, 2022 at 5:29 pm
By default there's div with id="root", but I changed it to body id="root" and no problems so far. I think it's unnecessary div. Or there could be problems with this approach? submitted by /u/TheRNGuy [link] [comments]
- Authentication and Authorization in ReactJSby /u/samjoshusa (React – A JavaScript library for building user interfaces) on July 1, 2022 at 1:10 pm
submitted by /u/samjoshusa [link] [comments]
- [GUIDE] React Fetch Databy /u/ZestycloseChocolate (React – A JavaScript library for building user interfaces) on July 1, 2022 at 1:03 pm
submitted by /u/ZestycloseChocolate [link] [comments]
- Image handling in reactby /u/mr_162 (React – A JavaScript library for building user interfaces) on July 1, 2022 at 8:23 am
Hello React dev, I am currently working on Component (DocumentList) which shows list of documents (image of each document), when clicked on any image, it will show the document in pdf view(DocumentPdfView). I have a component for each document image (DocumentImageView) which calls the api to fetch document image (endpoint=/documentImages/{id}), and it's calling api every time DocumentImageView component is being rendered, and it looks slow sometimes, So is there any way to make it efficient? Like caching image or some ideas on similar line. submitted by /u/mr_162 [link] [comments]
- Can't figure out what's the issue preventing me from integrating this drag-select library into a certain sandboxby /u/maxifederer (React – A JavaScript library for building user interfaces) on July 1, 2022 at 3:30 am
https://codesandbox.io/s/admiring-rgb-00lprb https://github.com/aurbano/react-ds I am trying to implement this drag-select feature, but for some reason I am getting some errors. I disabled the typing, but I still see some issue from the lack of typing and also it just won't render even if it compiles. const renderSelection = () => { if (!ref || !elRefs) { return null; } return ( <Selection target={ ref } elements={ elRefs } onSelectionChange={ handleSelection } style={ styles } /> ); } This is the most crucial part, but the working version without react-ds is below: https://codesandbox.io/s/womjln5lw submitted by /u/maxifederer [link] [comments]
- Is there a website with svg files we can use for free?by /u/maxifederer (React – A JavaScript library for building user interfaces) on June 30, 2022 at 10:15 pm
https://www.svgrepo.com/vectors/gears/ I saw this page, but I noticed that a lot of them are under CC0 license and I need to give attribution. I want to use it in a commercial application without the risk of being sued. submitted by /u/maxifederer [link] [comments]
- Where to put @media queries in React app?by /u/raulalexo99 (React – A JavaScript library for building user interfaces) on June 30, 2022 at 10:08 pm
Media queries usually involve several containers and components in the whole page. So, when you need a media query: Do you write a single media query rule on each of all the component who need it? Or do you place all media queries in a single file? Or do you have another strategy? submitted by /u/raulalexo99 [link] [comments]
- Udemy or Coursera ?by /u/Automatic-Advisor-46 (React – A JavaScript library for building user interfaces) on June 30, 2022 at 7:02 pm
submitted by /u/Automatic-Advisor-46 [link] [comments]
- Helper functions and functional components. Inside component or outside component?by /u/raulalexo99 (React – A JavaScript library for building user interfaces) on June 30, 2022 at 5:03 pm
In functional components, what's the difference between putting helper functions inside and putting them outside the component's body? submitted by /u/raulalexo99 [link] [comments]
- Any lib recommendation to handle code snippet rendering and highlighting with feedbacks?by /u/brubsabrubs (React – A JavaScript library for building user interfaces) on June 30, 2022 at 4:37 pm
I am making a code feedback platform that uses sonarqube's API to analyze and give feed on possible bugs, code smells and vulnerabilites. I have already finished the integration with the sonarqube API, so the next step is to implement a frontend for this feature. I was wondering if there are any library recommendations for rendering code snippets and highlighting specific pieces of the code. Maybe something similar to this: https://preview.redd.it/ml49wlolds891.png?width=331&format=png&auto=webp&s=fbe444c94c05cb0fe2f22daf6d23b9e29b534ea8 https://preview.redd.it/x98u72smds891.png?width=629&format=png&auto=webp&s=22034d45d46ace6c4ce61b04bfc9dff47e3dfe99 I can probably just make a component that does this myself, but if there are any famous libraries that do this for me it would save me a ton of time thanks in advance submitted by /u/brubsabrubs [link] [comments]
- Initializing Stateby /u/2014worldpogchamp (React – A JavaScript library for building user interfaces) on June 30, 2022 at 3:22 pm
Is this an “acceptable” way to set initial state values in React? (Inside a class component…): constructor(props){ super(props); this.state = { hours = this.findHours(); } } hours(){ const now = new Date(); return now.getHours(); } submitted by /u/2014worldpogchamp [link] [comments]
- How to connect MongoDB with ReactJS ?by /u/FarmingDev (React – A JavaScript library for building user interfaces) on June 30, 2022 at 1:32 pm
Hello fellow dev ! Sorry, my english is kinda awful. I have a small (big) problem that keep my project from working. My back work just fine, and I can't find any problems with my front either. I use MongoDB has my database and react for the front. My server and dataBase are working fine, there is no problem there. But my front doens't connect with my back. When I try to register or log in It doesn't work. I can't find any data in my database. I tried using Mern, but it still won't work. I'm suspecting that Redux is the one that keep blocking the connexion between Front and back, but I can't find any problem there either. Can you guys please help me find the cause of all this ? Here my repo if you wan't to look a little. Thanks ! submitted by /u/FarmingDev [link] [comments]
- MVM, in react native?by /u/bigshakagames_ (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 10:00 am
Was on a discord channel today and got told that MVM serves no purpose in react native and that I shouldn't be using it. Basically I have a view which is pretty dumb and a view model which handles all the logic then other services thay the view model interacts with. I'm fairly new to mobile dev so I was just following the lead of my work place but I'm curious now, is mvm really not a react native thing? submitted by /u/bigshakagames_ [link] [comments]
- No callbacks called when creating a SurfaceView in react-nativeby /u/Plexxuus (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 9:21 am
Hello, I am trying to create a SurfaceView in react-native, but callbacks such as ` surfaceCreated` is never called # CanvasSurfaceView.java public class CanvasSurfaceView extends SurfaceView implements Callback { public CanvasSurfaceView(Context context) { super(context); SurfaceHolder surfaceHolder = getHolder(); surfaceHolder.addCallback(this); } @Override public void surfaceCreated(SurfaceHolder holder) { Log.d("CanvasSurfaceView", "tst"); Canvas canvas = holder.lockCanvas(); Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.BLACK); canvas.drawCircle(500, 200, 100, paint); } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { Log.d("CanvasSurfaceView", "changed"); } @Override public void surfaceDestroyed(SurfaceHolder holder) { Log.d("CanvasSurfaceView", "destroyed"); } } submitted by /u/Plexxuus [link] [comments]
- Scaling SVG loaded from the web?by /u/kierancrown (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 7:28 am
Hi, I'm having some trouble getting svgs loaded from an API to work, some svgs seem to have a viewbox property some don't. Some svgs load correctly and fill the container, others are tiny, and others don't display at all (possibly too large). The JSON data can be found here: https://snapsite.co/output.json each item contains an svg icon. Here is how I'm currently displaying the svg: <SvgCssUri height="100%" width="100%" uri={image} /> https://preview.redd.it/zpvl8zqqnp891.png?width=124&format=png&auto=webp&s=f4984893283b816fc49168f063679bb10754117c submitted by /u/kierancrown [link] [comments]
- React context for Minesweeper?by /u/Less-Simple-9847 (React – A JavaScript library for building user interfaces) on June 30, 2022 at 7:00 am
Hey folks, just looking to learn react context and want opinions on how good a design would it be yo use it for managing state of all cells in the game? Most of the blogs online try and do logic in class components with local state but I want to separate the logic in one single place. Thoughts?? submitted by /u/Less-Simple-9847 [link] [comments]
- I made a Recipe Recommendation appby /u/Roshan0100 (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 5:44 am
I wanted to teach myself react-native and add a project to my portfolio so I made this app, called Sous Chef (only available on google play). You just input whatever ingredients you have and filter by diet/allergy/intolerance and it will give your recipes from the Spoonacular API based on your input. Any feedback is welcome and it would mean a lot if you could check it out 🙂 link: https://play.google.com/store/apps/details?id=com.roshan0100.souschef web version: https://sous-chef-web.com/ submitted by /u/Roshan0100 [link] [comments]
- Can I reference tutorials/guides in react for react-native?by /u/Vytaqevo (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 5:23 am
I don't know react but I want to use react-native to build a IOS/Andriod app with django as the back-end. There seems to be a lot more information for react than there is for react-native. I was wondering if I can use concepts from react tutorials in my react-native code. submitted by /u/Vytaqevo [link] [comments]
- Has anyone experienced a white flash on left side of screen while navigating? Any insight on how to fix this?by /u/OverT_97 (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 2:47 am
submitted by /u/OverT_97 [link] [comments]
- Need iOS testersby /u/Glittering-Chard8269 (React Native - Building Native Mobile Apps w/JavaScript) on June 30, 2022 at 1:15 am
I’m the sole developer of an app called Day by Day agenda. A cool app for customers and businesses to interact with each other and schedule appointments with. I need some people to come on there and test the different profiles and the interaction between customers and businesses. Just shoot me a message if you can help me out please! You’ll need TestFlight and I’ll need your dev email so I can send you a link to test it! Thanks! submitted by /u/Glittering-Chard8269 [link] [comments]
- you always remember your firstby /u/mrdanmarks (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 9:57 pm
submitted by /u/mrdanmarks [link] [comments]
- Best way to keep screen from rendering at login.by /u/blackhole_coder (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 7:49 pm
What is the best way to keep screen from rendering when I login to application. I see hundreds of apps out there that do not have to load the user profile every time you log out and back in. Are people using Async Storage? Am I suppose to just cache the data so that the screen doesn’t have to render the data from the API call every time login? What’s best practices? Data does not change often. App like TikTok. How does it look like it doesn’t render? submitted by /u/blackhole_coder [link] [comments]
- Maximum binary size?by /u/marchingbandd (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 5:50 pm
I’m working on a cross platform app in Expo, and i need to bundle very large amounts of audio data into the binary. Is there an upper limit on the size of an app, imposed by Google Play, Apple App Store, RN or Expo? If so what is it, and why is that information so hard to find? submitted by /u/marchingbandd [link] [comments]
- Getting error while running npm install in mobile packageby /u/Java--Developer (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 5:09 pm
Code ERESOLVE While resolving @react-native-async-storage/async-storage@1.15.7 Found: react-nativ @0.66.2 Node js version- 16.15.1 I have tried uninstalling and reinstalling node modules and have also tried installing a lower version of node js. Nothing seems to work. I don’t wnat to force install or —legacy-peer-deeps. Any ideas on how to resolve it? submitted by /u/Java--Developer [link] [comments]
- Using expo-barcode-scanner to read Stacked barcodes in React-Native appby /u/FlavorsOfN00b (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 4:39 pm
Hello! I am currently working on a React Native application that wants to read the barcodes of produce items at the grocery store. The expo-barcode-scanner package works excellently for most barcodes, however a lot of the produce at our local grocery stores uses Stacked barcodes on their stickers, and this does not seem to be recognized by the scanner. My question is, is there something I can leverage within the expo-barcode-scanner package to help remedy this? Failing that, are there other alternatives you could suggest that would help with this particular use case? I have done some research on Google and this doesn't seem to be an issue that comes up much, so I have been unable to find much material discussing it. I have attached an example of the barcode style in question as a visual aid. Below is a link as well with several examples, in case the image didn't come through. https://www.banana-label-catalog.org/nds/catalog/32095-barcode-4011 Thank you for your time, and I appreciate any help you all can offer! submitted by /u/FlavorsOfN00b [link] [comments]
- Best way to share an entire page (UI and logic) between react native apps?by /u/javapyscript (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 3:44 pm
I am working on two react-native apps at the moment, and they both share an entire navigation section (one of the items on the navigation bar at the bottom of the app), say blog. Things I need to consider: Both the apps will have almost the exact page/screen, so it would be beneficial to pull it out and share it across apps. Most of the changes to the page components would be required on both the apps, so this would reduce duplication and maintain consistency. If I consider the entire screen as a complex component and add it to the component library (both UI and logic), this would solve quite a few headaches. However, there is a chance of tiny changes on the screen that would be specific to a single app, and not show them on the other app. This might mean I would end up exposing props on this gigantic component and then letting it seep onto the child components. This could get messy. This also means I would then be dealing with a gigantic potentially inflexible component. Considering all the pros and cons, I am not quite sure if this would be the right way to proceed. Is there a better way of tackling this problem? I could just have the same screen duplicated on both the apps, but this causes the headache of updating both the apps resulting in multiple app store releases. Any suggestions would be really helpful. Thank you. submitted by /u/javapyscript [link] [comments]
- Does onStartShouldSetResponder work on both android and ios?by /u/AlanMax786 (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 12:03 pm
I am using it in View element for update a state. Does it work on both platform submitted by /u/AlanMax786 [link] [comments]
- any working library or other way to creat a blur view?by /u/hafi51 (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 11:59 am
submitted by /u/hafi51 [link] [comments]
- Can anyone tell me what this kinda range picker things is actually called? and do we have any library for React Native?by /u/quadrified (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 11:22 am
submitted by /u/quadrified [link] [comments]
- Best practice for making network call to retrieve user information (e.g. name, email, profile picture, etc.) whenever App starts or comes into foreground?by /u/thegrey_m (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 10:22 am
I am using mobx-state-tree and want to retrieve some information from my database whenever a user opens the App and then save it to the local state so that I can use it across the App. Where is a good place for making this call? This call could technically also run in the background whenever the App comes into the foreground. I thought about using this here https://reactnative.dev/docs/appstate.html along with this code in the useffect in my app.tsx const subscription = AppState.addEventListener("change", (nextAppState) => { if (appState.current.match(/inactive|background/) && nextAppState === "active") { console.log("App has come to the foreground!") const { userStore } = useStores() userStore.retrieveUserInformation() userStore.retrieveUserAvatar() } appState.current = nextAppState }) return () => { subscription.remove() } But this throws an error since I can't use my useStores() hook there. What's considered best practice to make some network calls for retrieving user info on App starts / come into foreground? submitted by /u/thegrey_m [link] [comments]
- The React Native Community Mapby /u/1rv1n3 (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 9:16 am
submitted by /u/1rv1n3 [link] [comments]
- Dynamic field display depending on User IDby /u/Ok-Breadfruit3394 (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 8:23 am
First up- I am not a coder but have a smart developer (freelancer, learning RN on the go) building my app, so please be gentle in your replies 🙂 I am building an app that uses data from the accelerometer. The app MVP is currently built in Android Studio, wanting to move to cross app platform and React Native is on the top of list. Let's say the app has 10 fields that have user input required (not all are mandatory), I have 2-3 different user types, each one needing only a few of the total 10 fields. Can RN facilitate that. We are using Firebase for database, so many we can define user profile? Could be an easy solution or not. Or maybe there is complexity for Android/iOS. In summary, there is a white label app with all the fields but depending on the customer ID, they get to see only selected fields. Is that possible? Thanks in advance... submitted by /u/Ok-Breadfruit3394 [link] [comments]
- Questions about React Nativeby /u/bigmoneyshoota (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 7:31 am
I’m in the process of finding a developer to develop an iOS and Android app for me. One of the developers that caught my eye is one that primarily uses a React Native framework. I’m not a tech guy so my understanding of React Native is pretty surface level, but from what I can gather, developing in React Native would significantly reduce development time for the MVP and subsequent features post-launch, as oppose to developing 2 native apps, because the code is multi-platform. Is my understanding of this correct? Obviously saving where I can early on is imperative to have more runway. If I did decide to go with React Native, how hard would it be to pivot away from it down the line if the app becomes too demanding? I’ve heard it can get slow with feature heavy apps. What about this strategy; I would initially develop the app within the React Native framework to save money early on when it’s most important, then if the app catches on and gets funding, I could have the app rebuilt in Swift & Kotlin and have 2 high quality native apps. Would this make sense? Also, would developing in React Native severely limit who can work on the app? I understand it’s fairly new and isn’t necessarily the industry standard… submitted by /u/bigmoneyshoota [link] [comments]
- Boolean prop vs dot notation, performance wiseby /u/chkml (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 6:49 am
There is a way to write component with different styles that used when Boolean props used. For example: const Text=(props)=><Text style={props.bigText?styles.bigText:null}/>Text</Text> And there is a way with dot notation: const Text= { bigText:(props)=><Text style={props.bigText}/>Text</Text> } Will using the boolean props effect performance if there is many styles to check? Speaking performance wise only, what's the better option? submitted by /u/chkml [link] [comments]
- Revenue Cat - Android Subscriptionsby /u/bullstreet- (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 3:34 am
Hi guys, I am trying to build an in-app purchase (a subscription model) using revenue cat. But Google Play Console is not letting me build subscription models. Do I need to generate a new apk with react-native-purchases package imported in the project? Any advice would be appericiated. Thanks. https://preview.redd.it/994yy1ywch891.png?width=1510&format=png&auto=webp&s=42e82d6eb3be94d7acf8baf6f5f96d932c3df544 submitted by /u/bullstreet- [link] [comments]
- Dynamic TextInput loses focus after each key pressby /u/mrdanmarks (React Native - Building Native Mobile Apps w/JavaScript) on June 29, 2022 at 1:48 am
im having a hard time grasbing how to handle user input. so much so i shared my code on stackoverflow in hopes of finding a solution. https://stackoverflow.com/questions/72794887/understanding-ui-state-dynamic-textinput-loses-focus-after-each-input submitted by /u/mrdanmarks [link] [comments]
- FormidableLabs/react-native-zephyr: TailwindCSS-inspired styling library for React Native.by /u/sebastienlorber (React Native - Building Native Mobile Apps w/JavaScript) on June 28, 2022 at 4:22 pm
submitted by /u/sebastienlorber [link] [comments]
- How could I get this layout to look nicer? It’s just to show basic information about a clubby /u/GorgieRules1874 (React Native - Building Native Mobile Apps w/JavaScript) on June 28, 2022 at 1:51 pm
submitted by /u/GorgieRules1874 [link] [comments]
- Hello Members of r/Reactby /u/GennaroIsGod (React – A JavaScript library for building user interfaces) on January 15, 2021 at 7:58 pm
Theres a new mod in town https://preview.redd.it/xl5wie2exjb61.png?width=220&format=png&auto=webp&s=19367d879f21bf1bd3ef3c2825b8b3568f10b84e Seems as though this sub has gone a little bit without a mod and it seems like it's done pretty well for the most part. But since we're at this point are there any changes about the sub you'd like to see? Hope to interact with all of you 🙂 submitted by /u/GennaroIsGod [link] [comments]