diff --git a/Task/.eslintrc.js b/Task/.eslintrc.js new file mode 100644 index 00000000..dc7aa7ab --- /dev/null +++ b/Task/.eslintrc.js @@ -0,0 +1,35 @@ +module.exports = { + parser: "@babel/eslint-parser", + env: { + browser: true, + commonjs: true, + es6: true, + node: true, + jest: true, + }, + parserOptions: { + ecmaVersion: 2020, + ecmaFeatures: { + impliedStrict: true, + jsx: true, + }, + sourceType: "module", + }, + plugins: ["react", "react-hooks"], + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + ], + settings: { + react: { + version: "detect", + }, + }, + rules: { + "react/prop-types": "off", + "react/react-in-jsx-scope": "off", + + // You can do more rule customizations here... + }, + }; \ No newline at end of file diff --git a/Task/README.md b/Task/README.md new file mode 100644 index 00000000..7a635cbc --- /dev/null +++ b/Task/README.md @@ -0,0 +1,142 @@ +# To create an development environment for Node and React Js...! + + #npm - Node Package Manager use to install the javascript software package to out system also can + make use of dependencies... + +Step 1: Enter a command "npm init" to initialize the node package to install also need to refet details + Package name, Version, Description, index.js (initial file to run also can change name), Author + name and type yes to fill it up.. as short You can use "npm init -y" for default installation to + apply default information. + +Step 2: Installing Main Dependencies + Now we need to install the expresss package by the command "npm i express". Which holds the packages + to build the web application projects further can be implemented. + +Step 3: Now install webpack by "npm i webpack webpack-cli" to install the web core modules. + +Here are the 5 packages that you need to make Babel do its magic: + npm i babel-loader @babel/core @babel/node @babel/preset-env @babel/preset-react + +Step 4: Installing Development Dependencies + Nodemon is an command line tool which make use of restart the application that we are + developed for our application to avoid time wastage and move on to efficiency...! + Command - "npm i -D nodemon" + +Step 5: Here is an intresting tool which is ESLint which is an static code tool to make analyse of project + help us to fix the problem on the prject.. + + Which can be installed by the command + "npm i -D eslint @babel/eslint-parser eslint-plugin-react eslint-plugin-react-hooks" + + Now to configure the installation need to add .eslintrc.js file on the root of the project will + deliver the project under the dependencies and configure to our preferred style. further add the below + code on the file..! + + module.exports = { + parser: "@babel/eslint-parser", + env: { + browser: true, + commonjs: true, + es6: true, + node: true, + jest: true, + }, + parserOptions: { + ecmaVersion: 2020, + ecmaFeatures: { + impliedStrict: true, + jsx: true, + }, + sourceType: "module", + }, + plugins: ["react", "react-hooks"], + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + ], + settings: { + react: { + version: "detect", + }, + }, + rules: { + "react/prop-types": "off", + "react/react-in-jsx-scope": "off", + + // You can do more rule customizations here... + }, + }; + + Adding plugin and configure our project further... + Then, the most popular testing library that’s usually used with React is Jest. You’ll also need babel-jest + and a test renderer like react-test-renderer: + command - "npm i -D jest babel-jest react-test-renderer" + +Step 6: Now Need to create Structure to develop the projct which is Creating an initial directory structure + Which can have be explained below + +reactful/ + dist/ + main.js + src/ + index.js + components/ + app.js + server/ + server.js + +Step 7: configure the WebPack and Babel for the project. + For this babel.config.js and webpack.config.js are the file need to create in root of our project + +# babel.config.js +module.exports = { + presets: [ + "@babel/preset-env", + ["@babel/preset-react", { "runtime": "automatic" }] + ], +}; + +#webpack.config.js +module.exports = { + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: { + loader: "babel-loader", + }, + }, + ], + }, +}; + + These are code which make configure the file as needed...! + +Step 8: Creating npm scripts for development + You need to run your web server and you need to run Webpack to bundle the + frontend application for browsers. You can use npm scripts to manage these. + + Move to package.json file and make changes on the file script function + script{ + "test" : "jest" + } + + Now deliver two more script need to add + "dev:server": "nodemon --exec babel-node src/server/server.js --ignore dist/" + "dev:bundler": "webpack -w --mode=development" + +Step 9: Now it is our final delivery which is Testing everything with a sample application. + + # An application which is used to track the count of button clicked by the user...! + + You can refer these changes in the file locations are below... + src/components/app.js + src/index.js + src/server/server.js + + yeah😍...! lets move on to final cake cutting part... + npm run dev:server + npm run dev:bundler + to run local server and our application...😉 diff --git a/Task/babel.config.js b/Task/babel.config.js new file mode 100644 index 00000000..804c4cae --- /dev/null +++ b/Task/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [ + "@babel/preset-env", + ["@babel/preset-react", { "runtime": "automatic" }] + ], + }; \ No newline at end of file diff --git a/Task/dist/main.js b/Task/dist/main.js new file mode 100644 index 00000000..7009facb --- /dev/null +++ b/Task/dist/main.js @@ -0,0 +1,210 @@ +/* + * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). + * This devtool is neither made for production nor for readable output files. + * It uses "eval()" calls to create a separate source file in the browser devtools. + * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) + * or disable the default devtool with "devtool: false". + * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). + */ +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ "./src/components/app.js": +/*!*******************************!*\ + !*** ./src/components/app.js ***! + \*******************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nfunction App() {\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),\n _useState2 = _slicedToArray(_useState, 2),\n count = _useState2[0],\n setCount = _useState2[1];\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(\"div\", {\n children: [\"This is a sample stateful and server-side rendered React application.\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"br\", {}), \"Here is a button that will track how many times you click it:\", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"br\", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"button\", {\n onClick: function onClick() {\n return setCount(count + 1);\n },\n children: count\n })]\n });\n}\n\n//# sourceURL=webpack://task/./src/components/app.js?"); + +/***/ }), + +/***/ "./src/index.js": +/*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _components_app__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/app */ \"./src/components/app.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\nvar container = document.getElementById(\"app\");\nreact_dom_client__WEBPACK_IMPORTED_MODULE_0__.hydrateRoot(container, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_components_app__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {}));\n\n//# sourceURL=webpack://task/./src/index.js?"); + +/***/ }), + +/***/ "./node_modules/react-dom/cjs/react-dom.development.js": +/*!*************************************************************!*\ + !*** ./node_modules/react-dom/cjs/react-dom.development.js ***! + \*************************************************************/ +/***/ ((__unused_webpack_module, exports, __webpack_require__) => { + +eval("/**\n * @license React\n * react-dom.development.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nif (true) {\n (function() {\n\n 'use strict';\n\n/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */\nif (\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===\n 'function'\n) {\n __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());\n}\n var React = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\nvar Scheduler = __webpack_require__(/*! scheduler */ \"./node_modules/scheduler/index.js\");\n\nvar ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n\nvar suppressWarning = false;\nfunction setSuppressWarning(newSuppressWarning) {\n {\n suppressWarning = newSuppressWarning;\n }\n} // In DEV, calls to console.warn and console.error get replaced\n// by calls to these methods by a Babel plugin.\n//\n// In PROD (or in packages without access to React internals),\n// they are left as they are instead.\n\nfunction warn(format) {\n {\n if (!suppressWarning) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n printWarning('warn', format, args);\n }\n }\n}\nfunction error(format) {\n {\n if (!suppressWarning) {\n for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n args[_key2 - 1] = arguments[_key2];\n }\n\n printWarning('error', format, args);\n }\n }\n}\n\nfunction printWarning(level, format, args) {\n // When changing this logic, you might want to also\n // update consoleWithStackDev.www.js as well.\n {\n var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;\n var stack = ReactDebugCurrentFrame.getStackAddendum();\n\n if (stack !== '') {\n format += '%s';\n args = args.concat([stack]);\n } // eslint-disable-next-line react-internal/safe-string-coercion\n\n\n var argsWithFormat = args.map(function (item) {\n return String(item);\n }); // Careful: RN currently depends on this prefix\n\n argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it\n // breaks IE9: https://github.com/facebook/react/issues/13610\n // eslint-disable-next-line react-internal/no-production-logging\n\n Function.prototype.apply.call(console[level], console, argsWithFormat);\n }\n}\n\nvar FunctionComponent = 0;\nvar ClassComponent = 1;\nvar IndeterminateComponent = 2; // Before we know whether it is function or class\n\nvar HostRoot = 3; // Root of a host tree. Could be nested inside another node.\n\nvar HostPortal = 4; // A subtree. Could be an entry point to a different renderer.\n\nvar HostComponent = 5;\nvar HostText = 6;\nvar Fragment = 7;\nvar Mode = 8;\nvar ContextConsumer = 9;\nvar ContextProvider = 10;\nvar ForwardRef = 11;\nvar Profiler = 12;\nvar SuspenseComponent = 13;\nvar MemoComponent = 14;\nvar SimpleMemoComponent = 15;\nvar LazyComponent = 16;\nvar IncompleteClassComponent = 17;\nvar DehydratedFragment = 18;\nvar SuspenseListComponent = 19;\nvar ScopeComponent = 21;\nvar OffscreenComponent = 22;\nvar LegacyHiddenComponent = 23;\nvar CacheComponent = 24;\nvar TracingMarkerComponent = 25;\n\n// -----------------------------------------------------------------------------\n\nvar enableClientRenderFallbackOnTextMismatch = true; // TODO: Need to review this code one more time before landing\n// the react-reconciler package.\n\nvar enableNewReconciler = false; // Support legacy Primer support on internal FB www\n\nvar enableLazyContextPropagation = false; // FB-only usage. The new API has different semantics.\n\nvar enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber\n\nvar enableSuspenseAvoidThisFallback = false; // Enables unstable_avoidThisFallback feature in Fizz\n// React DOM Chopping Block\n//\n// Similar to main Chopping Block but only flags related to React DOM. These are\n// grouped because we will likely batch all of them into a single major release.\n// -----------------------------------------------------------------------------\n// Disable support for comment nodes as React DOM containers. Already disabled\n// in open source, but www codebase still relies on it. Need to remove.\n\nvar disableCommentsAsDOMContainers = true; // Disable javascript: URL strings in href for XSS protection.\n// and client rendering, mostly to allow JSX attributes to apply to the custom\n// element's object properties instead of only HTML attributes.\n// https://github.com/facebook/react/issues/11347\n\nvar enableCustomElementPropertySupport = false; // Disables children for