React

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

written tutorial - useRef hook in React
27 Jul, 2022
useRef hook in React
React
The useRef Hook allows you to persist values between renders. First example would be to use the hook to update values without causing the component to re-render.
snippet - useEffect hook in React
26 Jul, 2022
useEffect hook in React
React
React hook useEffect is used in functional components to implement life-cycle callbacks. The Effect Hook lets you perform side effects in function components, but some people argue that DOM events...
snippet - useState hook in React
25 Jul, 2022
useState hook in React
React
useState is a hook what you use in a React function to create a state variable. This is not used if you use React class components. useState has tricks you must know about.
snippet - Show Logo image on AppBar in Material UI
18 Jun, 2022
Show Logo image on AppBar in Material UI
React
Most sites or apps show a logo on the left corner of the screen. In Material ui there is AppBar component. The official examples don't have this snippet. Link to the official documentation: https://...
snippet - React Semantic UI: Simple drag and drop file field
23 Nov, 2019
React Semantic UI: Simple drag and drop file field
React
An example of a simple dropzone using Semantic UI. Is achieved by using "react-dropzone", which does not provide theming.
snippet - React: Address Search using Google Places API
23 Nov, 2019
React: Address Search using Google Places API
React
This snippet shows you how you can use google places api in react to create address autocomplete dropdown. There are other service providers than google, but google supports business names in...
snippet - React: reset state when you click current menu router
19 Nov, 2019
React: reset state when you click current menu router
React
Use this snippet when you have created a menu using BrowserRouter from 'react-router-dom' and you need to reset the state when you click on the current menu item (same url path as you are currently...
snippet - React file upload using FormData and fetch.
13 Nov, 2019
React file upload using FormData and fetch.
React
You can create input fields or use libraries like react-dropzone in React very easily. You still need to get the files from the form and send them to backend for saving. This snippet is the upload...
snippet - Append a file to FormData from file input in React ES6
8 Oct, 2019
Append a file to FormData from file input in React ES6
React
You can use FormData to send form data using AJAX, including files. This is for you if you have to manually add files, you don't take them from a form, for some reason. This snippet is a react...
snippet - Get filename from file type input in React ES6
2 Oct, 2019
Get filename from file type input in React ES6
React
Get file name from file input and save it into state. You might need to use this when you hide your html file input and use button or some other element to trigger the click on the file input.
snippet - Get FormData using ref in React ES6
1 Oct, 2019
Get FormData using ref in React ES6
React
Get form data using ref attribute on form tag. This could be useful in some cases. The error that I was tackling before I found this solution: "Uncaught TypeError: Failed to construct 'FormData':...
snippet - Simple file field with React Semantic UI
24 Sep, 2019
Simple file field with React Semantic UI
React
Snippet of a simple file field with original Semantic UI for React. Semantic UI is still missing a file field component. Other solution would be to use react-dropzone for creating a dropzone.
snippet - React, Semantic UI and DataTables.net
27 Aug, 2019
React, Semantic UI and DataTables.net
React
Working example of Semantic UI variation of "DataTables.net" on ES6 variation of React.
snippet - ERROR in Entry module not found: Error: Can't resolve './src' in '/var/www/your-project'
8 Jul, 2019
ERROR in Entry module not found: Error: Can't resolve './src' in '/var/www/your-project'
React
When you get this error from your webpack project "ERROR in Entry module not found: Error: Can't resolve './src' in '/var/www/your-project'", you have probably used application directory different...
written tutorial - React ES6: Styled Components
6 Oct, 2018
React ES6: Styled Components
React
Styled components are the best way to give some visual aid to your components. The heavy lifting should be done by a library, it can be either material design, bootstrap, semantic, etc... To adjust...
snippet - React: Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`
25 Jul, 2017
React: Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`
React
Testing React components with Jest I got an error: "Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.". I am using Link from react-...
snippet - React: Wait for full render in snapshot testing
5 May, 2017
React: Wait for full render in snapshot testing
React
If you use full render not shallow in your tests, your tests might be rendered before the actual component and its subcomponents are fully loaded. In that case you need to delay the output, while...