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:
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.
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.
If there a website or something that list the various plugins or frameworks that can be used fo build a full stack application faster. For instance instead of using jwt and creating authentication from scratch a plug in can be used instead. Another example is say I am building an airbnb clone. Is there a cms or something that allows me to manage properties that includes a database/cms/admin pageall built in one but specific to react js. Just wondering if something similar to woocommerce/wordpress exists for us React js users. submitted by /u/Sea-dante-10 [link] [comments]
Hi, I'm developing an app and I've found a way of displaying MUI's snackbars using Notistack's useSnackbar hook. I've created a hook like so: const useNotification = () => { const [notification, setNotification] = useState<NotificationType | null>(null); const {enqueueSnackbar, closeSnackbar} = useSnackbar(); const action = () => ( <Fragment> <IconButton onClick={() => { closeSnackbar() }}> <CloseIcon/> </IconButton> </Fragment> ); useEffect(()=>{ if (notification){ enqueueSnackbar(notification.description, { variant: notification.type, autoHideDuration: 5000, action }); } },[notification]); return setNotification; } and when I want to display a snackbar I just do: const sendNotification = useNotification(); ... sendNotification({ description: "Signing in failed :(", type: "error" }); which works perfectly fine, but for some unknown reason to me it fails to work after awaiting an async function. For an example, I have a function for logging in, which looks like so: const logIn = async (formData: AccountLoginType) => { try { setIsLogging(true); const { data } = await api.logIn(formData); setToken(data); navigate(Pathnames.public.home); sendNotification({ type: "success", description: "Successfully logged in!" }); } catch (e) { console.error(e); sendNotification({ type: "error", description: "Failed to log in :(" }); return e; } finally { setIsLogging(false); } } api.logIn() function looks like this: export const api = { ... logIn: (formData: AccountLoginType): ApiResponseType<string> => apiForAnon.post("/auth/authenticate", formData), ... } Whenever the api.logIn() fails, the catch block is executed and the error snackbar is displayed as expected, but when it doesn't, then the success snackbar is not displayed. The rest of the code after the await also works fine, but it seems like the setter, which I'm returning from the hook, doesn't do anything after the awaited function. What can be the issue and how can I possibly fix it? If some more context to the code is required, I'll provide it. Thanks in advance and have a great day! submitted by /u/hesh_saih [link] [comments]
submitted by /u/Ordinary_Craft [link] [comments]
Continue reading on Medium »
Hepinize selamlar! React Native ile ilgili genelden özele yolculuğumuza bu içerik ile devam ediyoruz. Bir önceki makalemiz ‘React Native…Continue reading on Medium »
Continue reading on Medium »
Basically the title submitted by /u/KnackOfAbhi [link] [comments]
Hi! The reason behind my question is that I work for a service-based company. Last month, both my colleague and I were interviewed for a position requiring knowledge of Remix and hiring for a frontend role. My colleague was selected, but when they began working on the project, they struggled to keep up due to the extensive backend interactions and concepts. As a result, they replaced them with me after a re-interview, which included a live task completion section. So, my question is, nowadays, many frontend frameworks like Next, Remix, Qwik, etc., are full-stack frameworks. How much backend knowledge is necessary to handle these frameworks effectively, and what specifically do we need to know to understand them better? submitted by /u/Maleficent_Fennel883 [link] [comments]
i am backend developer with django now i am trying to do frontend with React.need suggestions of platform or youtube videos in depth knowledge submitted by /u/Hopeful_Key_6647 [link] [comments]
Photo by Mika Baumeister on UnsplashContinue reading on Medium »
For most people, a satisfactory career is essential for leading a happy life. However, ensuring…
The pipeline industry is more than pipework and construction, and we explore those details in…
SQL Interview Questions and Answers In the world of data-driven decision-making, SQL (Structured Query Language)…
Before you make the decision to switch your home’s interest service provider, take the time…
AI Innovations in April 2024. Welcome to the April 2024 edition of the Daily Chronicle,…