feat (frameworks/react): first complete version

_data/navigation.yml

@@ -32,4 +32,10 @@ pages:
       - title: "Conditional"
         url: /javascript/slides/05-conditional/
       - title: "Loop"
-        url: /javascript/slides/06-loop/
+        url: /javascript/slides/06-loop/
+  - title: React Programming
+    children:
+      - title: "React & JSX"
+        url: /frameworks/react/slides/01-start-jsx/
+      - title: "React Development Environment"
+        url: /frameworks/react/slides/02-environment/

_pages/frameworks/home.md

@@ -5,4 +5,4 @@ permalink: /frameworks/slides/
 
 JavaScript frameworks.
 
-* [React](/frameworks/react/slides/)
+* [React]({{ site.baseurl }}/frameworks/react/slides/)

_pages/frameworks/react/slides/01-start-jsx.md

@@ -61,8 +61,9 @@ CDN - Content Delivery Network
 # First React Program - Script
 
 ~~~js
-const { createRoot } = ReactDOM
-const root = createRoot(document.getElementById('root'))
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+)
 ~~~
 
 ![width:750px](../../../../frameworks/react/slides/images/root.svg)
@@ -72,9 +73,8 @@ const root = createRoot(document.getElementById('root'))
 # First React Program - Script
 
 ~~~js
-const { createElement } = React
 root.render(
-  createElement('h1', null, 'Velocirest')
+  React.createElement('h1', null, 'Velocirest')
 )
 ~~~
 
@@ -91,6 +91,19 @@ root.render(
 
 ---
 
+![width:1000px](../../../../frameworks/react/slides/images/page-code-1.svg)
+
+---
+
+![width:1000px](../../../../frameworks/react/slides/images/page-code-2.svg)
+
+---
+
+
+![width:1000px](../../../../frameworks/react/slides/images/page-code-3.svg)
+
+---
+
 # React with JSX
 
 ~~~js
@@ -113,7 +126,7 @@ root.render(
 </script>
 ~~~
 
-![width:750px](../../../../frameworks/react/slides/images/render-transpiler.svg)
+![width:1000px](../../../../frameworks/react/slides/images/render-transpiler.svg)
 
 ---
 
@@ -127,9 +140,11 @@ root.render(
 
 * [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
 
-* Eloquent JavaScript - https://eloquentjavascript.net/
+* [React createRoot](https://react.dev/reference/react-dom/client/createRoot)
+
+* [React createElement](https://react.dev/reference/react/createElement)
 
-![Eloquent JavaScript](../../../../javascript/slides/images/eloquent-javascript.png)
+* [Eloquent JavaScript](https://eloquentjavascript.net/)
 
 ---
 

_pages/frameworks/react/slides/02-environment.md

@@ -0,0 +1,162 @@
+---
+marp: true
+theme: uncover
+class: invert
+permalink: /frameworks/react/slides/02-environment/
+---
+
+Black & White Series
+
+# React Development Environment
+
+#### Thinking in React
+
+---
+
+<!-- class: lead -->
+
+# React Program in an Environment
+
+Available at: [frameworks/react/3-js-file](https://github.com/santanche/web2learn/tree/master/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](../../../../frameworks/react/slides/images/npm-vite-nodejs.svg)
+
+* 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`
+~~~json
+"dependencies": {
+  "react": "^18.3.1",
+  "react-dom": "^18.3.1"
+},
+~~~
+
+---
+
+# Development Dependencies
+
+`package.json`
+~~~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`
+~~~json
+"scripts": {
+  "dev": "vite",
+  "build": "vite build",
+  "lint": "eslint .",
+  "preview": "vite preview"
+},
+~~~
+
+---
+
+# `vite.config.js`
+
+Specific Vite configurations
+
+~~~js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
+~~~
+
+---
+
+![NPM Install/Run](../../../../frameworks/react/slides/images/npm-install-run.svg)
+
+---
+
+# JSX and Babel Transpiler
+
+~~~html
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+<script  type="text/babel">
+  ...
+</script>
+~~~
+
+![width:1000px](../../../../frameworks/react/slides/images/render-transpiler.svg)
+
+---
+
+# Independent JS File
+
+![width:1000px](../../../../frameworks/react/slides/images/babel-build-1.svg)
+
+---
+
+# Babel via Dev/Building
+
+![width:1000px](../../../../frameworks/react/slides/images/babel-build-2.svg)
+
+---
+
+# Babel via Dev/Building
+
+![width:1000px](../../../../frameworks/react/slides/images/babel-build-2.svg)
+
+---
+
+# References
+
+* [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
+
+---
+
+<!-- class: invert -->
+
+## André Santanchè
+
+www.ic.unicamp.br/~santanch/
+
+## Web2Learn
+
+santanche.github.io/web2learn/

frameworks/react/4-component/.vite/deps_temp_e505eed1/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

frameworks/react/4-component/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>React App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="src/main.jsx" type="module"></script>
+</body>
+</html>