New Projects

new project with create-react-app

create-react-app with TypeScript and full tests and react.

shell

npx create-react-app my-app --template typescript

To make jest work right with create-react-app and typescript, add this to the package.json file:

json

"jest": {
  "transformIgnorePatterns": [
  ]
}

new project with vite

The create-react-app tool is deprecated. For a similar experience I use Vite.

New react + typescript project with create and follow the prompts.

shell

npm create vite@latest react-ts my-app-name -- --template react-ts

Input

focus

There is not a specific api to control focus in React, so there are a few ways to handle this. If you want an input to grab the focus when it first renders set the autoFocus attribute.

jsx

<input autoFocus={true} value={"this item will be auto focused"}>

Explicitly set the focus using a ref to grab the underlying DOM element.

jsx


const ref = useRef<HTMLInputElement>(null);

<button onClick={() => {
    ref.current?.focus()
}}>focus the input</button>

<input ref={ref} value={}

Or use a 3rd party lib to manage focus.