feat (framework/react): first version of React basics

santanche · Aug 23, 2024 · 08e38e5 · 08e38e5
1 parent 7e1e9d1
commit 08e38e5
Show file tree

Hide file tree

Showing 14 changed files with 1,342 additions and 1,656 deletions.
diff --git a/_pages/README.md b/_pages/README.md
@@ -10,4 +10,8 @@ npx marp --pdf -I web/slides/ -o ../web/slides/ --allow-local-files
 
 ~~~
 npx marp --pdf -I javascript/slides/ -o ../javascript/slides/ --allow-local-files
+~~~
+
+~~~
+npx marp --pdf -I frameworks/react/slides/ -o ../frameworks/react/slides/ --allow-local-files
 ~~~
diff --git a/_pages/frameworks/home.md b/_pages/frameworks/home.md
@@ -5,4 +5,4 @@ permalink: /frameworks/slides/
 
 JavaScript frameworks.
 
-(under construction)
+* [React](/frameworks/react/slides/)
diff --git a/_pages/frameworks/react/home.md b/_pages/frameworks/react/home.md
@@ -0,0 +1,12 @@
+---
+title: Thinking in React
+permalink: /frameworks/react/slides/
+---
+
+React concepts and architecture. React programming using JSX and components.
+
+[Start Here]({{ site.baseurl }}/frameworks/react/slides/01-start-jsx/)
+
+## GitHub Examples
+
+[web2learn/frameworks/react](https://github.com/santanche/web2learn/tree/master/frameworks/react)
diff --git a/_pages/frameworks/react/slides/01-start-jsx.md b/_pages/frameworks/react/slides/01-start-jsx.md
@@ -0,0 +1,144 @@
+---
+marp: true
+theme: uncover
+class: invert
+permalink: /frameworks/react/slides/01-start-jsx/
+---
+
+Black & White Series
+
+# React & JSX
+
+#### Thinking in React
+
+---
+
+<!-- class: lead -->
+
+# React
+
+![width:150px](../../../../frameworks/react/slides/images/react-logo.svg)
+
+* https://react.dev/
+* JavaScript Framework
+* to produce interactive (reactive) interfaces
+* founded in JSX and Components
+
+---
+
+# First React Program
+
+Available at: [frameworks/react/1-basic-raw](https://github.com/santanche/web2learn/tree/master/frameworks/react/1-basic-raw)
+
+---
+
+#### First React Program
+# HTML Root Element
+
+~~~html
+<body>
+  <div id="root"></div>
+  ...
+</body>
+~~~
+
+---
+
+#### First React Program
+# Importing Libraries from CDN
+
+CDN - Content Delivery Network
+
+~~~html
+<script src="https://unpkg.com/react/umd/react.development.js">
+</script>
+<script src="https://unpkg.com/react-dom/umd/react-dom.development.js">
+</script>
+~~~
+
+---
+
+# First React Program - Script
+
+~~~js
+const { createRoot } = ReactDOM
+const root = createRoot(document.getElementById('root'))
+~~~
+
+![width:750px](../../../../frameworks/react/slides/images/root.svg)
+
+---
+
+# First React Program - Script
+
+~~~js
+const { createElement } = React
+root.render(
+  createElement('h1', null, 'Velocirest')
+)
+~~~
+
+![width:750px](../../../../frameworks/react/slides/images/render.svg)
+
+---
+
+# JSX
+
+* Proposed by Facebook
+  * https://facebook.github.io/jsx/
+* XML constructs within JavaScript
+* Requires the use of a Transpiler (preprocessor)
+
+---
+
+# React with JSX
+
+~~~js
+root.render(
+  <h1>Velocirest</h1>
+)
+~~~
+
+![width:750px](../../../../frameworks/react/slides/images/render-jsx.svg)
+
+---
+
+# JSX and Babel Transpiler
+
+~~~html
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+<script  type="text/babel">
+  ...
+</script>
+~~~
+
+![width:750px](../../../../frameworks/react/slides/images/render-transpiler.svg)
+
+---
+
+# Babel Transpiler
+
+![width:750px](../../../../frameworks/react/slides/images/babel.svg)
+
+---
+
+# References
+
+* [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
+
+* Eloquent JavaScript - https://eloquentjavascript.net/
+
+![Eloquent JavaScript](../../../../javascript/slides/images/eloquent-javascript.png)
+
+---
+
+<!-- class: invert -->
+
+## André Santanchè
+
+www.ic.unicamp.br/~santanch/
+
+## Web2Learn
+
+santanche.github.io/web2learn/