From 047742584567e16eb0d82d25fd0e34521fe004b1 Mon Sep 17 00:00:00 2001 From: Thorsten Kober Date: Fri, 29 Sep 2023 11:22:51 -0400 Subject: [PATCH] Add React to update folder (#2202) --- index.html | 2 +- learn.json | 26 +- updates/react/.eslintrc | 13 + updates/react/.gitignore | 2 + updates/react/README.md | 42 + updates/react/dist/app.bundle.js | 3 + updates/react/dist/app.bundle.js.LICENSE.txt | 69 + updates/react/dist/app.bundle.js.map | 1 + updates/react/dist/app.css | 2 + updates/react/dist/app.css.map | 1 + updates/react/dist/index.html | 1 + updates/react/package-lock.json | 16015 +++++++++++++++++ updates/react/package.json | 41 + updates/react/public/index.html | 18 + updates/react/src/index.js | 15 + updates/react/src/todo/app.css | 24 + updates/react/src/todo/app.jsx | 20 + updates/react/src/todo/components/footer.jsx | 43 + updates/react/src/todo/components/header.jsx | 15 + updates/react/src/todo/components/input.jsx | 49 + updates/react/src/todo/components/item.jsx | 53 + updates/react/src/todo/components/main.jsx | 45 + updates/react/src/todo/constants.js | 7 + updates/react/src/todo/reducer.js | 64 + updates/react/webpack.common.js | 43 + updates/react/webpack.dev.js | 18 + updates/react/webpack.prod.js | 30 + 27 files changed, 16645 insertions(+), 17 deletions(-) create mode 100644 updates/react/.eslintrc create mode 100644 updates/react/.gitignore create mode 100644 updates/react/README.md create mode 100644 updates/react/dist/app.bundle.js create mode 100644 updates/react/dist/app.bundle.js.LICENSE.txt create mode 100644 updates/react/dist/app.bundle.js.map create mode 100644 updates/react/dist/app.css create mode 100644 updates/react/dist/app.css.map create mode 100644 updates/react/dist/index.html create mode 100644 updates/react/package-lock.json create mode 100755 updates/react/package.json create mode 100644 updates/react/public/index.html create mode 100644 updates/react/src/index.js create mode 100644 updates/react/src/todo/app.css create mode 100644 updates/react/src/todo/app.jsx create mode 100644 updates/react/src/todo/components/footer.jsx create mode 100644 updates/react/src/todo/components/header.jsx create mode 100644 updates/react/src/todo/components/input.jsx create mode 100644 updates/react/src/todo/components/item.jsx create mode 100644 updates/react/src/todo/components/main.jsx create mode 100644 updates/react/src/todo/constants.js create mode 100644 updates/react/src/todo/reducer.js create mode 100644 updates/react/webpack.common.js create mode 100644 updates/react/webpack.dev.js create mode 100644 updates/react/webpack.prod.js diff --git a/index.html b/index.html index 8391059e31..63785837fa 100644 --- a/index.html +++ b/index.html @@ -106,7 +106,7 @@

Examples

Polymer
  • - React + React
  • React Redux diff --git a/learn.json b/learn.json index 8904f94b86..007b224998 100644 --- a/learn.json +++ b/learn.json @@ -1500,8 +1500,8 @@ "description": "React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.", "homepage": "facebook.github.io/react", "examples": [{ - "name": "Example", - "url": "examples/react" + "name": "React", + "url": "updates/react/dist" }, { "name": "React + Backbone.js", "url": "examples/react-backbone" @@ -1518,29 +1518,23 @@ "link_groups": [{ "heading": "Official Resources", "links": [{ - "name": "Tutorial", - "url": "http://facebook.github.io/react/docs/tutorial.html" + "name": "Quick Start", + "url": "https://react.dev/learn" }, { + "name": "API Reference", + "url": "https://react.dev/reference/react" + },{ "name": "Philosophy", - "url": "http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood" - }, { - "name": "Support", - "url": "http://facebook.github.io/react/support.html" + "url": "https://petehuntsposts.quora.com/React-Under-the-Hood" }, { - "name": "Flux architecture example", - "url": "https://github.com/facebook/flux/tree/master/examples/flux-todomvc" + "name": "React Community", + "url": "https://react.dev/community" }] }, { "heading": "Community", "links": [{ "name": "ReactJS on Stack Overflow", "url": "https://stackoverflow.com/questions/tagged/reactjs" - }, { - "name": "Google Groups Mailing List", - "url": "https://groups.google.com/group/reactjs" - }, { - "name": "IRC", - "url": "irc://chat.freenode.net/reactjs" }] }] }, diff --git a/updates/react/.eslintrc b/updates/react/.eslintrc new file mode 100644 index 0000000000..0ce034b427 --- /dev/null +++ b/updates/react/.eslintrc @@ -0,0 +1,13 @@ +{ + "extends": ["eslint:recommended", "plugin:react/recommended"], + "settings": { + "react": { + "version": "17.0.2" + } + }, + "rules": { + "no-extra-parens": 0, + "react/prop-types": 0, + "react/react-in-jsx-scope": 0 + } +} diff --git a/updates/react/.gitignore b/updates/react/.gitignore new file mode 100644 index 0000000000..03e05e4c07 --- /dev/null +++ b/updates/react/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +/node_modules diff --git a/updates/react/README.md b/updates/react/README.md new file mode 100644 index 0000000000..e15a91f80a --- /dev/null +++ b/updates/react/README.md @@ -0,0 +1,42 @@ +# TodoMVC: React Hooks + +## Description + +This application uses React 17.0.2 to implement a todo application. + +- [React](https://reactjs.org/) is a JavaScript library for creating user interfaces. + +## Implementation details + +React focuses mainly on providing composable user interfaces to enable developers to build an appealing website or web app. React does not force the user to utilize a particular design pattern, but it does provide useful hooks to implement an MVC pattern, if desired. + +React:\ +Model: Todo reducer (reducer.js)\ +View: React ui components\ +Controller: App component + useReducer hook + +MVC:\ +Model: Maintains the data and behavior of an application\ +View: Displays the model in the ui\ +Controller: Serves as an interface between view & model components + +## Build steps + +To build the static files, this application utilizes webpack. It minifies and optimizes output files and copies all necessary files to a `dist` folder. + +## Requirements + +The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server. + +``` +* Node (min version: 18.13.0) +* NPM (min version: 8.19.3) +``` + +## Local preview + +``` +terminal: +1. npm install +2. npm run start +``` diff --git a/updates/react/dist/app.bundle.js b/updates/react/dist/app.bundle.js new file mode 100644 index 0000000000..10286a3c49 --- /dev/null +++ b/updates/react/dist/app.bundle.js @@ -0,0 +1,3 @@ +/*! For license information please see app.bundle.js.LICENSE.txt */ +(()=>{var e,t,n={184:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function l(){for(var e=[],t=0;t{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,l){for(var a,o,i=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;u{"use strict";var r=n(294),l=n(418),a=n(840);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n