commit 8f13dec0e4d9d6053621786cb5d784b8f43014b8 Author: Daniel Heras Quesada Date: Wed Sep 4 08:55:39 2024 +0200 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..38d7344 --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +# Local +.DS_Store +*.local +*.log* + +# Dist +node_modules +dist/ + +# IDE +.vscode/* +!.vscode/extensions.json +.idea diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..ac66857 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# Lock files +package-lock.json +pnpm-lock.yaml +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..37b1dd3 --- /dev/null +++ b/README.md @@ -0,0 +1,29 @@ +# Rsbuild Project + +## Setup + +Install the dependencies: + +```bash +pnpm install +``` + +## Get Started + +Start the dev server: + +```bash +pnpm dev +``` + +Build the app for production: + +```bash +pnpm build +``` + +Preview the production build locally: + +```bash +pnpm preview +``` diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..f7941e0 Binary files /dev/null and b/bun.lockb differ diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..8825526 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,31 @@ +import { fixupConfigRules, fixupPluginRules } from '@eslint/compat'; +import js from '@eslint/js'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactJsx from 'eslint-plugin-react/configs/jsx-runtime.js'; +import react from 'eslint-plugin-react/configs/recommended.js'; +import globals from 'globals'; +import ts from 'typescript-eslint'; + +export default [ + { languageOptions: { globals: globals.browser } }, + js.configs.recommended, + ...ts.configs.recommended, + ...fixupConfigRules([ + { + ...react, + settings: { + react: { version: 'detect' }, + }, + }, + reactJsx, + ]), + { + plugins: { + 'react-hooks': fixupPluginRules(reactHooks), + }, + rules: { + ...reactHooks.configs.recommended.rules, + }, + }, + { ignores: ['dist/'] }, +]; diff --git a/package.json b/package.json new file mode 100644 index 0000000..7b0d9c4 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "react-renders", + "private": true, + "version": "1.0.0", + "scripts": { + "build": "rsbuild build", + "dev": "rsbuild dev --open", + "format": "prettier --write .", + "lint": "eslint .", + "preview": "rsbuild preview" + }, + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@eslint/compat": "^1.1.1", + "@eslint/js": "^9.9.1", + "@rsbuild/core": "1.0.1-rc.0", + "@rsbuild/plugin-react": "1.0.1-rc.0", + "@types/react": "^18.3.4", + "@types/react-dom": "^18.3.0", + "eslint": "^9.9.1", + "eslint-plugin-react": "^7.35.0", + "eslint-plugin-react-hooks": "^4.6.2", + "globals": "^15.9.0", + "prettier": "^3.3.3", + "typescript": "^5.5.2", + "typescript-eslint": "^8.2.0" + } +} diff --git a/rsbuild.config.ts b/rsbuild.config.ts new file mode 100644 index 0000000..c9962d3 --- /dev/null +++ b/rsbuild.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [pluginReact()], +}); diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..164c0a6 --- /dev/null +++ b/src/App.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.content { + display: flex; + min-height: 100vh; + line-height: 1.1; + text-align: center; + flex-direction: column; + justify-content: center; +} + +.content h1 { + font-size: 3.6rem; + font-weight: 700; +} + +.content p { + font-size: 1.2rem; + font-weight: 400; + opacity: 0.5; +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..994fa78 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,12 @@ +import './App.css'; +import { Parent } from './children-render/parent'; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; diff --git a/src/children-render/children.tsx b/src/children-render/children.tsx new file mode 100644 index 0000000..ace5078 --- /dev/null +++ b/src/children-render/children.tsx @@ -0,0 +1,13 @@ +type ChildrenProps = { + counter: number; +}; + +export const Children = (props: ChildrenProps) => { + console.log('__children render'); + return ( +
+
I'm its child
+

My counter is {props.counter}

+
+ ); +}; diff --git a/src/children-render/parent.tsx b/src/children-render/parent.tsx new file mode 100644 index 0000000..4839186 --- /dev/null +++ b/src/children-render/parent.tsx @@ -0,0 +1,24 @@ +import { useState } from 'react'; +import { Children } from './children'; + +export const Parent = () => { + console.log('__parent render'); + const [counter, setCounter] = useState(0); + const [childrenCounter, setChildrenCounter] = useState(0); + + return ( +
+

I'm the parent

+ + +
+
These are my children
+ +
+
+ ); +}; diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..b0ac762 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..55f29bf --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const rootEl = document.getElementById('root'); +if (rootEl) { + const root = ReactDOM.createRoot(rootEl); + root.render( + + + , + ); +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..6fe0027 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["DOM", "ES2020"], + "module": "ESNext", + "jsx": "react-jsx", + "noEmit": true, + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true, + "allowImportingTsExtensions": true + }, + "include": ["src"] +}