Most of the time this is due to an incorrect export/import. Common error: // File: LeComponent.js export class LeComponent extends React.Component { … } // File: App.js import LeComponent from ‘./LeComponent’; Possible option: // File: LeComponent.js export default class LeComponent extends React.Component { … } // File: App.js import LeComponent from ‘./LeComponent’; There are a … Read more
The goal When the html page is rendered, display a spinner immediately (while React loads), and hide it after React is ready. Since the spinner is rendered in pure HTML/CSS (outside of the React domain), React shouldn’t control the showing/hiding process directly, and the implementation should be transparent to React. Solution 1 – the :empty … Read more
React and ReactDOM were only recently split into two different libraries. Prior to v0.14, all ReactDOM functionality was part of React. This may be a source of confusion, since any slightly dated documentation won’t mention the React / ReactDOM distinction. As the name implies, ReactDOM is the glue between React and the DOM. Often, you … Read more
The pattern that you need to follow depends on your use case. First: You might have a situation where you need to add event listener during the initial mount and clean them up at unmount and another case where a particular listener needs to be cleaned up and re-added on a prop change. In such … Read more
4 steps npm install dotenv –save Next add the following line to your app. require(‘dotenv’).config() Then create a .env file at the root directory of your application and add the variables to it. // contents of .env REACT_APP_API_KEY = ‘my-secret-api-key’ Finally, add .env to your .gitignore file so that Git ignores it and it never … Read more
Try to capitalize ‘app’ like const App = props => {…} export default App; In React, components need to be capitalized, and custom hooks need to start with use.
Redux author here! I’d like to say you’re going to make the following compromises using it: You’ll need to learn to avoid mutations. Flux is unopinionated about mutating data, but Redux doesn’t like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, … Read more
To interact with the box you need to update the state for the checkbox once you change it. And to have a default setting you can use defaultChecked. An example: <input type=”checkbox” defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
If you’re using React 16.3+, the suggested way to create refs is using React.createRef(). class TestApp extends React.Component<AppProps, AppState> { private stepInput: React.RefObject<HTMLInputElement>; constructor(props) { super(props); this.stepInput = React.createRef(); } render() { return <input type=”text” ref={this.stepInput} />; } } When the component mounts, the ref attribute’s current property will be assigned to the referenced component/DOM … Read more
Starting another dispatch before your reducer is finished is an anti-pattern, because the state you received at the beginning of your reducer will not be the current application state anymore when your reducer finishes. But scheduling another dispatch from within a reducer is NOT an anti-pattern. In fact, that is what the Elm language does, … Read more