« React + Vite + TS » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
m (Nicolas a déplacé la page React vers React + Vite + TS)
Ligne 6 : Ligne 6 :
<body>
<body>
     <!-- hosts the React application -->
     <!-- hosts the React application -->
     <div id="app"></div>
     <div id="root"></div>
     <!-- import index.js generated from index.jsx by a bundler such as Snowpack -->
     <!-- import index.js generated from index.jsx by a bundler such as Snowpack -->
     <script type="module" src="/dist/index.js"></script>
     <script type="module" src="/src/main.tsx"></script>
</body>
</body>
</filebox>
</filebox>


<filebox fn='src/index.jsx'>
<filebox fn='src/main.tsx'>
import React from 'react';
import { StrictMode } from 'react'
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client'


ReactDOM.render(
createRoot(document.getElementById('root')!).render(
     <h1>Hello, world!</h1>,
  <StrictMode>
     document.getElementById('app')
     <article>
);
      <h1>My App</h1>
     </article>
  </StrictMode>,
)
</filebox>
</filebox>


<filebox fn='package.json'>
<filebox fn='package.json' collapsed>
{
{
    "scripts": {
  "name": "vite-react-typescript-starter",
      "start": "snowpack dev",
  "private": true,
      "build": "snowpack build"
  "version": "0.0.0",
     },
  "type": "module",
    "dependencies": {
  "scripts": {
      "react": "^17.0.2",
    "dev": "vite",
      "react-dom": "^17.0.2"
    "build": "tsc -b && vite build",
    },
    "lint": "eslint .",
    "devDependencies": {
     "preview": "vite preview"
      "snowpack": "^3.8.8"
  },
     }
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.13",
    "globals": "^15.11.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.10.0",
     "vite": "^5.4.9"
   }
   }
 
}
</filebox>
</filebox>



Version du 25 octobre 2024 à 21:26

Links

Basic App

public/index.html
<body>
    <!-- hosts the React application -->
    <div id="root"></div>
    <!-- import index.js generated from index.jsx by a bundler such as Snowpack -->
    <script type="module" src="/src/main.tsx"></script>
</body>
src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <article>
      <h1>My App</h1>
    </article>
  </StrictMode>,
)
package.json
{
  "name": "vite-react-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.13",
    "globals": "^15.11.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.10.0",
    "vite": "^5.4.9"
  }
}
Bash.svg
# install the NodeJS packages
npm i

# run the app
npm start

Component

src/App.jsx
import React from 'react';

function App() {
    return (
        // one root element
        <article>
            <h1>Recipe Manager</h1>
        </article>
    )
}

export default App;
src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Vite

Snowpack