joshua/presentation-react-state-management
1
0
Fork 0
mirror of https://github.com/seigler/presentation-react-state-management synced 2025-07-26 01:06:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Joshua Seigler 2022-10-09 17:48:52 -04:00 • committed by Joshua Seigler
commit 98ab1bce45
9 changed files with 4868 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
.parcel-cache/
node_modules/
dist/

21
LICENSE Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2022 Joshua Seigler
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

19
README.md Normal file
View file

@ -0,0 +1,19 @@
# Presentation - React State Management
Joshua Seigler - October 2022
---
## Installation
`npm install`
## Usage
`npm run start` for development or local hosting
`npm run build` to populate `./dist` with a packaged build, ready for upload
`npm run clean` to delete `./dist` and various cache folders
`npm run publish` to upload `./dist` to the GitHub Pages branch

4714
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

56
package.json Normal file
View file

@ -0,0 +1,56 @@
{
"name": "react-state-management",
"version": "1.0.0",
"description": "React state management patterns presentation",
"source": "src/index.html",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel",
"build": "parcel build",
"deploy": "git-directory-deploy --directory dist/",
"clean": "rm -rf ./dist ./.cache ./.parcel-cache"
},
"keywords": [
"presentation",
"react",
"javascript",
"parcel",
"typescript"
],
"author": "Joshua Seigler",
"license": "MIT",
"dependencies": {
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@types/react-router-dom": "^5.3.3",
"react-dom": "^18.2.0",
"react-router": "^6.4.2",
"react-router-dom": "^6.4.2",
"simpledotcss": "^2.1.1"
},
"devDependencies": {
"git-directory-deploy": "^1.5.1",
"parcel": "^2.7.0"
},
"prettier": {
"arrowParens": "always",
"bracketSameLine": true,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
}

17
src/error-page.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react'
import { useRouteError } from 'react-router-dom'
export function ErrorPage() {
const error = useRouteError()
console.error(error)
return (
<div id="error-page">
<h1>Oops!</h1>
<p>Sorry, an unexpected error has occurred.</p>
<p>
<i>{error.statusText || error.message}</i>
</p>
</div>
)
}

12
src/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React State Management</title>
<link rel="stylesheet" href="npm:simpledotcss/simple.min.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="index.tsx"></script>
</body>
</html>

21
src/index.tsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { ErrorPage } from './error-page'
import { Root } from './routes/root'
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage />
}
])
const appEntry = document.getElementById('app')
ReactDOM.render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
appEntry
)

5
src/routes/root.tsx Normal file
View file

@ -0,0 +1,5 @@
import React from 'react'
export function Root() {
return <h1>React State Management</h1>
}