You can translate the content of this page by selecting a language in the select box.
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.
If you are looking for an all-in-one solution to help you prepare for the AWS Cloud Practitioner Certification Exam, look no further than this AWS Cloud Practitioner CCP CLFC01 book below.
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.
- Getting Started With React Nativeby Muhammad Faheem Muhammadi (Reactnative on Medium) on February 2, 2023 at 3:32 pm
Understand and build your first React Native ApplicationContinue reading on Medium »
- How to best subscribe to a Websocket and Handle it's events with access current state?by /u/Maertu (React – A JavaScript library for building user interfaces) on February 2, 2023 at 3:21 pm
Hi guys, I am a bit lost with something I would assume to be easy 😀 The problem I subscribe to a websocket (Firebase) in useEffect (with empty dependecy array). Whenever new events are emitted by the websocket, I would like to do some mutations based on the current state of this component. Unfortunately as I have an empty dependecy array, I will only get the initial states and not the updated ones. So I do not have access to the current state. What I tried: Adding the states to the dependency array. This would solve it, but i do not want to re-subscribe every time the state is changed, I want this to only be done once! Looked up the react-docs (beta, love them). There I found a potential new Hook that may get introduced useEffectEvent(). But it's not available as of now. Switch over to refs. This actually would work I guess, but I am very insecure if that's really the way to do it. Soo..., what the hell am I missing out here? I expected this to be pretty common use-case? How you guys subscribe to websockets while still have access to current state? submitted by /u/Maertu [link] [comments]
- RN Debugging, specifically API calls/Network logby /u/KleinBottl (React Native - Learn once, write anywhere.) on February 2, 2023 at 3:20 pm
I am a FE dev I work on a React PWA used internally by my company's employees. They have decided to swap to a RN app on iOS instead of continuing the PWA. Very suddenly I am now a RN developer 🙂 RN itself is still React for the most part, so I am having no issues adapting to the UI code and JS. However, debugging is a mess. We used a contractor team to build a RN app that is mostly 1:1 with the features of our PWA. However debugging does not seem to be part of their process. I am getting different information and they can't seem to give me any real answers. Most common refrain is "use console logs" Particularly I am having trouble getting 2 main debugging tools working: React Dev Tools (for component tree) and Network logs (for API calls). Most information online recommends Flipper, which honestly has everything I need. However we are using firebase, which requires the use_frameworks options in our podfile and with this enabled we cannot enable flipper. We have Hermes set up, and I can use hermes with Chrome to access console logs, redux dev tools, source files, etc. However there is no Network tab. Using flipper I can access Hermes and again see console logs, but nothing shows up in the network logs. I can also access React Dev tools through flipper, but this usually results in Flipper throwing an error.. How can I access network logs of a RN app through the Hermes/the chrome inspector? Also, React Dev tools? submitted by /u/KleinBottl [link] [comments]
- React Native Radio Fake Newsby Gant Laborde (Reactnative on Medium) on February 2, 2023 at 3:16 pm
An AI made this Podcast EpisodeContinue reading on Red Shift »
- Speeding up tables development in Reactby Álvaro Cuevas (React on Medium) on February 2, 2023 at 3:14 pm
In this article you will be able to quickly implement a dynamic table using the trendy React Table library.Continue reading on Medium »
- How often builds are assembled for test purposes ?by /u/Medical-Text9840 (React Native - Learn once, write anywhere.) on February 2, 2023 at 3:08 pm
My question is how often you assemble builds for test flight and for test in android I'm actually working in a company and this is too strange because they are asking for a build every 2 or 3 days or a week, is it normal ? How other companies work ? I worked in a company where we assembled build in the end of every sprint. I mean this is too strange for me especially with the difficulties to assemble a build and errors that can appear and wasting time in parallel with other tasks. Only because we fixed some minor bug. I have also a question who decides when can the build assembled ? I think développers but builds are decided by the project manager Like can we assemble build tomorrow without giving time to front fro testing or time to do things the right way submitted by /u/Medical-Text9840 [link] [comments]
- Journey Continues…by Lokeshvasnik (React on Medium) on February 2, 2023 at 3:06 pm
Here are we again after some decades I came to know about a language called python as I already mentioned that I was learning the language…Continue reading on Medium »
- Did You Know The Benefits of Using React Native for Mobile App Development?by IMSSA (React on Medium) on February 2, 2023 at 2:58 pm
React Native is a popular framework for building mobile apps that allow developers to use JavaScript and React to create native apps for…Continue reading on Medium »
- Did You Know The Benefits of Using React Native for Mobile App Development?by IMSSA (Reactnative on Medium) on February 2, 2023 at 2:58 pm
React Native is a popular framework for building mobile apps that allow developers to use JavaScript and React to create native apps for…Continue reading on Medium »
- Optimizing Your React App with useCallback: A Beginner’s Guideby Rahul Rawat (React on Medium) on February 2, 2023 at 2:52 pm
Re-renders are a common performance barrier in React apps and happen whenever a component’s state or properties change. By enabling you to…Continue reading on Medium »
