- Jan 2021
-
reactjs.org reactjs.org
-
The alternative is uncontrolled components, where form data is handled by the DOM itself.
-
-
github.com github.com
Tags
Annotators
URL
-
-
thewebdev.info thewebdev.info
-
-
PopupState HelperTo make managing the popover state easier, we can use the material-ui-popup-state library to manage the state.
-
- Dec 2020
-
github.com github.com
-
React abstracts the DOM with functionally pure declarative rendering and provides escape hatches back to mutable imperative DOM land. This is a profound philosophical difference that Rich gave a talk about.
-
It's true that Svelte does not allow you to map over children like React, but its slot API and <svelte:component> provide similarly powerful composition. You can pass component constructors as props and instantiate them with <svelte:component>, and use slots and their let bindings for higher order composition. It sounds like you're thinking in virtual DOM idioms instead of Svelte's.
-
My frustration is mainly from Svelte's choices that are very un-JavaScript-like. It doesn't have to be "like React/Vue". React is React because it doesn't restrict what you can do with JavaScript for the most part. It's just common FP practice to fold/map.
-
- Nov 2020
-
topdigital.agency topdigital.agency
-
In this world of digitization, it is essential that you bring your business to the online platforms. The fact is, React Native is one of the most emerging technologies for developing the best application for your business.
React Native is one of the most emerging technologies for the business. Know how can you hire a React Native developer with less effort.
-
-
github.com github.com
-
For use$ since svelte is never going to support actions for components, i designed something that reminds React hooks that will in some ways replace this feature.
Isn't that what use$ is trying to do already? How is that "something that reminds React hooks" any different? Will be interested to see...
-
-
github.com github.com
-
-
Another difference is that context in Svelte does not insert anything into the visual component tree. There is no <Context.Provider> element like in React
-
In Svelte, all reactive statements are memoized. Instead of const var = useMemo(() => expression, dependencies), you can use $: var = expression. Notice with Svelte, you don't need to declare the dependencies. The compiler infers them for you.
Tags
- port (adaptation/translation)
- examples
- equivalent/analogous/alternative ways to do something between 2 libraries/languages/etc.
- better/superior solution/way to do something
- react: context
- component tree
- react hooks
- concise
- inferred
- React
- Svelte: context
- comparison
- port from another language
- +0.9
- Svelte
Annotators
URL
-
-
www.thinktecture.com www.thinktecture.com
-
Although Capacitor is developed by Ionic, you can use it in combination with any framework and UI library you want. In fact, Capacitor itself promotes using it with whatever framework you want.
-
-
news.ycombinator.com news.ycombinator.com
-
Frontend frameworks are a positive sum game! Svelte has no monopoly on the compiler paradigm either. Just like I think React is worth learning for the mental model it imparts, where UI is a (pure) function of state, I think the frontend framework-as-compiler paradigm is worth understanding. We're going to see a lot more of it because the tradeoffs are fantastic, to where it'll be a boring talking point before we know it.
-
-
-
Today, more and more businesses are inclined towards react native due to the innumerable benefits it offers. React native apps have completely changed the mobile app development process but the performance of the app remains extraordinary as before.
In this article, we will be talking about a few popular react native testing tools that will enhance your development process.
-
-
react-bootstrap.github.io react-bootstrap.github.io
Tags
Annotators
URL
-
- Oct 2020
-
stackoverflow.com stackoverflow.com
-
I use a mutator and use it's changeValue function to 'change' the value of the relevant field (I supply the same value). This in turn notifies all relevant parties of the change to the form's state, and a validation is triggered.
Nearly duplicate annotation here: https://hyp.is/I2t56hjLEeuPXIsZG-jYog/xtzmf.csb.app/
-
Some user experience issue with the proposed solution: This won't show up the inline field error message if you just hit on submit and other fields already contained errors since the code on the onSubmit won't be hit
-
This is for a time picker. If you're picking times for today, you may pick a time that is 15 minutes from now. It's valid now because it's currently in the future. If you don't touch the form for the next 20 minutes then click submit, the submission should be prevented because your selected time is now 5 minutes in the past.
-
-
lemoncode.github.io lemoncode.github.ioFonk1
-
Fonk is framework extension, and can be easily plugged into many libraries / frameworks, in this documentation you will find integrations with:
-
-
www.basefactor.com www.basefactor.com
-
React Final Forms is a great library, an enhanced version of Redux Form
-
Form validation can get complex (synchronous validations, asynchronous validations, record validations, field validations, internationalization, schemas definitions...). To cope with these challenges we will leverage this into Fonk and Fonk Final Form adaptor for a React Final Form seamless integration.
-
-
xtzmf.csb.app xtzmf.csb.app
-
github.com github.com
-
stackoverflow.com stackoverflow.com
-
-
Image a situation wherein you have just launched your app. But the data of your app is not being properly displayed or you are not able to fetch the data that is being entered by the users. What will be the impression of your app in the user’s mind?
Many businesses get confused when it comes to choosing the right database for their application. In fact, it is quite crucial to choose the one between SQLite and Realm.
-
-
-
Presumably this is so that you can import React libraries, even if they depend on ReactDOM, and they will work with Svelte instead.
Reminds me of Wine. IIRC they have some system calls that they just make to be no-ops on Linux.
-
-
react-spectrum.adobe.com react-spectrum.adobe.com
-
Sometimes you might need to use an element other than a native <button>. useButton supports this via the elementType prop. When used with an element other than a native button, useButton automatically applies the necessary ARIA roles and attributes to ensure that the element is exposed to assistive technology as a button.
-
-
github.com github.com
-
const field = state.fields[name] if (field) { field.data = { ...field.data, ...data } }
-
-
final-form.org final-form.org
-
codesandbox.io codesandbox.io
-
codesandbox.io codesandbox.io
-
medium.com medium.com
-
suite of over 30 separate packages of React visualization primitives that fall into several categories (Figure 2). It is un-opinionated on state management, animation, and styling so it can integrate with any React codebase, and its emphasis on modularity (similar to D3) lets you keep your bundle sizes down by only using the packages you need to create your reusable chart library or a custom one-off chart.
Short definition of visx
-
In our research (Figure 1), we found that existing React visualization libraries are often high-level abstractions and optimized for ease of use (i.e., fewer lines of code) at the expense of expressivity. None offer the expressivity of D3 primitives and many don’t allow for the optimization we want in production because computation, animations, state management, styles, and rendering are all encapsulated.
Comparison of data visualisation libraries:
-
because D3 and React both want to own DOM manipulation, we’ve found that it’s best to only use D3 for the math and React for the DOM because two mental models for updating the DOM opens the door for bugs to sneak in. However, using D3 solely for math means a significant amount of its (DOM-based) functionality is not available for use: selection.join, zoom, drag, brush, and transitions. Additionally, as mentioned above, D3 has its own learning curve and we would like developers to feel like they are writing native React code with standard APIs and familiar patterns.
You can use D3 inside a React app, but...
-
Leveraging React and its ecosystem would provide learnability and performance, and a low-level, modular API would deliver expressivity.
Thanks to React, visx achieved all: learnability, performance and expressivity
-
-
codesandbox.io codesandbox.io
-
-
stackoverflow.com stackoverflow.com
-
You should not create a new debounce function on every render with: return new Promise(resolve => { debounce(() => resolve(this.getIsNameUnique(name)), 2000); }); Instead you should just wrap your whole function isNameUnique with the debounce (see my sandbox). By creating a new debounce function on every hit, it cannot 'remember' that is was called or that is will be called again. This will prevent the debouncing.
-
-
codesandbox.io codesandbox.io
-
formvalidation.io formvalidation.io
-
FormValidation can be used with popular JavaScript frameworks such as React, Preact, Vue, Svelte, etc.
-
-
-
mixing the turing complete of javascript with the markup of HTML eliminates the readability of JSX so that it is actually harder to parse than a solution like hyperscript
-
I'm personally open to any other solutions, especially in how we might be able to untie from React, but, for now, inline-XML markup (JSX) is OK with me.
-
I've recently started playing with segmentio/deku, an alternative to React, and I'm also using Babel to transpile my js and jsx code.
Tags
- hyperscript
- react-hyperscript
- alternative to mainstream way
- good point
- hybrid/mixture
- comparison with:
- decoupled
- Turing complete
- JavaScript
- React
- JSX
- separation of concerns
- transpiling
- Deku
- alternative to:
- bad combination/mixture/hybrid/frankenstein
- missing out on the benefits of something
Annotators
URL
-
-
github.com github.com
-
JSX remains dominant syntax for React. Still, pretty cool. And inspiration for svelte-hyperscript probably?
-
-
Hyperscript syntax for React.js markup
-
-
github.com github.com
-
-
In React 0.12 time frame we did a bunch of small changes to how key, ref and defaultProps works. Particularly, they get resolved early on in the React.createElement(...) call. This made sense when everything was classes, but since then, we've introduced function components. Hooks have also make function components more prevalent. It might be time to reevaluate some of those designs to simplify things (at least for function components).
-
In the next major, we'll start copying the ref onto both the props and the element.ref. React will now use the props.ref as the source of truth for forwardRef and classes and it will still create a shallow copy of props that excludes the ref in these cases. At the same time, we'll add a getter for element.ref in DEV that warns if you access it. The upgrade path is now to just access it off props if you need it from the element.
-
This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef.
-
-
github.com github.com
-
For event listeners we support the standard jsx naming convention onEventname (this is converted to on:eventname in svelte) as well.
-
-
2ality.com 2ality.com
-
Facebook’s React has an optional language extension that enables you to embed HTML inside JavaScript. This extension can make your code more concise, but it also breaks compatibility with the rest of the JavaScript ecosystem. ECMAScript 6 will have template strings [1], which enable you to implement JSX (or something close to it) inside the language.
-
-
www.npmjs.com www.npmjs.comhyperx1
-
hyperx(React.createElement)
Tags
Annotators
URL
-
-
reactjs.org reactjs.org
-
Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term “virtual DOM” is usually associated with React elements since they are the objects representing the user interface
-
-
github.com github.com
-
Deku is a library for rendering interfaces using pure functions and virtual DOM.
-
-
medium.com medium.com
-
Then at some moment I just stumbled upon limitations and inexpressiveness of templates and started to use JSX everywhere — and because JSX was not a typical thing for Vue I switched to React over time. I don’t want to make a step back.
-
There is a killer feature of vDOM that Svelte has nothing to replace with. It is the ability to treat component hierarchy as an object.
-
-
docs.google.com docs.google.com
-
But it’s really hard to see, because our human brains struggle to think about this Clock function as something for generating discrete snapshots of a clock, instead of representing a persistent thing that changes over time.
-
-
github.com github.com
-
Typically, unified compilers return string. This compiler returns a ReactElement.
Tags
Annotators
URL
-
-
codesandbox.io codesandbox.io
-
github.com github.com
-
They even named the main file
react.js
so when converting/migrating components from React you could (at least some of the time, perhaps) simply leave some of the imports as-is:import {createHooks, useRef} from './react';
-
-
dylanvann.com dylanvann.com
-
To fix our Svelte version you might think we could use beforeUpdate or afterUpdate, but these lifecycle functions are related to the DOM being updated, not to prop updates. We only want to rerun our fetching when the album prop is changed.
-
-
recoiljs.org recoiljs.org
-
Context can only store a single value, not an indefinite set of values each with its own consumers.
-
We want to improve this while keeping both the API and the semantics and behavior as Reactish as possible.
-
Recoil defines a directed graph orthogonal to but also intrinsic and attached to your React tree.
-
Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render.
-
For reasons of compatibility and simplicity, it's best to use React's built-in state management capabilities rather than external global state.
-
-
github.com github.com
-
I think Svelte has some things to learn from React hooks.
-
While react hooks were one of the catalysts for v3 we don't agree with with the APIs or the model and won't be emulating it.
-
-
reactjs.org reactjs.org
-
Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
-
-
testing-library.com testing-library.com
-
You want to write maintainable tests that give you high confidence that your components are working for your users. As a part of this goal, you want your tests to avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.
key point. I think that this also means that NOT using data-testid is better since this is "testing library" specific attribute and 'binds' us to testin-library
-
-
www.robinwieruch.de www.robinwieruch.de
-
we are using RTL's findBy search variant to wait for element(s) which appear eventually.
see above - this is how you'd wait async to grab the element you need
-
For any element that isn't there yet but will be there eventually, use findBy over getBy or queryBy. If you assert for a missing element, use queryBy. Otherwise default to getBy
key point: summary of getBy, queryBy and findBy
-
The neat thing about getByRole: it shows all the selectable roles if you provide a role that isn't available in the rendered component's HTML:
pass no arguments and it will list all available roles in the element you passed to it (including implicit roles)
-
// recommended
notice that this is the recommended practice
-
Whereas the describe-block is the test suite, the test-block (which also can be named it instead of test) is the test case. A test suite can have multiple test cases and a test case doesn't have to be in a test suite. What you put into the test cases are called assertions (e.g. expect in Jest) which either turn out to be successful (green) or erroneous (red). Here we have two assertions which should turn out successful:
Key point explaining key basic terms in React testign world
Tags
Annotators
URL
-
-
github.com github.com
-
In general it is recommended you handle forms in this "controlled" manner. In some cases it might make sense to manage the form state outside of Solid via refs. These "uncontrolled" forms can also work. Just be conscious of the difference as mixing approaches can lead to unexpected results.
-
So while Solid's JSX and might resemble React it by no means works like React and there should be no illusions that a JSX library will just work with Solid. Afterall, there are no JSX libraries, as they all work without JSX, only HyperScript or React ones.
-
-
github.com github.com
-
Remember even though the syntax is almost identical, there are significant differences between how Solid's JSX works and a library like React.
Tags
Annotators
URL
-
-
-
Solid supports most React features like Fragments, Portals, Context, Suspense, Error Boundaries, Lazy Components, Async Rendering, Implicit Event Delegation, SSR
-
-
-
I used them a bit and realized almost immediately they felt like a leaky abstraction.
-
-
-
There's one downside to Reacts reactivity model - the hooks (useState and useEffect) have to always be called in the same order and you can't put them inside an if block.
-
It's possible to run a function whenever some reactive state changes using the useEffect hook. In the example we log the length of the todoList whenever it changes. The first argument to useEffect is the function we want to run, and the second is a list of reactive values to track - whenever one of these values changes the effect will run again.
-
MobX - for me personally MobX is a far better way to manage state than React Hooks. It doesn't care about the UI layer so it can be used outside the React ecosystem, and it's simple to mutate data.
-
derived values are simple to declare
-
Solid is a declarative JavaScript library for creating user interfaces. It's kinda like if React and Svelte had a baby.
-
-
codesandbox.io codesandbox.io
-
Is that expected behavior or am I doing something wrong?
-
-
codesandbox.io codesandbox.io
-
even simpler example than the https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/simple?from-embed=&file=/index.js it was based on
-
-
github.com github.com
-
codesandbox.io codesandbox.io
-
This demonstrates how FieldArray re-renders (field subscription fires) even when changing unrelated field. Wat?
-
-
github.com github.com
-
This library exports a single React Hook, useMethods, which has all the power of useReducer but none of the ceremony that comes with actions and dispatchers.
-
- Sep 2020
-
codesandbox.io codesandbox.io
-
Although, meta.valid works, meta.active, meta.dirty, meta.touched, meta.visited never change from false.
See also: https://github.com/final-form/react-final-form-arrays/issues/147
-
-
final-form.org final-form.org
-
Keep in mind that the values in meta are dependent on you having subscribed to them with the subscription prop.
-
-
final-form.org final-form.org
-
useField() returns FieldRenderProps. It will manage the rerendering of any component you use it in, i.e. the component will only rerender if the field state subscribed to via useField() changes.
-
-
codesandbox.io codesandbox.io
-
svelte.dev svelte.dev
-
for example, reactive declarations essentially do the work of React's useMemo, useCallback and useEffect without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
-
-
github.com github.com
-
urql is a GraphQL client that exposes a set of helpers for several frameworks.
-
One package to get a working GraphQL client in React, Preact, and Svelte
-
-
stackoverflow.com stackoverflow.com
-
This is the same as useEffect in React, incidentally — the function must be synchronous in order to avoid race conditions.
-
-
github.com github.com
-
I think Svelte's approach where it replaces component instances with the component markup is vastly superior to Angular and the other frameworks. It gives the developer more control over what the DOM structure looks like at runtime—which means better performance and fewer CSS headaches, and also allows the developer to create very powerful recursive components.
-
-
github.com github.com
-
Since one of Svelte's main principles is reacting only to data changes (as opposed to re-render the whole app with the full state all the time)
-
Re Object.keys(undefined), I think I'm ok with that failing. AFAIK it would also fail in React
-
The more I think about this, the more I think that maybe React already has the right solution to this particular issue, and we're tying ourselves in knots trying to avoid unnecessary re-rendering. Basically, this JSX... <Foo {...a} b={1} {...c} d={2}/> ...translates to this JS: React.createElement(Foo, _extends({}, a, { b: 1 }, c, { d: 2 })); If we did the same thing (i.e. bail out of the optimisation allowed by knowing the attribute names ahead of time), our lives would get a lot simpler, and the performance characteristics would be pretty similar in all but somewhat contrived scenarios, I think. (It'll still be faster than React, anyway!)
-
-
final-form.org final-form.org
-
medium.com medium.com
-
-
-
tip no 8. API should be explicit!
Optional props (which are not used) make the component less reusable.
In my opinion, the API of a component should match strictly the values that are used. If the prop is a large object in which only a subset of of properties are used, then it is better to restrict the API to those set of properties.
-
-
react-spectrum.adobe.com react-spectrum.adobe.com
-
This is similar to the :focus-visible pseudo class in CSS.
-
-
react-spectrum.adobe.com react-spectrum.adobe.com
-
github.com github.com
-
In general, I'm unpersuaded by these arguments (learning curve is determined not just by unfamiliar syntax, but by unfamiliar semantics and APIs as well, and the frameworks in question excel at adding complexity in those areas).
-
-
blog.carbonfive.com blog.carbonfive.com
-
Like with React, you can pass in callback props like onSave and onDelete, which is the main way you send data out of a component to a parent.
-
$: declares a relationship, where remaining should always be 10 - count. This might seem weird, but it’s conceptually the same as declaring a variable that you know will be re-calculated in every React render loop — except that remaining will get recalculated only when count changes.
-
-
stackoverflow.com stackoverflow.com
-
My solution idea is just to let the compiler knows that rest is of type T, using a custom type guard function, but you could use other approaches, like a type casting: <Child {...((rest as unknown) as T)} />
-
-
www.pluralsight.com www.pluralsight.com
-
docs.google.com docs.google.com
-
I’ve seen some version of this conversation happen more times than I can remember. And someone will always say ‘it’s because you’re too used to thinking in the old way, you just need to start thinking in hooks’.
But after seeing a lot of really bad hooks code, I’m starting to think it’s not that simple — that there’s something deeper going on.
-
-
daveceddia.com daveceddia.com
-
With useEffect, you can handle lifecycle events directly inside function components. Namely, three of them: componentDidMount, componentDidUpdate, and componentWillUnmount. All with one function!
-
-
github.com github.com
Tags
Annotators
URL
-
-
github.com github.com
Tags
Annotators
URL
-
-
github.com github.com
-
Opposite/reverse of (yet analogous to): https://github.com/Rich-Harris/react-svelte/
Tags
Annotators
URL
-
-
www.codingwithjesse.com www.codingwithjesse.com
-
In most component frameworks, you need to write some code to define your component. With React, the simplest component is an empty function. In other frameworks, you need to import a library and call a special function to define and create your component. With Svelte, you just create a new .svelte file.
If you compare these two:
- With React, the simplest component is an empty function.
- With Svelte, you just create a new .svelte file.
Creating a new empty function is actually easier/faster than creating and importing a new file. Because you don't have to create a new file just to create a new one-line component. You can create simple helper components within the same file as the main component they help with, and sometimes it is nice to have the flexibility and freedom to compose your files however you want, including the freedom to group multiple closely related components together in the same file.
In fact one thing I've sometimes found very useful and handy is to be able to define very simple helper components (functions) within the definition of my main component.
So I would actually put this comparison in the "win" category for React, not Svelte.
-
-
stackoverflow.com stackoverflow.com
-
I don't think componentDidRender is a substitute for componentDidMount because the component can render multiple times when props change after it's mounted once.
-
React is an isomorphic/universal framework. That means that there is a virtual representation of the UI component tree, and that is separate from the actual rendering that it outputs in the browser.
-
This process of creating instances and DOM nodes corresponding to React components, and inserting them into the DOM, is called mounting.
-
-
svelte.dev svelte.dev
-
The previous example contained a default slot, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this <ContactCard>. In those cases, we can use named slots.
This is a nicer solution than react children props, which is only clean if you pass in a single child.
The React children prop is an unregulated wild west where people are free to use the prop almost any way they want (including passing in a function).
I kind of like how Svelte provides a standard, consistent API, which doesn't have the limitations of React childern.
-
-
-
Q7. What are controlled components?In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it's state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. A form element whose value is controlled by React in this way is called a "controlled component".With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input.
In classical HTML form components such as <input> or <textarea> maintain their own state, which gets sent somewhere upon submission of the form.
React keeps track of the form's state inside a component and will re-render the component when the state changes. This can be listened to by subscribing to the onChange callback function.
-