Skip to content

project_setup_summary.md

Latest commit

 

History

History
53 lines (37 loc) · 2.69 KB

project_setup_summary.md

File metadata and controls

53 lines (37 loc) · 2.69 KB
Raw

Summary: Minimal React Project Setup

Here is a step-by-step guide detailing how you set up this project.

Part 1: Initial React Project Setup with Vite

  1. Project Structure:

    • Created a root index.html file to serve as the application's entry point.
    • Created a src directory for the React source code.

  2. Core React Files:

    • src/Counter.jsx: A simple React component with state (useState) to manage a counter.
    • src/Main.jsx: The main file that renders the Counter component into the div#main element in index.html using ReactDOM.createRoot.

  3. Dependencies (package.json):

    • Added react and react-dom as core dependencies.
    • Added vite and @vitejs/plugin-react as development dependencies to build and serve the project.

  4. Scripts (package.json):

    • Added a "dev": "vite" script to start the development server.

Part 2: Adding a Code Formatter (Prettier)

  1. Installation:

    • Added prettier as a development dependency to your package.json.

  2. Configuration (.prettierrc):

    • Created a .prettierrc file in the project root.
    • Configured it with your preferences (e.g., "useTabs": true).

  3. Scripts (package.json):

    • Added a "format" script (prettier . --write) to automatically format all files.
    • Added a "format:check" script (prettier . --check) to check for formatting issues without modifying files.

  4. Ignoring Files (.prettierignore):

    • Created a .prettierignore file in the root.
    • Added entries like node_modules, dist, and package-lock.json to prevent Prettier from formatting files that should not be touched.

Part 3: Adding a Code Linter (ESLint) and Integrating with Prettier

  1. Installation:

    • Added eslint, @eslint/js, eslint-plugin-react, and globals as development dependencies.

  2. Configuration (eslint.config.mjs):

    • Created a modern eslint.config.mjs (flat config) file.
    • Configured it to use recommended rules for JavaScript (js/recommended) and React (pluginReact.configs.flat.recommended).

  3. ESLint + Prettier Integration:

    • Purpose: To prevent conflicts between ESLint's code style rules and Prettier's formatting.
    • Installation: Added eslint-config-prettier as a development dependency.
    • Configuration: Updated eslint.config.mjs by importing eslint-config-prettier and adding it as the very last item in the configuration array. This turns off all ESLint rules that would conflict with Prettier.

By following these steps, you created a robust, minimal React project with professional-grade tooling for formatting and linting.