Controlled Forms in React Setup

Setup

Open your Terminal application and navigate to your ~/code/ga/lectures directory:

cd ~/code/ga/lectures

Create a new Vite project for your React app:

npm create vite@latest

You’ll be prompted to provide a project name. vite-project is the default, but when you start typing that default will go away. Choose a name that makes sense for the project; in this case, we’ll call the app controlled-forms-in-react.

• Select a framework. Use the arrow keys to choose the React option and hit Enter.

• Select a variant. Again, use the arrow keys to choose JavaScript and hit Enter.

Navigate to your new project directory and install the necessary dependencies:

cd controlled-forms-in-react
npm i

Open the project’s folder in your code editor:

code .

Configuring ESLint

Before we begin, we need to adjust the ESLint configuration. Add the indicated rules to the rules object in your eslint.config.js file:

    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'react/prop-types': 'off', // add this line
      'react/no-unescaped-entities': 'off', // add this line
    },

The first addition prevents warnings if you don’t declare types for your props (which we’re not), and the second prevents warnings if you use contractions within JSX.

Update App.jsx

Open the App.jsx file in the src directory and replace the contents of it with the following:

// src/App.jsx

import './App.css'

const App = () => {
  return (
    <h1>Hello world!</h1>
  );
};

export default App;