Black & White Series

React Development Environment

Thinking in React

React Program in an Environment

Available at: frameworks/react/3-js-file

Development Environment

  • Registry: download, update, and manage local libraries and coding tools:
    • libraries: React, Bootstrap, Chart, etc.
    • coding tools: transpiler, linter, resolver, etc.
  • Run coding tools:
    • online for testing;
    • batch for deployment.
  • Bundler: connect, pack, and deploy the package or application.

Development Environment

width:500px

  • Registry
  • Run coding tools
  • Bundler

package.json and Environment

  • package.json - records libraries/development dependencies and development task scripts;
  • package-lock.json - a picture of the current setup;

Library Dependencies

package.json

"dependencies": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
},

Development Dependencies

package.json

"devDependencies": {
  "@eslint/js": "^9.8.0",
  ...
  "@vitejs/plugin-react": "^4.3.1",
  "eslint": "^9.8.0",
  ...
  "globals": "^15.9.0",
  "vite": "^5.4.0"
}

Scripts

package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview"
},

vite.config.js

Specific Vite configurations

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

NPM Install/Run

JSX and Babel Transpiler

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script  type="text/babel">
  ...
</script>

width:1000px

Independent JS File

width:1000px

Babel via Dev/Building

width:1000px

Babel via Dev/Building

width:1000px

References

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/