-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat (frameworks/react): first complete version
- Loading branch information
Showing
40 changed files
with
16,617 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/ |
3 changes: 3 additions & 0 deletions
3
frameworks/react/4-component/.vite/deps_temp_e505eed1/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"type": "module" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Oops, something went wrong.