Example 1 above can be written in pure React.js without JSX as follows: The createElement function is the main function in the React top-level API. It’s 1 of a total of 8 things in that level that you need to learn. That’s how small the React API is. Much like the DOM itself having a document.createElement function to create… Continue reading What the flux is JSX?
Author: Anik Babu
React is all about components
React is designed around the concept of reusable components. You define small components and you put them together to form bigger components. All components small or big are reusable, even across different projects. A React component — in its simplest form — is a plain-old JavaScript function: The curly braces used for the button label… Continue reading React is all about components
Svelte SEO
Svelte SEO is a plugin that makes managing your SEO easier in Svelte projects. Installing Install using yarn: or npm: Add SEO to Page mport Svelte SEO and add the desired properties. This will render out the tags in the <head> for SEO. At a bare minimum, you should add a title and description. Svelte SEO options Property Type… Continue reading Svelte SEO
How To Setup react-spinners .
Installation With npm: Usage Each loader has its own default properties. You can overwrite the defaults by passing props into the loaders. Each loader accepts a loading prop as a boolean. The loader will render null if loading is false. IMPORTANT: This package uses emotion. Remember to add the plugin to .babelrc, for example: Example Available Loaders, PropTypes, and Default Values Common default props… Continue reading How To Setup react-spinners .
svelte-typeahead
nstallation Yarn NPM pnpm Usage SvelteKit set-up To use this component with SvelteKit or vite-powered set-ups, instruct vite to optimize “fuzzy” in your configuration. Styling Note: this component is minimally styled by design. You can target the component using the [data-svelte-typeahead] selector. Basic Pass an array of objects to the data prop. Use the extractor prop to specify the value to search on. Custom-styled results This component uses… Continue reading svelte-typeahead
Svelte notifications
Basic usage Providing custom notification component
Creating your events in Svelet components
What’s interesting is that we can create custom events in components, and use the same syntax of built-in DOM events. To do so, we must import the createEventDispatcher function from the svelte package and call it to get an event dispatcher: Once we do so, we can call the dispatch() function, passing a string that identifies the event (which we’ll use… Continue reading Creating your events in Svelet components
Listening to DOM events in Svelte
In Svelte you can define a listener for a DOM event directly in the template, using the on:<event> syntax. For example, to listen to the click event, you will pass a function to the on:click attribute. To listen to the onmousemove event, you’ll pass a function to the on:mousemove attribute. Here’s an example with the handling function defined inline: and here’s another example with the… Continue reading Listening to DOM events in Svelte
Promises in Svelte Templates
Promises are an awesome tool we have at our disposal to work with asynchronous events in JavaScript. The relatively recent introduction of the await syntax in ES2017 made using promises even simpler. Svelte gives us the {#await} syntax in templates to directly work with promises at the template level. We can wait for promises to resolve, and define a… Continue reading Promises in Svelte Templates
Looping in Svelte Templates
In Svelte templates you can create a loop using the {#each}{/each} syntax: If you are familiar with other frameworks that use templates, it’s a very similar syntax. You can get the index of the iteration using: (indexes start at 0) When dynamically editing the lists removing and adding elements, you should always pass an identifier in lists… Continue reading Looping in Svelte Templates