diff --git a/react-router-v6/.babelrc b/react-router-v6/.babelrc new file mode 100644 index 0000000..4f06b0c --- /dev/null +++ b/react-router-v6/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} diff --git a/react-router-v6/.gitignore b/react-router-v6/.gitignore new file mode 100644 index 0000000..9b9efe6 --- /dev/null +++ b/react-router-v6/.gitignore @@ -0,0 +1,107 @@ +# Others +build* + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# Next.js build output +.next + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and *not* Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port diff --git a/react-router-v6/README.md b/react-router-v6/README.md new file mode 100644 index 0000000..96a193b --- /dev/null +++ b/react-router-v6/README.md @@ -0,0 +1,18 @@ +# React.js Example + +## Table of Contents +0. [General](#general) +1. [Links](#links) + +# General + +# Links + +* [React Router v6.1](https://reactrouter.com/en/main/start/tutorial) +* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k) +* [Production](https://webpack.js.org/guides/production/) +* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382) +* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/) +* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader) +* [load CSS](https://webpack.js.org/loaders/css-loader/) +* [load CSS](https://blog.jakoblind.no/css-modules-webpack/) diff --git a/react-router-v6/app/app.jsx b/react-router-v6/app/app.jsx new file mode 100644 index 0000000..009d5a9 --- /dev/null +++ b/react-router-v6/app/app.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +export default function App() { + return ( + <> +
App
+ > + ); +}; diff --git a/react-router-v6/app/components/hello.jsx b/react-router-v6/app/components/hello.jsx new file mode 100644 index 0000000..2904898 --- /dev/null +++ b/react-router-v6/app/components/hello.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +//destructure props +const Hello = ({msg}) => { + return ( + <> +Sorry, an unexpected error has occurred.
++ {error.statusText || error.message} +
+{contact.notes}
} + +