├── First React application ├── readme ├── src │ ├── main.js │ └── components │ │ └── home.jsx ├── webpack.config.js ├── package.json └── index.html ├── Snapshot testing example ├── src │ ├── src.rar │ ├── index.js │ ├── App.test.js │ ├── App.js │ ├── components │ │ ├── style.css │ │ └── RegisterForm.js │ ├── __snapshots__ │ │ └── App.test.js.snap │ └── registerServiceWorker.js ├── build │ ├── favicon.ico │ ├── asset-manifest.json │ ├── manifest.json │ ├── index.html │ ├── static │ │ └── css │ │ │ ├── main.7ee8872b.css │ │ │ └── main.7ee8872b.css.map │ └── service-worker.js ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── package.json └── readme.md ├── Form validation in reactjs ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── registrationForm │ │ ├── sucess.html │ │ ├── style.css │ │ └── RegisterForm.js │ ├── index.js │ └── registerServiceWorker.js ├── package.json └── readme ├── Append Or Prepend HTML Using ReactJS ├── build │ ├── favicon.ico │ ├── asset-manifest.json │ ├── manifest.json │ ├── static │ │ ├── css │ │ │ ├── main.6210e15c.css │ │ │ └── main.6210e15c.css.map │ │ └── js │ │ │ └── main.d235ca8c.js │ ├── index.html │ └── service-worker.js ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── index.js │ ├── textBox │ │ ├── style.css │ │ └── Form.js │ └── registerServiceWorker.js ├── package.json └── readme ├── Create Simple Popup Example In React Application ├── build │ ├── favicon.ico │ ├── asset-manifest.json │ ├── manifest.json │ ├── index.html │ ├── static │ │ └── css │ │ │ ├── main.7ee8872b.css │ │ │ └── main.7ee8872b.css.map │ └── service-worker.js ├── src │ ├── index.js │ ├── components │ │ ├── style.css │ │ └── Popup.js │ ├── App.js │ └── registerServiceWorker.js ├── package.json └── readme.md └── dropdown menu design in reactjs ├── dropdown menu design in reactjs.rar └── readme /First React application/readme: -------------------------------------------------------------------------------- 1 | # react 2 | -------------------------------------------------------------------------------- /Snapshot testing example/src/src.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Snapshot testing example/src/src.rar -------------------------------------------------------------------------------- /Snapshot testing example/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Snapshot testing example/build/favicon.ico -------------------------------------------------------------------------------- /Snapshot testing example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Snapshot testing example/public/favicon.ico -------------------------------------------------------------------------------- /Form validation in reactjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Form validation in reactjs/public/favicon.ico -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Append Or Prepend HTML Using ReactJS/build/favicon.ico -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Append Or Prepend HTML Using ReactJS/public/favicon.ico -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/Create Simple Popup Example In React Application/build/favicon.ico -------------------------------------------------------------------------------- /dropdown menu design in reactjs/dropdown menu design in reactjs.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowMan128/react/HEAD/dropdown menu design in reactjs/dropdown menu design in reactjs.rar -------------------------------------------------------------------------------- /First React application/src/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Home from "./components/home.jsx"; 4 | 5 | ReactDOM.render( , document.getElementById('app')); -------------------------------------------------------------------------------- /Form validation in reactjs/src/registrationForm/sucess.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Login Sucessful 5 | 6 | 7 | 8 |

Login Sucessful...

9 | 10 | 11 | -------------------------------------------------------------------------------- /Snapshot testing example/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.7ee8872b.css", 3 | "main.css.map": "static/css/main.7ee8872b.css.map", 4 | "main.js": "static/js/main.4284fec7.js", 5 | "main.js.map": "static/js/main.4284fec7.js.map" 6 | } -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.6210e15c.css", 3 | "main.css.map": "static/css/main.6210e15c.css.map", 4 | "main.js": "static/js/main.d235ca8c.js", 5 | "main.js.map": "static/js/main.d235ca8c.js.map" 6 | } -------------------------------------------------------------------------------- /First React application/src/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Home extends React.Component { 4 | render() { 5 | return ( 6 |

Welcome react application demo

7 | ); 8 | } 9 | } 10 | 11 | export default Home; 12 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "main.css": "static/css/main.7ee8872b.css", 3 | "main.css.map": "static/css/main.7ee8872b.css.map", 4 | "main.js": "static/js/main.4284fec7.js", 5 | "main.js.map": "static/js/main.4284fec7.js.map" 6 | } -------------------------------------------------------------------------------- /Snapshot testing example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import registerServiceWorker from './registerServiceWorker'; 4 | 5 | import App from "./App" 6 | 7 | 8 | ReactDOM.render( , document.getElementById('root')); 9 | 10 | registerServiceWorker(); 11 | -------------------------------------------------------------------------------- /Snapshot testing example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | import renderer from 'react-test-renderer'; 4 | 5 | it('renders correctly', () => { 6 | const tree = renderer 7 | .create() 8 | .toJSON(); 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import registerServiceWorker from './registerServiceWorker'; 4 | import Form from './textBox/Form'; 5 | 6 | 7 | ReactDOM.render(
, document.getElementById('root')); 8 | 9 | registerServiceWorker(); 10 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import registerServiceWorker from './registerServiceWorker'; 4 | 5 | import App from "./App" 6 | 7 | 8 | ReactDOM.render( , document.getElementById('root')); 9 | 10 | registerServiceWorker(); 11 | -------------------------------------------------------------------------------- /Snapshot testing example/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import RegisterForm from './components/RegisterForm'; 3 | //import './App.css'; 4 | 5 | class App extends Component { 6 | 7 | 8 | render() { 9 | return ( 10 | 11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Form validation in reactjs/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import registerServiceWorker from './registerServiceWorker'; 4 | import RegisterForm from './registrationForm/RegisterForm'; 5 | 6 | 7 | ReactDOM.render( , document.getElementById('root')); 8 | 9 | registerServiceWorker(); 10 | -------------------------------------------------------------------------------- /Snapshot testing example/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Snapshot testing example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Form validation in reactjs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Form validation in reactjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.3.2", 7 | "react-dom": "^16.3.2", 8 | "react-scripts": "1.1.4" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /dropdown menu design in reactjs/readme: -------------------------------------------------------------------------------- 1 | 2 | Today, In this tutorial we are are going to discuss how to create simple drop down menu in ReactJS and we have tried our best to make this tutorial as simple as possible. Here we are going to design CSS Dropdown menu with the help of ReactJS and also with the help of onClick Event, we are showing and hiding the drop down menu content. 3 | 4 | Link : https://www.skptricks.com/2018/05/create-dropdown-using-reactjs.html 5 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/src/components/style.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | position: fixed; 3 | width: 100%; 4 | height: 100%; 5 | top: 0; 6 | left: 0; 7 | right: 0; 8 | bottom: 0; 9 | margin: auto; 10 | background-color: rgba(0,0,0, 0.5); 11 | } 12 | .popup_inner { 13 | position: absolute; 14 | left: 25%; 15 | right: 25%; 16 | top: 25%; 17 | bottom: 25%; 18 | margin: auto; 19 | border-radius: 20px; 20 | background: white; 21 | } 22 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/src/components/Popup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './style.css'; 3 | 4 | class Popup extends React.Component { 5 | render() { 6 | return ( 7 |
8 |
9 |

{this.props.text}

10 | 11 |
12 |
13 | ); 14 | } 15 | } 16 | 17 | 18 | export default Popup; 19 | -------------------------------------------------------------------------------- /Form validation in reactjs/readme: -------------------------------------------------------------------------------- 1 | This tutorial explains how to validate simple user registration form in reactjs. Form validation is most important part in web development, through which we can restrict invalid entries and validate user details in some extent by using valid sets of checkpoints or validation rules. 2 | Here we are using simple user registration form and performing Client Side Validation using RegisterForm Component. Let see the React user registration form below : 3 | https://www.skptricks.com/2018/06/simple-form-validation-in-reactjs-example.html 4 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/static/css/main.6210e15c.css: -------------------------------------------------------------------------------- 1 | #mainContainer{width:500px;padding:0 15px 15px;border-radius:5px;font-family:arial;line-height:16px;color:#333;font-size:14px;background:#fff;margin:30px auto}textarea{padding:10px;border:1px solid #bdc7d8}.button{background-color:#00bfff;border-color:#3ac162;font-weight:700;padding:12px 15px;color:#fff;margin-right:50px}.errorMsg{color:#c00;margin-bottom:12px}.sucessMsg{color:#6b8e23;margin-bottom:10px}#display-data{margin-top:12px;background:#e5e5e5;padding:1px} 2 | /*# sourceMappingURL=main.6210e15c.css.map*/ -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage" : "https://skptricks.github.io/react-app/", 6 | "dependencies": { 7 | "react": "^16.3.2", 8 | "react-dom": "^16.3.2", 9 | "react-scripts": "1.1.4" 10 | }, 11 | "scripts": { 12 | "predeploy": "npm run build", 13 | "deploy": "gh-pages -d build", 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Snapshot testing example/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /Snapshot testing example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://skptricks.github.io/React-Form/", 6 | "dependencies": { 7 | "gh-pages": "^2.0.1", 8 | "react": "^16.3.2", 9 | "react-dom": "^16.3.2", 10 | "react-scripts": "1.1.4", 11 | "react-test-renderer": "^16.7.0" 12 | }, 13 | "scripts": { 14 | "predeploy": "npm run build", 15 | "deploy": "gh-pages -d build", 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://skptricks.github.io/React-Form/", 6 | "dependencies": { 7 | "gh-pages": "^2.0.1", 8 | "react": "^16.3.2", 9 | "react-dom": "^16.3.2", 10 | "react-scripts": "1.1.4", 11 | "react-test-renderer": "^16.7.0" 12 | }, 13 | "scripts": { 14 | "predeploy": "npm run build", 15 | "deploy": "gh-pages -d build", 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "devDependencies": { 22 | "jest": "^23.6.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /First React application/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var BUILD_DIR = path.resolve(__dirname, 'src'); 4 | var APP_DIR = path.resolve(__dirname, 'static/build'); 5 | 6 | var config = { 7 | entry: ['./src/main.js'], 8 | output: { 9 | path: APP_DIR, 10 | filename: 'bundle.js', 11 | }, 12 | devServer: { 13 | inline: true, 14 | port: 8080 15 | }, 16 | module: { 17 | loaders: [ 18 | { 19 | test: /\.jsx?$/, 20 | include : BUILD_DIR, 21 | exclude: /node_modules/, 22 | loader: 'babel-loader', 23 | query: { 24 | presets: ['es2015', 'react'] 25 | } 26 | } 27 | ] 28 | } 29 | } 30 | module.exports = config; -------------------------------------------------------------------------------- /Snapshot testing example/readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Snapshot testing in React Components with Jest 3 | 4 | Snapshot testing in React Components with Jest 5 | 6 | In this tutorial we are going to learn how to perform snapshot testing in react application. Jest is a JavaScript unit testing framework, used by Facebook to test services and React applications.Jest acts as a test runner, assertion library, and mocking library. Snapshot testing is a pretty cool feature offered by Jest. It can memorize how your UI components are rendered, and compare it to the current test, raising an error if there’s a mismatch. 7 | 8 | 9 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/src/textBox/style.css: -------------------------------------------------------------------------------- 1 | #mainContainer { 2 | width: 500px; 3 | padding: 0px 15px 15px 15px; 4 | border-radius: 5px; 5 | font-family: arial; 6 | line-height: 16px; 7 | color: #333333; 8 | font-size: 14px; 9 | background: #ffffff; 10 | margin: 30px auto; 11 | } 12 | textarea { 13 | padding: 10px; 14 | border: solid 1px #BDC7D8; 15 | } 16 | 17 | .button { 18 | background-color: #00BFFF; 19 | border-color: #3ac162; 20 | font-weight: bold; 21 | padding: 12px 15px; 22 | color: #ffffff; 23 | margin-right: 50px; 24 | } 25 | 26 | .errorMsg { 27 | color: #cc0000; 28 | margin-bottom: 12px; 29 | } 30 | 31 | .sucessMsg { 32 | color: #6B8E23; 33 | margin-bottom: 10px; 34 | } 35 | #display-data{ 36 | margin-top:12px; 37 | background: #e5e5e5; 38 | padding:1px; 39 | 40 | } 41 | -------------------------------------------------------------------------------- /Form validation in reactjs/src/registrationForm/style.css: -------------------------------------------------------------------------------- 1 | #register, #login { 2 | width: 300px; 3 | border: 1px solid #d6d7da; 4 | padding: 0px 15px 15px 15px; 5 | border-radius: 5px; 6 | font-family: arial; 7 | line-height: 16px; 8 | color: #333333; 9 | font-size: 14px; 10 | background: #ffffff; 11 | margin: 100px auto; 12 | } 13 | 14 | form label, form input { 15 | display: block; 16 | //margin-bottom: 10px; 17 | width: 90% 18 | } 19 | 20 | form input { 21 | padding: 10px; 22 | border: solid 1px #BDC7D8; 23 | 24 | } 25 | 26 | .button { 27 | background-color: #00BFFF; 28 | border-color: #3ac162; 29 | font-weight: bold; 30 | padding: 12px 15px; 31 | color: #ffffff; 32 | } 33 | 34 | .errorMsg { 35 | color: #cc0000; 36 | margin-bottom: 12px; 37 | } 38 | 39 | .sucessMsg { 40 | color: #6B8E23; 41 | margin-bottom: 10px; 42 | } 43 | -------------------------------------------------------------------------------- /Snapshot testing example/src/components/style.css: -------------------------------------------------------------------------------- 1 | #register, #login { 2 | width: 300px; 3 | border: 1px solid #d6d7da; 4 | padding: 0px 15px 15px 15px; 5 | border-radius: 5px; 6 | font-family: arial; 7 | line-height: 16px; 8 | color: #333333; 9 | font-size: 14px; 10 | background: #ffffff; 11 | margin: 100px auto; 12 | } 13 | 14 | form label, form input { 15 | display: block; 16 | //margin-bottom: 10px; 17 | width: 90% 18 | } 19 | 20 | form input { 21 | padding: 10px; 22 | border: solid 1px #BDC7D8; 23 | 24 | } 25 | 26 | .button { 27 | background-color: #00BFFF; 28 | border-color: #3ac162; 29 | font-weight: bold; 30 | padding: 12px 15px; 31 | color: #ffffff; 32 | } 33 | 34 | .errorMsg { 35 | color: #cc0000; 36 | margin-bottom: 12px; 37 | } 38 | 39 | .sucessMsg { 40 | color: #6B8E23; 41 | margin-bottom: 10px; 42 | } 43 | -------------------------------------------------------------------------------- /First React application/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactapp", 3 | "version": "1.0.0", 4 | "description": "My first react app", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --hot", 8 | "build": "./node_modules/.bin/webpack --watch" 9 | }, 10 | "author": "Sumit", 11 | "license": "ISC", 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-preset-es2015": "^6.24.1", 17 | "babel-preset-react": "^6.24.1", 18 | "cross-fetch": "^2.1.0", 19 | "flux": "^3.1.3", 20 | "history": "^1.17.0", 21 | "react": "^16.2.0", 22 | "react-dom": "^16.2.0", 23 | "react-redux": "^5.0.7", 24 | "react-router": "^4.2.0", 25 | "react-router-dom": "^4.2.2", 26 | "redux": "^3.7.2", 27 | "redux-thunk": "^2.2.0", 28 | "webpack": "^3.10.0", 29 | "webpack-dev-server": "^2.10.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Popup from './components/Popup'; 3 | 4 | 5 | class App extends Component { 6 | 7 | constructor(props){ 8 | super(props); 9 | this.state = { showPopup: false }; 10 | } 11 | 12 | togglePopup() { 13 | this.setState({ 14 | showPopup: !this.state.showPopup 15 | }); 16 | } 17 | 18 | render() { 19 | return ( 20 |
21 |

Simple Popup Example In React Application

22 | 23 | 24 | {this.state.showPopup ? 25 | 29 | : null 30 | } 31 |
32 | 33 | ); 34 | } 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/static/css/main.6210e15c.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["textBox/style.css"],"names":[],"mappings":"AAAA,eACE,YACA,oBACA,kBACA,kBACA,iBACA,WACA,eACA,gBACA,gBAAkB,CAEpB,SACE,aACA,wBAA0B,CAG5B,QACE,yBACA,qBACA,gBACA,kBACA,WACA,iBAAmB,CAGrB,UACE,WACA,kBAAoB,CAGtB,WACE,cACA,kBAAoB,CAEtB,cACA,gBACA,mBACA,WAAY","file":"static/css/main.6210e15c.css","sourcesContent":["#mainContainer {\n width: 500px; \n padding: 0px 15px 15px 15px;\n border-radius: 5px;\n font-family: arial;\n line-height: 16px;\n color: #333333;\n font-size: 14px;\n background: #ffffff;\n margin: 30px auto;\n}\ntextarea {\n padding: 10px;\n border: solid 1px #BDC7D8;\n}\n\n.button {\n background-color: #00BFFF;\n border-color: #3ac162;\n font-weight: bold;\n padding: 12px 15px;\n color: #ffffff;\n margin-right: 50px;\n}\n\n.errorMsg {\n color: #cc0000;\n margin-bottom: 12px;\n}\n\n.sucessMsg {\n color: #6B8E23;\n margin-bottom: 10px;\n}\n#display-data{\nmargin-top:12px;\nbackground: #e5e5e5;\npadding:1px;\n\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/textBox/style.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/readme.md: -------------------------------------------------------------------------------- 1 | # Create Simple Popup Example In React Application 2 | 3 | Post Link : Create Simple Popup Example In React Application 4 | 5 | In this tutorial we will see how to create simple popup in react application. Here we will provide you very simple and very easy example, that helps you to understand creation process of simple popup in react JS. We can use this kind of popup message to display email subscription notifications, display advertisements, confirmation message like YES/NO to user etc. 6 | So in this example we have created component named as "Popup" and that helps to display the popup message, whenever user clicks on "Click To Launch Popup" button. 7 | 8 | Create Simple Popup Example In React Application 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Snapshot testing example/build/static/css/main.7ee8872b.css: -------------------------------------------------------------------------------- 1 | .loader{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.loader:before{border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.loader:after,.loader:before{position:absolute;content:"";top:0;left:50%;width:100%;height:100%}.loader:after{-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loader:after,.loader:before{width:2.28571429rem;height:2.28571429rem;margin:0}.contactApp{width:300px}.contactApp>*{width:100%}ul{padding:0}li{list-style:none;margin:5px}.contactData{padding-top:5px;height:40px}li img{border-radius:50%;margin-right:10px;float:left} 2 | /*# sourceMappingURL=main.7ee8872b.css.map*/ -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/readme: -------------------------------------------------------------------------------- 1 | Append Or Prepend HTML Using ReactJS : 2 | 3 | Post Link : 4 | https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html 5 | 6 | Today, In this tutorial we will see how to Append and Prepend element in react like Jquery. In react we are performing append and prepend operation by maintaining simple Array. 7 | push() - append content in array. 8 | unshift() - prepend content in array. 9 | react Append or prepend to an element 10 | 11 | Append element in react by using below function : 12 | Appending content in array by using push function and with the help of state we are render the content in browser. 13 | appendData() { 14 | this.displayData.push(
{this.state.postVal}
); 15 | this.setState({ 16 | showdata : this.displayData, 17 | postVal : "" 18 | }); 19 | } 20 | 21 | Prepend element in react by using below function : 22 | Prepending content in array by using unshift function and with the help of state we are render the content in browser. 23 | prependData() { 24 | this.displayData.unshift(
{this.state.postVal}
); 25 | this.setState({ 26 | showdata : this.displayData, 27 | postVal : "" 28 | }); 29 | } 30 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/static/css/main.7ee8872b.css: -------------------------------------------------------------------------------- 1 | .loader{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.loader:before{border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.loader:after,.loader:before{position:absolute;content:"";top:0;left:50%;width:100%;height:100%}.loader:after{-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loader:after,.loader:before{width:2.28571429rem;height:2.28571429rem;margin:0}.contactApp{width:300px}.contactApp>*{width:100%}ul{padding:0}li{list-style:none;margin:5px}.contactData{padding-top:5px;height:40px}li img{border-radius:50%;margin-right:10px;float:left} 2 | /*# sourceMappingURL=main.7ee8872b.css.map*/ -------------------------------------------------------------------------------- /Snapshot testing example/src/__snapshots__/App.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`renders correctly 1`] = ` 4 |
7 |
10 |

11 | Registration page1 12 |

13 | 18 | 21 | 27 |
30 | 33 | 39 |
42 | 45 | 51 |
54 | 57 | 63 |
66 | 71 | 72 |
73 |
74 | `; 75 | -------------------------------------------------------------------------------- /Snapshot testing example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Form validation in reactjs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /First React application/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Starter Template for Bootstrap 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 | 31 | 32 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/src/textBox/Form.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './style.css'; 3 | 4 | 5 | class Form extends React.Component { 6 | 7 | constructor() { 8 | super(); 9 | 10 | this.displayData = []; 11 | 12 | this.state = { 13 | showdata : this.displayData, 14 | postVal : "" 15 | } 16 | 17 | this.appendData = this.appendData.bind(this); 18 | this.prependData = this.prependData.bind(this); 19 | this.handleChange = this.handleChange.bind(this); 20 | 21 | }; 22 | 23 | appendData() { 24 | this.displayData.push(
{this.state.postVal}
); 25 | this.setState({ 26 | showdata : this.displayData, 27 | postVal : "" 28 | }); 29 | } 30 | 31 | prependData() { 32 | this.displayData.unshift(
{this.state.postVal}
); 33 | this.setState({ 34 | showdata : this.displayData, 35 | postVal : "" 36 | }); 37 | } 38 | 39 | handleChange(e) { 40 | let getTextAreaValue = e.target.value; 41 | this.setState({ 42 | postVal :getTextAreaValue 43 | }); 44 | } 45 | 46 | render() { 47 | return ( 48 |
49 | 50 |
51 | 52 | 53 |
54 |
55 | {this.displayData} 56 |
57 |
58 | ); 59 | } 60 | } 61 | 62 | 63 | export default Form; 64 | -------------------------------------------------------------------------------- /Snapshot testing example/build/static/css/main.7ee8872b.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["components/HOC/LoadingHOC.css","components/ContactsApp.css"],"names":[],"mappings":"AAAA,QACE,kBACA,QACA,SACA,oDACA,gDACA,2CAA6C,CAK/C,eAOE,qBACA,gCAAuC,CAKzC,6BAZE,kBACA,WACA,MACA,SACA,WACA,WAAa,CAwBd,cAVC,oCACQ,4BACR,2CACQ,mCACR,qBACA,6CACA,mBACA,kBACA,yCACQ,gCAAwC,CAKlD,0BACE,GACE,+BACA,sBAAwB,CAG1B,GACE,gCACA,uBAA0B,CAC3B,CAGH,kBACE,GACE,+BACA,sBAAwB,CAG1B,GACE,gCACA,uBAA0B,CAC3B,CAGH,6BAEE,oBACA,qBACA,QAAY,CCzEd,YACE,WAAa,CAGf,cACE,UAAY,CAGd,GACE,SAAW,CAGb,GACE,gBACA,UAAY,CAGd,aACE,gBACA,WAAa,CAGf,OACE,kBACA,kBACA,UAAY","file":"static/css/main.7ee8872b.css","sourcesContent":[".loader {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n -webkit-transform: translateX(-50%) translateY(-50%);\r\n -ms-transform: translateX(-50%) translateY(-50%);\r\n transform: translateX(-50%) translateY(-50%);\r\n}\r\n\r\n/* Static Shape */\r\n\r\n.loader:before {\r\n position: absolute;\r\n content: '';\r\n top: 0%;\r\n left: 50%;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 500rem;\r\n border: 0.2em solid rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* Active Shape */\r\n\r\n.loader:after {\r\n position: absolute;\r\n content: '';\r\n top: 0%;\r\n left: 50%;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-animation: loader 0.6s linear;\r\n animation: loader 0.6s linear;\r\n -webkit-animation-iteration-count: infinite;\r\n animation-iteration-count: infinite;\r\n border-radius: 500rem;\r\n border-color: #767676 transparent transparent;\r\n border-style: solid;\r\n border-width: 0.2em;\r\n -webkit-box-shadow: 0px 0px 0px 1px transparent;\r\n box-shadow: 0px 0px 0px 1px transparent;\r\n}\r\n\r\n/* Active Animation */\r\n\r\n@-webkit-keyframes loader {\r\n from {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes loader {\r\n from {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.loader:before,\r\n.loader:after {\r\n width: 2.28571429rem;\r\n height: 2.28571429rem;\r\n margin: 0em;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/HOC/LoadingHOC.css",".contactApp {\r\n width: 300px;\r\n}\r\n\r\n.contactApp > *{\r\n width: 100%;\r\n}\r\n\r\nul {\r\n padding: 0;\r\n}\r\n\r\nli {\r\n list-style: none;\r\n margin: 5px;\r\n}\r\n\r\n.contactData {\r\n padding-top: 5px;\r\n height: 40px;\r\n}\r\n\r\nli img{\r\n border-radius: 50%;\r\n margin-right: 10px;\r\n float: left;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/ContactsApp.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/static/css/main.7ee8872b.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["components/HOC/LoadingHOC.css","components/ContactsApp.css"],"names":[],"mappings":"AAAA,QACE,kBACA,QACA,SACA,oDACA,gDACA,2CAA6C,CAK/C,eAOE,qBACA,gCAAuC,CAKzC,6BAZE,kBACA,WACA,MACA,SACA,WACA,WAAa,CAwBd,cAVC,oCACQ,4BACR,2CACQ,mCACR,qBACA,6CACA,mBACA,kBACA,yCACQ,gCAAwC,CAKlD,0BACE,GACE,+BACA,sBAAwB,CAG1B,GACE,gCACA,uBAA0B,CAC3B,CAGH,kBACE,GACE,+BACA,sBAAwB,CAG1B,GACE,gCACA,uBAA0B,CAC3B,CAGH,6BAEE,oBACA,qBACA,QAAY,CCzEd,YACE,WAAa,CAGf,cACE,UAAY,CAGd,GACE,SAAW,CAGb,GACE,gBACA,UAAY,CAGd,aACE,gBACA,WAAa,CAGf,OACE,kBACA,kBACA,UAAY","file":"static/css/main.7ee8872b.css","sourcesContent":[".loader {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n -webkit-transform: translateX(-50%) translateY(-50%);\r\n -ms-transform: translateX(-50%) translateY(-50%);\r\n transform: translateX(-50%) translateY(-50%);\r\n}\r\n\r\n/* Static Shape */\r\n\r\n.loader:before {\r\n position: absolute;\r\n content: '';\r\n top: 0%;\r\n left: 50%;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 500rem;\r\n border: 0.2em solid rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* Active Shape */\r\n\r\n.loader:after {\r\n position: absolute;\r\n content: '';\r\n top: 0%;\r\n left: 50%;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-animation: loader 0.6s linear;\r\n animation: loader 0.6s linear;\r\n -webkit-animation-iteration-count: infinite;\r\n animation-iteration-count: infinite;\r\n border-radius: 500rem;\r\n border-color: #767676 transparent transparent;\r\n border-style: solid;\r\n border-width: 0.2em;\r\n -webkit-box-shadow: 0px 0px 0px 1px transparent;\r\n box-shadow: 0px 0px 0px 1px transparent;\r\n}\r\n\r\n/* Active Animation */\r\n\r\n@-webkit-keyframes loader {\r\n from {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes loader {\r\n from {\r\n -webkit-transform: rotate(0deg);\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n -webkit-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.loader:before,\r\n.loader:after {\r\n width: 2.28571429rem;\r\n height: 2.28571429rem;\r\n margin: 0em;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/HOC/LoadingHOC.css",".contactApp {\r\n width: 300px;\r\n}\r\n\r\n.contactApp > *{\r\n width: 100%;\r\n}\r\n\r\nul {\r\n padding: 0;\r\n}\r\n\r\nli {\r\n list-style: none;\r\n margin: 5px;\r\n}\r\n\r\n.contactData {\r\n padding-top: 5px;\r\n height: 40px;\r\n}\r\n\r\nli img{\r\n border-radius: 50%;\r\n margin-right: 10px;\r\n float: left;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/ContactsApp.css"],"sourceRoot":""} -------------------------------------------------------------------------------- /Snapshot testing example/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/React-Form/index.html","c5f764841cdaebc429711aa4d8be45d5"],["/React-Form/static/css/main.7ee8872b.css","e57ace4d96e9c32c43a94f6f747db729"],["/React-Form/static/js/main.4284fec7.js","23a0698864ef6023825b087afe766e1d"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="/React-Form/index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}}); -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/react-app/index.html","18c13fbb8c78ffe0b6b3ec0220358725"],["/react-app/static/css/main.6210e15c.css","27be91c9ea1a418a325010bdfeb8f9b0"],["/react-app/static/js/main.d235ca8c.js","53a66caa5e87d58f65bb62934e453709"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="/react-app/index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}}); -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/build/service-worker.js: -------------------------------------------------------------------------------- 1 | "use strict";var precacheConfig=[["/React-Form/index.html","c5f764841cdaebc429711aa4d8be45d5"],["/React-Form/static/css/main.7ee8872b.css","e57ace4d96e9c32c43a94f6f747db729"],["/React-Form/static/js/main.4284fec7.js","23a0698864ef6023825b087afe766e1d"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="/React-Form/index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}}); -------------------------------------------------------------------------------- /Form validation in reactjs/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /Snapshot testing example/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /Create Simple Popup Example In React Application/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /Snapshot testing example/src/components/RegisterForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './style.css'; 3 | 4 | 5 | class RegisterForm extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | fields: {}, 10 | errors: {} 11 | } 12 | 13 | this.handleChange = this.handleChange.bind(this); 14 | this.submituserRegistrationForm = this.submituserRegistrationForm.bind(this); 15 | 16 | }; 17 | 18 | handleChange(e) { 19 | let fields = this.state.fields; 20 | fields[e.target.name] = e.target.value; 21 | this.setState({ 22 | fields 23 | }); 24 | 25 | } 26 | 27 | submituserRegistrationForm(e) { 28 | e.preventDefault(); 29 | if (this.validateForm()) { 30 | let fields = {}; 31 | fields["username"] = ""; 32 | fields["emailid"] = ""; 33 | fields["mobileno"] = ""; 34 | fields["password"] = ""; 35 | this.setState({fields:fields}); 36 | alert("Form submitted"); 37 | } 38 | 39 | } 40 | 41 | validateForm() { 42 | 43 | let fields = this.state.fields; 44 | let errors = {}; 45 | let formIsValid = true; 46 | 47 | if (!fields["username"]) { 48 | formIsValid = false; 49 | errors["username"] = "*Please enter your username."; 50 | } 51 | 52 | if (typeof fields["username"] !== "undefined") { 53 | if (!fields["username"].match(/^[a-zA-Z ]*$/)) { 54 | formIsValid = false; 55 | errors["username"] = "*Please enter alphabet characters only."; 56 | } 57 | } 58 | 59 | if (!fields["emailid"]) { 60 | formIsValid = false; 61 | errors["emailid"] = "*Please enter your email-ID."; 62 | } 63 | 64 | if (typeof fields["emailid"] !== "undefined") { 65 | //regular expression for email validation 66 | var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 67 | if (!pattern.test(fields["emailid"])) { 68 | formIsValid = false; 69 | errors["emailid"] = "*Please enter valid email-ID."; 70 | } 71 | } 72 | 73 | if (!fields["mobileno"]) { 74 | formIsValid = false; 75 | errors["mobileno"] = "*Please enter your mobile no."; 76 | } 77 | 78 | if (typeof fields["mobileno"] !== "undefined") { 79 | if (!fields["mobileno"].match(/^[0-9]{10}$/)) { 80 | formIsValid = false; 81 | errors["mobileno"] = "*Please enter valid mobile no."; 82 | } 83 | } 84 | 85 | if (!fields["password"]) { 86 | formIsValid = false; 87 | errors["password"] = "*Please enter your password."; 88 | } 89 | 90 | if (typeof fields["password"] !== "undefined") { 91 | if (!fields["password"].match(/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/)) { 92 | formIsValid = false; 93 | errors["password"] = "*Please enter secure and strong password."; 94 | } 95 | } 96 | 97 | this.setState({ 98 | errors: errors 99 | }); 100 | return formIsValid; 101 | 102 | 103 | } 104 | 105 | 106 | 107 | render() { 108 | return ( 109 |
110 |
111 |

Registration page

112 |
113 | 114 | 115 |
{this.state.errors.username}
116 | 117 | 118 |
{this.state.errors.emailid}
119 | 120 | 121 |
{this.state.errors.mobileno}
122 | 123 | 124 |
{this.state.errors.password}
125 | 126 |
127 |
128 |
129 | 130 | ); 131 | } 132 | 133 | 134 | } 135 | 136 | 137 | export default RegisterForm; 138 | -------------------------------------------------------------------------------- /Form validation in reactjs/src/registrationForm/RegisterForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './style.css'; 3 | 4 | 5 | class RegisterForm extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | fields: {}, 10 | errors: {} 11 | } 12 | 13 | this.handleChange = this.handleChange.bind(this); 14 | this.submituserRegistrationForm = this.submituserRegistrationForm.bind(this); 15 | 16 | }; 17 | 18 | handleChange(e) { 19 | let fields = this.state.fields; 20 | fields[e.target.name] = e.target.value; 21 | this.setState({ 22 | fields 23 | }); 24 | 25 | } 26 | 27 | submituserRegistrationForm(e) { 28 | e.preventDefault(); 29 | if (this.validateForm()) { 30 | let fields = {}; 31 | fields["username"] = ""; 32 | fields["emailid"] = ""; 33 | fields["mobileno"] = ""; 34 | fields["password"] = ""; 35 | this.setState({fields:fields}); 36 | alert("Form submitted"); 37 | } 38 | 39 | } 40 | 41 | validateForm() { 42 | 43 | let fields = this.state.fields; 44 | let errors = {}; 45 | let formIsValid = true; 46 | 47 | if (!fields["username"]) { 48 | formIsValid = false; 49 | errors["username"] = "*Please enter your username."; 50 | } 51 | 52 | if (typeof fields["username"] !== "undefined") { 53 | if (!fields["username"].match(/^[a-zA-Z ]*$/)) { 54 | formIsValid = false; 55 | errors["username"] = "*Please enter alphabet characters only."; 56 | } 57 | } 58 | 59 | if (!fields["emailid"]) { 60 | formIsValid = false; 61 | errors["emailid"] = "*Please enter your email-ID."; 62 | } 63 | 64 | if (typeof fields["emailid"] !== "undefined") { 65 | //regular expression for email validation 66 | var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 67 | if (!pattern.test(fields["emailid"])) { 68 | formIsValid = false; 69 | errors["emailid"] = "*Please enter valid email-ID."; 70 | } 71 | } 72 | 73 | if (!fields["mobileno"]) { 74 | formIsValid = false; 75 | errors["mobileno"] = "*Please enter your mobile no."; 76 | } 77 | 78 | if (typeof fields["mobileno"] !== "undefined") { 79 | if (!fields["mobileno"].match(/^[0-9]{10}$/)) { 80 | formIsValid = false; 81 | errors["mobileno"] = "*Please enter valid mobile no."; 82 | } 83 | } 84 | 85 | if (!fields["password"]) { 86 | formIsValid = false; 87 | errors["password"] = "*Please enter your password."; 88 | } 89 | 90 | if (typeof fields["password"] !== "undefined") { 91 | if (!fields["password"].match(/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/)) { 92 | formIsValid = false; 93 | errors["password"] = "*Please enter secure and strong password."; 94 | } 95 | } 96 | 97 | this.setState({ 98 | errors: errors 99 | }); 100 | return formIsValid; 101 | 102 | 103 | } 104 | 105 | 106 | 107 | render() { 108 | return ( 109 |
110 |
111 |

Registration page

112 |
113 | 114 | 115 |
{this.state.errors.username}
116 | 117 | 118 |
{this.state.errors.emailid}
119 | 120 | 121 |
{this.state.errors.mobileno}
122 | 123 | 124 |
{this.state.errors.password}
125 | 126 |
127 |
128 |
129 | 130 | ); 131 | } 132 | 133 | 134 | } 135 | 136 | 137 | export default RegisterForm; 138 | -------------------------------------------------------------------------------- /Append Or Prepend HTML Using ReactJS/build/static/js/main.d235ca8c.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/react-app/",t(t.s=6)}([function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=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,t){for(var n,l,u=r(e),c=1;cc){for(var t=0,n=i.length-u;t-1?t:e}function p(e,t){t=t||{};var n=t.body;if(e instanceof p){if(e.bodyUsed)throw new TypeError("Already read");this.url=e.url,this.credentials=e.credentials,t.headers||(this.headers=new o(e.headers)),this.method=e.method,this.mode=e.mode,n||null==e._bodyInit||(n=e._bodyInit,e.bodyUsed=!0)}else this.url=String(e);if(this.credentials=t.credentials||this.credentials||"omit",!t.headers&&this.headers||(this.headers=new o(t.headers)),this.method=d(t.method||this.method||"GET"),this.mode=t.mode||this.mode||null,this.referrer=null,("GET"===this.method||"HEAD"===this.method)&&n)throw new TypeError("Body not allowed for GET or HEAD requests");this._initBody(n)}function h(e){var t=new FormData;return e.trim().split("&").forEach(function(e){if(e){var n=e.split("="),r=n.shift().replace(/\+/g," "),o=n.join("=").replace(/\+/g," ");t.append(decodeURIComponent(r),decodeURIComponent(o))}}),t}function m(e){var t=new o;return e.split(/\r?\n/).forEach(function(e){var n=e.split(":"),r=n.shift().trim();if(r){var o=n.join(":").trim();t.append(r,o)}}),t}function y(e,t){t||(t={}),this.type="default",this.status="status"in t?t.status:200,this.ok=this.status>=200&&this.status<300,this.statusText="statusText"in t?t.statusText:"OK",this.headers=new o(t.headers),this.url=t.url||"",this._initBody(e)}if(!e.fetch){var v={searchParams:"URLSearchParams"in e,iterable:"Symbol"in e&&"iterator"in Symbol,blob:"FileReader"in e&&"Blob"in e&&function(){try{return new Blob,!0}catch(e){return!1}}(),formData:"FormData"in e,arrayBuffer:"ArrayBuffer"in e};if(v.arrayBuffer)var g=["[object Int8Array]","[object Uint8Array]","[object Uint8ClampedArray]","[object Int16Array]","[object Uint16Array]","[object Int32Array]","[object Uint32Array]","[object Float32Array]","[object Float64Array]"],b=function(e){return e&&DataView.prototype.isPrototypeOf(e)},w=ArrayBuffer.isView||function(e){return e&&g.indexOf(Object.prototype.toString.call(e))>-1};o.prototype.append=function(e,r){e=t(e),r=n(r);var o=this.map[e];this.map[e]=o?o+","+r:r},o.prototype.delete=function(e){delete this.map[t(e)]},o.prototype.get=function(e){return e=t(e),this.has(e)?this.map[e]:null},o.prototype.has=function(e){return this.map.hasOwnProperty(t(e))},o.prototype.set=function(e,r){this.map[t(e)]=n(r)},o.prototype.forEach=function(e,t){for(var n in this.map)this.map.hasOwnProperty(n)&&e.call(t,this.map[n],n,this)},o.prototype.keys=function(){var e=[];return this.forEach(function(t,n){e.push(n)}),r(e)},o.prototype.values=function(){var e=[];return this.forEach(function(t){e.push(t)}),r(e)},o.prototype.entries=function(){var e=[];return this.forEach(function(t,n){e.push([n,t])}),r(e)},v.iterable&&(o.prototype[Symbol.iterator]=o.prototype.entries);var C=["DELETE","GET","HEAD","OPTIONS","POST","PUT"];p.prototype.clone=function(){return new p(this,{body:this._bodyInit})},f.call(p.prototype),f.call(y.prototype),y.prototype.clone=function(){return new y(this._bodyInit,{status:this.status,statusText:this.statusText,headers:new o(this.headers),url:this.url})},y.error=function(){var e=new y(null,{status:0,statusText:""});return e.type="error",e};var x=[301,302,303,307,308];y.redirect=function(e,t){if(-1===x.indexOf(t))throw new RangeError("Invalid status code");return new y(null,{status:t,headers:{location:e}})},e.Headers=o,e.Request=p,e.Response=y,e.fetch=function(e,t){return new Promise(function(n,r){var o=new p(e,t),a=new XMLHttpRequest;a.onload=function(){var e={status:a.status,statusText:a.statusText,headers:m(a.getAllResponseHeaders()||"")};e.url="responseURL"in a?a.responseURL:e.headers.get("X-Request-URL");var t="response"in a?a.response:a.responseText;n(new y(t,e))},a.onerror=function(){r(new TypeError("Network request failed"))},a.ontimeout=function(){r(new TypeError("Network request failed"))},a.open(o.method,o.url,!0),"include"===o.credentials&&(a.withCredentials=!0),"responseType"in a&&v.blob&&(a.responseType="blob"),o.headers.forEach(function(e,t){a.setRequestHeader(t,e)}),a.send("undefined"===typeof o._bodyInit?null:o._bodyInit)})},e.fetch.polyfill=!0}}("undefined"!==typeof self?self:this)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=n.n(r),a=n(15),i=n.n(a),l=n(23),u=n(24);i.a.render(o.a.createElement(u.a,null),document.getElementById("root")),Object(l.a)()},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="http://reactjs.org/docs/error-decoder.html?invariant="+e,r=0;rA.length&&A.push(e)}function d(e,t,n,o){var a=typeof e;"undefined"!==a&&"boolean"!==a||(e=null);var i=!1;if(null===e)i=!0;else switch(a){case"string":case"number":i=!0;break;case"object":switch(e.$$typeof){case x:case k:i=!0}}if(i)return n(o,e,""===t?"."+p(e,0):t),1;if(i=0,t=""===t?".":t+":",Array.isArray(e))for(var l=0;lthis.eventPool.length&&this.eventPool.push(e)}function A(e){e.eventPool=[],e.getPooled=U,e.release=M}function L(e,t){switch(e){case"topKeyUp":return-1!==Vn.indexOf(t.keyCode);case"topKeyDown":return 229!==t.keyCode;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function j(e){return e=e.detail,"object"===typeof e&&"data"in e?e.data:null}function z(e,t){switch(e){case"topCompositionEnd":return j(t);case"topKeyPress":return 32!==t.which?null:(Xn=!0,qn);case"topTextInput":return e=t.data,e===qn&&Xn?null:e;default:return null}}function B(e,t){if(Yn)return"topCompositionEnd"===e||!Wn&&L(e,t)?(e=D(),Ln._root=null,Ln._startText=null,Ln._fallbackText=null,Yn=!1,e):null;switch(e){case"topPaste":return null;case"topKeyPress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1t}return!1}function ce(e,t,n,r,o){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=o,this.mustUseProperty=n,this.propertyName=e,this.type=t}function se(e){return e[1].toUpperCase()}function fe(e,t,n,r){var o=xr.hasOwnProperty(t)?xr[t]:null;(null!==o?0===o.type:!r&&(2qr.length&&qr.push(e)}}}function Ke(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function $e(e){if(Zr[e])return Zr[e];if(!Yr[e])return e;var t,n=Yr[e];for(t in n)if(n.hasOwnProperty(t)&&t in Jr)return Zr[e]=n[t];return e}function Qe(e){return Object.prototype.hasOwnProperty.call(e,oo)||(e[oo]=ro++,no[e[oo]]={}),no[e[oo]]}function qe(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function Ge(e,t){var n=qe(e);e=0;for(var r;n;){if(3===n.nodeType){if(r=e+n.textContent.length,e<=t&&r>=t)return{node:n,offset:t-e};e=r}e:{for(;n;){if(n.nextSibling){n=n.nextSibling;break e}n=n.parentNode}n=void 0}n=qe(n)}}function Xe(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&"text"===e.type||"textarea"===t||"true"===e.contentEditable)}function Ye(e,t){if(so||null==lo||lo!==hn())return null;var n=lo;return"selectionStart"in n&&Xe(n)?n={start:n.selectionStart,end:n.selectionEnd}:window.getSelection?(n=window.getSelection(),n={anchorNode:n.anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset}):n=void 0,co&&mn(co,n)?null:(co=n,e=F.getPooled(io.select,uo,e,t),e.type="select",e.target=lo,N(e),e)}function Ze(e,t,n,r){this.tag=e,this.key=n,this.stateNode=this.type=null,this.sibling=this.child=this.return=null,this.index=0,this.ref=null,this.pendingProps=t,this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.expirationTime=0,this.alternate=null}function Je(e,t,n){var r=e.alternate;return null===r?(r=new Ze(e.tag,t,e.key,e.mode),r.type=e.type,r.stateNode=e.stateNode,r.alternate=e,e.alternate=r):(r.pendingProps=t,r.effectTag=0,r.nextEffect=null,r.firstEffect=null,r.lastEffect=null),r.expirationTime=n,r.child=e.child,r.memoizedProps=e.memoizedProps,r.memoizedState=e.memoizedState,r.updateQueue=e.updateQueue,r.sibling=e.sibling,r.index=e.index,r.ref=e.ref,r}function et(e,t,n){var o=e.type,a=e.key;e=e.props;var i=void 0;if("function"===typeof o)i=o.prototype&&o.prototype.isReactComponent?2:0;else if("string"===typeof o)i=5;else switch(o){case dr:return tt(e.children,t,n,a);case yr:i=11,t|=3;break;case pr:i=11,t|=2;break;case cr:i=7;break;case sr:i=9;break;default:if("object"===typeof o&&null!==o)switch(o.$$typeof){case hr:i=13;break;case mr:i=12;break;case vr:i=14;break;default:if("number"===typeof o.tag)return t=o,t.pendingProps=e,t.expirationTime=n,t;r("130",null==o?o:typeof o,"")}else r("130",null==o?o:typeof o,"")}return t=new Ze(i,e,a,t),t.type=o,t.expirationTime=n,t}function tt(e,t,n,r){return e=new Ze(10,e,r,t),e.expirationTime=n,e}function nt(e,t,n){return e=new Ze(6,e,null,t),e.expirationTime=n,e}function rt(e,t,n){return t=new Ze(4,null!==e.children?e.children:[],e.key,t),t.expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function ot(e){return function(t){try{return e(t)}catch(e){}}}function at(e){if("undefined"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);po=ot(function(e){return t.onCommitFiberRoot(n,e)}),ho=ot(function(e){return t.onCommitFiberUnmount(n,e)})}catch(e){}return!0}function it(e){"function"===typeof po&&po(e)}function lt(e){"function"===typeof ho&&ho(e)}function ut(e){return{baseState:e,expirationTime:0,first:null,last:null,callbackList:null,hasForceUpdate:!1,isInitialized:!1,capturedValues:null}}function ct(e,t){null===e.last?e.first=e.last=t:(e.last.next=t,e.last=t),(0===e.expirationTime||e.expirationTime>t.expirationTime)&&(e.expirationTime=t.expirationTime)}function st(e){mo=yo=null;var t=e.alternate,n=e.updateQueue;null===n&&(n=e.updateQueue=ut(null)),null!==t?null===(e=t.updateQueue)&&(e=t.updateQueue=ut(null)):e=null,mo=n,yo=e!==n?e:null}function ft(e,t){st(e),e=mo;var n=yo;null===n?ct(e,t):null===e.last||null===n.last?(ct(e,t),ct(n,t)):(ct(e,t),n.last=t)}function dt(e,t,n,r){return e=e.partialState,"function"===typeof e?e.call(t,n,r):e}function pt(e,t,n,r,o,a){null!==e&&e.updateQueue===n&&(n=t.updateQueue={baseState:n.baseState,expirationTime:n.expirationTime,first:n.first,last:n.last,isInitialized:n.isInitialized,capturedValues:n.capturedValues,callbackList:null,hasForceUpdate:!1}),n.expirationTime=0,n.isInitialized?e=n.baseState:(e=n.baseState=t.memoizedState,n.isInitialized=!0);for(var i=!0,l=n.first,u=!1;null!==l;){var c=l.expirationTime;if(c>a){var s=n.expirationTime;(0===s||s>c)&&(n.expirationTime=c),u||(u=!0,n.baseState=e)}else u||(n.first=l.next,null===n.first&&(n.last=null)),l.isReplace?(e=dt(l,r,e,o),i=!0):(c=dt(l,r,e,o))&&(e=i?dn({},e,c):dn(e,c),i=!1),l.isForced&&(n.hasForceUpdate=!0),null!==l.callback&&(c=n.callbackList,null===c&&(c=n.callbackList=[]),c.push(l)),null!==l.capturedValue&&(c=n.capturedValues,null===c?n.capturedValues=[l.capturedValue]:c.push(l.capturedValue));l=l.next}return null!==n.callbackList?t.effectTag|=32:null!==n.first||n.hasForceUpdate||null!==n.capturedValues||(t.updateQueue=null),u||(n.baseState=e),e}function ht(e,t){var n=e.callbackList;if(null!==n)for(e.callbackList=null,e=0;em?(y=f,f=null):y=f.sibling;var v=p(r,f,l[m],u);if(null===v){null===f&&(f=y);break}e&&f&&null===v.alternate&&t(r,f),a=i(v,a,m),null===s?c=v:s.sibling=v,s=v,f=y}if(m===l.length)return n(r,f),c;if(null===f){for(;my?(v=m,m=null):v=m.sibling;var b=p(a,m,g.value,c);if(null===b){m||(m=v);break}e&&m&&null===b.alternate&&t(a,m),l=i(b,l,y),null===f?s=b:f.sibling=b,f=b,m=v}if(g.done)return n(a,m),s;if(null===m){for(;!g.done;y++,g=u.next())null!==(g=d(a,g.value,c))&&(l=i(g,l,y),null===f?s=g:f.sibling=g,f=g);return s}for(m=o(a,m);!g.done;y++,g=u.next())null!==(g=h(m,a,y,g.value,c))&&(e&&null!==g.alternate&&m.delete(null===g.key?y:g.key),l=i(g,l,y),null===f?s=g:f.sibling=g,f=g);return e&&m.forEach(function(e){return t(a,e)}),s}return function(e,o,i,u){"object"===typeof i&&null!==i&&i.type===dr&&null===i.key&&(i=i.props.children);var c="object"===typeof i&&null!==i;if(c)switch(i.$$typeof){case ur:e:{var s=i.key;for(c=o;null!==c;){if(c.key===s){if(10===c.tag?i.type===dr:c.type===i.type){n(e,c.sibling),o=a(c,i.type===dr?i.props.children:i.props,u),o.ref=yt(e,c,i),o.return=e,e=o;break e}n(e,c);break}t(e,c),c=c.sibling}i.type===dr?(o=tt(i.props.children,e.mode,u,i.key),o.return=e,e=o):(u=et(i,e.mode,u),u.ref=yt(e,o,i),u.return=e,e=u)}return l(e);case fr:e:{for(c=i.key;null!==o;){if(o.key===c){if(4===o.tag&&o.stateNode.containerInfo===i.containerInfo&&o.stateNode.implementation===i.implementation){n(e,o.sibling),o=a(o,i.children||[],u),o.return=e,e=o;break e}n(e,o);break}t(e,o),o=o.sibling}o=rt(i,e.mode,u),o.return=e,e=o}return l(e)}if("string"===typeof i||"number"===typeof i)return i=""+i,null!==o&&6===o.tag?(n(e,o.sibling),o=a(o,i,u),o.return=e,e=o):(n(e,o),o=nt(i,e.mode,u),o.return=e,e=o),l(e);if(vo(i))return m(e,o,i,u);if(re(i))return y(e,o,i,u);if(c&&vt(e,i),"undefined"===typeof i)switch(e.tag){case 2:case 1:u=e.type,r("152",u.displayName||u.name||"Component")}return n(e,o)}}function bt(e,t,n,o,a,i,l){function u(e,t,n){c(e,t,n,t.expirationTime)}function c(e,t,n,r){t.child=null===e?bo(t,null,n,r):go(t,e.child,n,r)}function s(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.effectTag|=128)}function f(e,t,n,r,o,a){if(s(e,t),!n&&!o)return r&&E(t,!1),m(e,t);n=t.stateNode,ir.current=t;var i=o?null:n.render();return t.effectTag|=1,o&&(c(e,t,null,a),t.child=null),c(e,t,i,a),t.memoizedState=n.state,t.memoizedProps=n.props,r&&E(t,!0),t.child}function d(e){var t=e.stateNode;t.pendingContext?T(e,t.pendingContext,t.pendingContext!==t.context):t.context&&T(e,t.context,!1),b(e,t.containerInfo)}function p(e,t,n,r){var o=e.child;for(null!==o&&(o.return=e);null!==o;){switch(o.tag){case 12:var a=0|o.stateNode;if(o.type===t&&0!==(a&n)){for(a=o;null!==a;){var i=a.alternate;if(0===a.expirationTime||a.expirationTime>r)a.expirationTime=r,null!==i&&(0===i.expirationTime||i.expirationTime>r)&&(i.expirationTime=r);else{if(null===i||!(0===i.expirationTime||i.expirationTime>r))break;i.expirationTime=r}a=a.return}a=null}else a=o.child;break;case 13:a=o.type===e.type?null:o.child;break;default:a=o.child}if(null!==a)a.return=o;else for(a=o;null!==a;){if(a===e){a=null;break}if(null!==(o=a.sibling)){a=o;break}a=a.return}o=a}}function h(e,t,n){var r=t.type._context,o=t.pendingProps,a=t.memoizedProps;if(!k()&&a===o)return t.stateNode=0,w(t),m(e,t);var i=o.value;if(t.memoizedProps=o,null===a)i=1073741823;else if(a.value===o.value){if(a.children===o.children)return t.stateNode=0,w(t),m(e,t);i=0}else{var l=a.value;if(l===i&&(0!==l||1/l===1/i)||l!==l&&i!==i){if(a.children===o.children)return t.stateNode=0,w(t),m(e,t);i=0}else if(i="function"===typeof r._calculateChangedBits?r._calculateChangedBits(l,i):1073741823,0===(i|=0)){if(a.children===o.children)return t.stateNode=0,w(t),m(e,t)}else p(t,r,i,n)}return t.stateNode=i,w(t),u(e,t,o.children),t.child}function m(e,t){if(null!==e&&t.child!==e.child&&r("153"),null!==t.child){e=t.child;var n=Je(e,e.pendingProps,e.expirationTime);for(t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,n=n.sibling=Je(e,e.pendingProps,e.expirationTime),n.return=t;n.sibling=null}return t.child}var y=e.shouldSetTextContent,v=e.shouldDeprioritizeSubtree,g=t.pushHostContext,b=t.pushHostContainer,w=o.pushProvider,C=n.getMaskedContext,x=n.getUnmaskedContext,k=n.hasContextChanged,_=n.pushContextProvider,T=n.pushTopLevelContextObject,E=n.invalidateContextProvider,S=a.enterHydrationState,P=a.resetHydrationState,N=a.tryToClaimNextHydratableInstance;e=mt(n,i,l,function(e,t){e.memoizedProps=t},function(e,t){e.memoizedState=t});var I=e.adoptClassInstance,O=e.callGetDerivedStateFromProps,D=e.constructClassInstance,R=e.mountClassInstance,F=e.resumeMountClassInstance,U=e.updateClassInstance;return{beginWork:function(e,t,n){if(0===t.expirationTime||t.expirationTime>n){switch(t.tag){case 3:d(t);break;case 2:_(t);break;case 4:b(t,t.stateNode.containerInfo);break;case 13:w(t)}return null}switch(t.tag){case 0:null!==e&&r("155");var o=t.type,a=t.pendingProps,i=x(t);return i=C(t,i),o=o(a,i),t.effectTag|=1,"object"===typeof o&&null!==o&&"function"===typeof o.render&&void 0===o.$$typeof?(i=t.type,t.tag=2,t.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,"function"===typeof i.getDerivedStateFromProps&&null!==(a=O(t,o,a,t.memoizedState))&&void 0!==a&&(t.memoizedState=dn({},t.memoizedState,a)),a=_(t),I(t,o),R(t,n),e=f(e,t,!0,a,!1,n)):(t.tag=1,u(e,t,o),t.memoizedProps=a,e=t.child),e;case 1:return a=t.type,n=t.pendingProps,k()||t.memoizedProps!==n?(o=x(t),o=C(t,o),a=a(n,o),t.effectTag|=1,u(e,t,a),t.memoizedProps=n,e=t.child):e=m(e,t),e;case 2:a=_(t),null===e?null===t.stateNode?(D(t,t.pendingProps),R(t,n),o=!0):o=F(t,n):o=U(e,t,n),i=!1;var l=t.updateQueue;return null!==l&&null!==l.capturedValues&&(i=o=!0),f(e,t,o,a,i,n);case 3:e:if(d(t),null!==(o=t.updateQueue)){if(i=t.memoizedState,a=pt(e,t,o,null,null,n),t.memoizedState=a,null!==(o=t.updateQueue)&&null!==o.capturedValues)o=null;else{if(i===a){P(),e=m(e,t);break e}o=a.element}i=t.stateNode,(null===e||null===e.child)&&i.hydrate&&S(t)?(t.effectTag|=2,t.child=bo(t,null,o,n)):(P(),u(e,t,o)),t.memoizedState=a,e=t.child}else P(),e=m(e,t);return e;case 5:return g(t),null===e&&N(t),a=t.type,l=t.memoizedProps,o=t.pendingProps,i=null!==e?e.memoizedProps:null,k()||l!==o||((l=1&t.mode&&v(a,o))&&(t.expirationTime=1073741823),l&&1073741823===n)?(l=o.children,y(a,o)?l=null:i&&y(a,i)&&(t.effectTag|=16),s(e,t),1073741823!==n&&1&t.mode&&v(a,o)?(t.expirationTime=1073741823,t.memoizedProps=o,e=null):(u(e,t,l),t.memoizedProps=o,e=t.child)):e=m(e,t),e;case 6:return null===e&&N(t),t.memoizedProps=t.pendingProps,null;case 8:t.tag=7;case 7:return a=t.pendingProps,k()||t.memoizedProps!==a||(a=t.memoizedProps),o=a.children,t.stateNode=null===e?bo(t,t.stateNode,o,n):go(t,e.stateNode,o,n),t.memoizedProps=a,t.stateNode;case 9:return null;case 4:return b(t,t.stateNode.containerInfo),a=t.pendingProps,k()||t.memoizedProps!==a?(null===e?t.child=go(t,null,a,n):u(e,t,a),t.memoizedProps=a,e=t.child):e=m(e,t),e;case 14:return n=t.type.render,n=n(t.pendingProps,t.ref),u(e,t,n),t.memoizedProps=n,t.child;case 10:return n=t.pendingProps,k()||t.memoizedProps!==n?(u(e,t,n),t.memoizedProps=n,e=t.child):e=m(e,t),e;case 11:return n=t.pendingProps.children,k()||null!==n&&t.memoizedProps!==n?(u(e,t,n),t.memoizedProps=n,e=t.child):e=m(e,t),e;case 13:return h(e,t,n);case 12:e:{o=t.type,i=t.pendingProps,l=t.memoizedProps,a=o._currentValue;var c=o._changedBits;if(k()||0!==c||l!==i){t.memoizedProps=i;var T=i.unstable_observedBits;if(void 0!==T&&null!==T||(T=1073741823),t.stateNode=T,0!==(c&T))p(t,o,c,n);else if(l===i){e=m(e,t);break e}n=i.children,n=n(a),u(e,t,n),e=t.child}else e=m(e,t)}return e;default:r("156")}}}}function wt(e,t,n,o,a){function i(e){e.effectTag|=4}var l=e.createInstance,u=e.createTextInstance,c=e.appendInitialChild,s=e.finalizeInitialChildren,f=e.prepareUpdate,d=e.persistence,p=t.getRootHostContainer,h=t.popHostContext,m=t.getHostContext,y=t.popHostContainer,v=n.popContextProvider,g=n.popTopLevelContextObject,b=o.popProvider,w=a.prepareToHydrateHostInstance,C=a.prepareToHydrateHostTextInstance,x=a.popHydrationState,k=void 0,_=void 0,T=void 0;return e.mutation?(k=function(){},_=function(e,t,n){(t.updateQueue=n)&&i(t)},T=function(e,t,n,r){n!==r&&i(t)}):r(d?"235":"236"),{completeWork:function(e,t,n){var o=t.pendingProps;switch(t.tag){case 1:return null;case 2:return v(t),e=t.stateNode,o=t.updateQueue,null!==o&&null!==o.capturedValues&&(t.effectTag&=-65,"function"===typeof e.componentDidCatch?t.effectTag|=256:o.capturedValues=null),null;case 3:return y(t),g(t),o=t.stateNode,o.pendingContext&&(o.context=o.pendingContext,o.pendingContext=null),null!==e&&null!==e.child||(x(t),t.effectTag&=-3),k(t),e=t.updateQueue,null!==e&&null!==e.capturedValues&&(t.effectTag|=256),null;case 5:h(t),n=p();var a=t.type;if(null!==e&&null!=t.stateNode){var d=e.memoizedProps,E=t.stateNode,S=m();E=f(E,a,d,o,n,S),_(e,t,E,a,d,o,n,S),e.ref!==t.ref&&(t.effectTag|=128)}else{if(!o)return null===t.stateNode&&r("166"),null;if(e=m(),x(t))w(t,n,e)&&i(t);else{d=l(a,o,n,e,t);e:for(S=t.child;null!==S;){if(5===S.tag||6===S.tag)c(d,S.stateNode);else if(4!==S.tag&&null!==S.child){S.child.return=S,S=S.child;continue}if(S===t)break;for(;null===S.sibling;){if(null===S.return||S.return===t)break e;S=S.return}S.sibling.return=S.return,S=S.sibling}s(d,a,o,n,e)&&i(t),t.stateNode=d}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)T(e,t,e.memoizedProps,o);else{if("string"!==typeof o)return null===t.stateNode&&r("166"),null;e=p(),n=m(),x(t)?C(t)&&i(t):t.stateNode=u(o,e,n,t)}return null;case 7:(o=t.memoizedProps)||r("165"),t.tag=8,a=[];e:for((d=t.stateNode)&&(d.return=t);null!==d;){if(5===d.tag||6===d.tag||4===d.tag)r("247");else if(9===d.tag)a.push(d.pendingProps.value);else if(null!==d.child){d.child.return=d,d=d.child;continue}for(;null===d.sibling;){if(null===d.return||d.return===t)break e;d=d.return}d.sibling.return=d.return,d=d.sibling}return d=o.handler,o=d(o.props,a),t.child=go(t,null!==e?e.child:null,o,n),t.child;case 8:return t.tag=7,null;case 9:case 14:case 10:case 11:return null;case 4:return y(t),k(t),null;case 13:return b(t),null;case 12:return null;case 0:r("167");default:r("156")}}}}function Ct(e,t,n,r,o){var a=e.popHostContainer,i=e.popHostContext,l=t.popContextProvider,u=t.popTopLevelContextObject,c=n.popProvider;return{throwException:function(e,t,n){t.effectTag|=512,t.firstEffect=t.lastEffect=null,t={value:n,source:t,stack:ae(t)};do{switch(e.tag){case 3:return st(e),e.updateQueue.capturedValues=[t],void(e.effectTag|=1024);case 2:if(n=e.stateNode,0===(64&e.effectTag)&&null!==n&&"function"===typeof n.componentDidCatch&&!o(n)){st(e),n=e.updateQueue;var r=n.capturedValues;return null===r?n.capturedValues=[t]:r.push(t),void(e.effectTag|=1024)}}e=e.return}while(null!==e)},unwindWork:function(e){switch(e.tag){case 2:l(e);var t=e.effectTag;return 1024&t?(e.effectTag=-1025&t|64,e):null;case 3:return a(e),u(e),t=e.effectTag,1024&t?(e.effectTag=-1025&t|64,e):null;case 5:return i(e),null;case 4:return a(e),null;case 13:return c(e),null;default:return null}},unwindInterruptedWork:function(e){switch(e.tag){case 2:l(e);break;case 3:a(e),u(e);break;case 5:i(e);break;case 4:a(e);break;case 13:c(e)}}}}function xt(e,t){var n=t.source;null===t.stack&&ae(n),null!==n&&oe(n),t=t.value,null!==e&&2===e.tag&&oe(e);try{t&&t.suppressReactErrorLogging||console.error(t)}catch(e){e&&e.suppressReactErrorLogging||console.error(e)}}function kt(e,t,n,o,a){function i(e){var n=e.ref;if(null!==n)if("function"===typeof n)try{n(null)}catch(n){t(e,n)}else n.current=null}function l(e){switch("function"===typeof lt&<(e),e.tag){case 2:i(e);var n=e.stateNode;if("function"===typeof n.componentWillUnmount)try{n.props=e.memoizedProps,n.state=e.memoizedState,n.componentWillUnmount()}catch(n){t(e,n)}break;case 5:i(e);break;case 7:u(e.stateNode);break;case 4:d&&s(e)}}function u(e){for(var t=e;;)if(l(t),null===t.child||d&&4===t.tag){if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return}t.sibling.return=t.return,t=t.sibling}else t.child.return=t,t=t.child}function c(e){return 5===e.tag||3===e.tag||4===e.tag}function s(e){for(var t=e,n=!1,o=void 0,a=void 0;;){if(!n){n=t.return;e:for(;;){switch(null===n&&r("160"),n.tag){case 5:o=n.stateNode,a=!1;break e;case 3:case 4:o=n.stateNode.containerInfo,a=!0;break e}n=n.return}n=!0}if(5===t.tag||6===t.tag)u(t),a?x(o,t.stateNode):C(o,t.stateNode);else if(4===t.tag?o=t.stateNode.containerInfo:l(t),null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return;t=t.return,4===t.tag&&(n=!1)}t.sibling.return=t.return,t=t.sibling}}var f=e.getPublicInstance,d=e.mutation;e=e.persistence,d||r(e?"235":"236");var p=d.commitMount,h=d.commitUpdate,m=d.resetTextContent,y=d.commitTextUpdate,v=d.appendChild,g=d.appendChildToContainer,b=d.insertBefore,w=d.insertInContainerBefore,C=d.removeChild,x=d.removeChildFromContainer;return{commitBeforeMutationLifeCycles:function(e,t){switch(t.tag){case 2:if(2048&t.effectTag&&null!==e){var n=e.memoizedProps,o=e.memoizedState;e=t.stateNode,e.props=t.memoizedProps,e.state=t.memoizedState,t=e.getSnapshotBeforeUpdate(n,o),e.__reactInternalSnapshotBeforeUpdate=t}break;case 3:case 5:case 6:case 4:break;default:r("163")}},commitResetTextContent:function(e){m(e.stateNode)},commitPlacement:function(e){e:{for(var t=e.return;null!==t;){if(c(t)){var n=t;break e}t=t.return}r("160"),n=void 0}var o=t=void 0;switch(n.tag){case 5:t=n.stateNode,o=!1;break;case 3:case 4:t=n.stateNode.containerInfo,o=!0;break;default:r("161")}16&n.effectTag&&(m(t),n.effectTag&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||c(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag;){if(2&n.effectTag)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.effectTag)){n=n.stateNode;break e}}for(var a=e;;){if(5===a.tag||6===a.tag)n?o?w(t,a.stateNode,n):b(t,a.stateNode,n):o?g(t,a.stateNode):v(t,a.stateNode);else if(4!==a.tag&&null!==a.child){a.child.return=a,a=a.child;continue}if(a===e)break;for(;null===a.sibling;){if(null===a.return||a.return===e)return;a=a.return}a.sibling.return=a.return,a=a.sibling}},commitDeletion:function(e){s(e),e.return=null,e.child=null,e.alternate&&(e.alternate.child=null,e.alternate.return=null)},commitWork:function(e,t){switch(t.tag){case 2:break;case 5:var n=t.stateNode;if(null!=n){var o=t.memoizedProps;e=null!==e?e.memoizedProps:o;var a=t.type,i=t.updateQueue;t.updateQueue=null,null!==i&&h(n,i,a,e,o,t)}break;case 6:null===t.stateNode&&r("162"),n=t.memoizedProps,y(t.stateNode,null!==e?e.memoizedProps:n,n);break;case 3:break;default:r("163")}},commitLifeCycles:function(e,t,n){switch(n.tag){case 2:if(e=n.stateNode,4&n.effectTag)if(null===t)e.props=n.memoizedProps,e.state=n.memoizedState,e.componentDidMount();else{var o=t.memoizedProps;t=t.memoizedState,e.props=n.memoizedProps,e.state=n.memoizedState,e.componentDidUpdate(o,t,e.__reactInternalSnapshotBeforeUpdate)}n=n.updateQueue,null!==n&&ht(n,e);break;case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:e=f(n.child.stateNode);break;case 2:e=n.child.stateNode}ht(t,e)}break;case 5:e=n.stateNode,null===t&&4&n.effectTag&&p(e,n.type,n.memoizedProps,n);break;case 6:case 4:break;default:r("163")}},commitErrorLogging:function(e,t){switch(e.tag){case 2:var n=e.type;t=e.stateNode;var o=e.updateQueue;(null===o||null===o.capturedValues)&&r("264");var i=o.capturedValues;for(o.capturedValues=null,"function"!==typeof n.getDerivedStateFromCatch&&a(t),t.props=e.memoizedProps,t.state=e.memoizedState,n=0;nt||(n.current=e[t],e[t]=null,t--)},push:function(n,r){t++,e[t]=n.current,n.current=r},checkThatStackIsEmpty:function(){},resetStackAfterFatalErrorInDev:function(){}}}function Nt(e){function t(){if(null!==J)for(var e=J.return;null!==e;)D(e),e=e.return;ee=null,te=0,J=null,oe=!1}function n(e){return null!==ie&&ie.has(e)}function o(e){for(;;){var t=e.alternate,n=e.return,r=e.sibling;if(0===(512&e.effectTag)){t=N(t,e,te);var o=e;if(1073741823===te||1073741823!==o.expirationTime){e:switch(o.tag){case 3:case 2:var a=o.updateQueue;a=null===a?0:a.expirationTime;break e;default:a=0}for(var i=o.child;null!==i;)0!==i.expirationTime&&(0===a||a>i.expirationTime)&&(a=i.expirationTime),i=i.sibling;o.expirationTime=a}if(null!==t)return t;if(null!==n&&0===(512&n.effectTag)&&(null===n.firstEffect&&(n.firstEffect=e.firstEffect),null!==e.lastEffect&&(null!==n.lastEffect&&(n.lastEffect.nextEffect=e.firstEffect),n.lastEffect=e.lastEffect),1he)&&(he=e),e}function s(e,n){e:{for(;null!==e;){if((0===e.expirationTime||e.expirationTime>n)&&(e.expirationTime=n),null!==e.alternate&&(0===e.alternate.expirationTime||e.alternate.expirationTime>n)&&(e.alternate.expirationTime=n),null===e.return){if(3!==e.tag){n=void 0;break e}var o=e.stateNode;!Z&&0!==te&&nke&&r("185")}e=e.return}n=void 0}return n}function f(){return G=H()-Q,q=2+(G/10|0)}function d(e,t,n,r,o){var a=Y;Y=1;try{return e(t,n,r,o)}finally{Y=a}}function p(e){if(0!==ce){if(e>ce)return;W(se)}var t=H()-Q;ce=e,se=V(y,{timeout:10*(e-2)-t})}function h(e,t){if(null===e.nextScheduledRoot)e.remainingExpirationTime=t,null===ue?(le=ue=e,e.nextScheduledRoot=e):(ue=ue.nextScheduledRoot=e,ue.nextScheduledRoot=le);else{var n=e.remainingExpirationTime;(0===n||t=pe)&&(!me||f()>=pe);)w(de,pe,!me),m();else for(;null!==de&&0!==pe&&(0===e||e>=pe);)w(de,pe,!1),m();null!==ge&&(ce=0,se=-1),0!==pe&&p(pe),ge=null,me=!1,b()}function b(){if(_e=0,null!==xe){var e=xe;xe=null;for(var t=0;tTe)&&(me=!0)}function k(e){null===de&&r("246"),de.remainingExpirationTime=0,ye||(ye=!0,ve=e)}var _=Pt(),T=_t(e,_),E=Et(_);_=St(_);var S=Tt(e),P=bt(e,T,E,_,S,s,c).beginWork,N=wt(e,T,E,_,S).completeWork;T=Ct(T,E,_,s,n);var I=T.throwException,O=T.unwindWork,D=T.unwindInterruptedWork;T=kt(e,u,s,c,function(e){null===ie?ie=new Set([e]):ie.add(e)},f);var R=T.commitBeforeMutationLifeCycles,F=T.commitResetTextContent,U=T.commitPlacement,M=T.commitDeletion,A=T.commitWork,L=T.commitLifeCycles,j=T.commitErrorLogging,z=T.commitAttachRef,B=T.commitDetachRef,H=e.now,V=e.scheduleDeferredCallback,W=e.cancelDeferredCallback,K=e.prepareForCommit,$=e.resetAfterCommit,Q=H(),q=2,G=Q,X=0,Y=0,Z=!1,J=null,ee=null,te=0,ne=null,re=!1,oe=!1,ie=null,le=null,ue=null,ce=0,se=-1,fe=!1,de=null,pe=0,he=0,me=!1,ye=!1,ve=null,ge=null,be=!1,we=!1,Ce=!1,xe=null,ke=1e3,_e=0,Te=1;return{recalculateCurrentTime:f,computeExpirationForFiber:c,scheduleWork:s,requestWork:h,flushRoot:function(e,t){fe&&r("253"),de=e,pe=t,w(e,t,!1),v(),b()},batchedUpdates:function(e,t){var n=be;be=!0;try{return e(t)}finally{(be=n)||fe||v()}},unbatchedUpdates:function(e,t){if(be&&!we){we=!0;try{return e(t)}finally{we=!1}}return e(t)},flushSync:function(e,t){fe&&r("187");var n=be;be=!0;try{return d(e,t)}finally{be=n,v()}},flushControlled:function(e){var t=be;be=!0;try{d(e)}finally{(be=t)||fe||g(1,!1,null)}},deferredUpdates:function(e){var t=Y;Y=25*(1+((f()+500)/25|0));try{return e()}finally{Y=t}},syncUpdates:d,interactiveUpdates:function(e,t,n){if(Ce)return e(t,n);be||fe||0===he||(g(he,!1,null),he=0);var r=Ce,o=be;be=Ce=!0;try{return e(t,n)}finally{Ce=r,(be=o)||fe||v()}},flushInteractiveUpdates:function(){fe||0===he||(g(he,!1,null),he=0)},computeUniqueAsyncExpiration:function(){var e=25*(1+((f()+500)/25|0));return e<=X&&(e=X+1),X=e},legacyContext:E}}function It(e){function t(e,t,n,r,o,a){if(r=t.current,n){n=n._reactInternalFiber;var l=u(n);n=c(n)?s(n,l):l}else n=vn;return null===t.context?t.context=n:t.pendingContext=n,t=a,ft(r,{expirationTime:o,partialState:{element:e},callback:void 0===t?null:t,isReplace:!1,isForced:!1,capturedValue:null,next:null}),i(r,o),o}var n=e.getPublicInstance;e=Nt(e);var o=e.recalculateCurrentTime,a=e.computeExpirationForFiber,i=e.scheduleWork,l=e.legacyContext,u=l.findCurrentUnmaskedContext,c=l.isContextProvider,s=l.processChildContext;return{createContainer:function(e,t,n){return t=new Ze(3,null,null,t?3:0),e={current:t,containerInfo:e,pendingChildren:null,pendingCommitExpirationTime:0,finishedWork:null,context:null,pendingContext:null,hydrate:n,remainingExpirationTime:0,firstBatch:null,nextScheduledRoot:null},t.stateNode=e},updateContainer:function(e,n,r,i){var l=n.current,u=o();return l=a(l),t(e,n,r,u,l,i)},updateContainerAtExpirationTime:function(e,n,r,a,i){return t(e,n,r,o(),a,i)},flushRoot:e.flushRoot,requestWork:e.requestWork,computeUniqueAsyncExpiration:e.computeUniqueAsyncExpiration,batchedUpdates:e.batchedUpdates,unbatchedUpdates:e.unbatchedUpdates,deferredUpdates:e.deferredUpdates,syncUpdates:e.syncUpdates,interactiveUpdates:e.interactiveUpdates,flushInteractiveUpdates:e.flushInteractiveUpdates,flushControlled:e.flushControlled,flushSync:e.flushSync,getPublicRootInstance:function(e){if(e=e.current,!e.child)return null;switch(e.child.tag){case 5:return n(e.child.stateNode);default:return e.child.stateNode}},findHostInstance:function(e){var t=e._reactInternalFiber;return void 0===t&&("function"===typeof e.render?r("188"):r("268",Object.keys(e))),e=Ue(t),null===e?null:e.stateNode},findHostInstanceWithNoPortals:function(e){return e=Me(e),null===e?null:e.stateNode},injectIntoDevTools:function(e){var t=e.findFiberByHostInstance;return at(dn({},e,{findHostInstanceByFiber:function(e){return e=Ue(e),null===e?null:e.stateNode},findFiberByHostInstance:function(e){return t?t(e):null}}))}}}function Ot(e,t,n){var r=3=t.length||r("93"),t=t[0]),n=""+t),null==n&&(n="")),e._wrapperState={initialValue:""+n}}function Lt(e,t){var n=t.value;null!=n&&(n=""+n,n!==e.value&&(e.value=n),null==t.defaultValue&&(e.defaultValue=n)),null!=t.defaultValue&&(e.defaultValue=t.defaultValue)}function jt(e){var t=e.textContent;t===e._wrapperState.initialValue&&(e.value=t)}function zt(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function Bt(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?zt(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}function Ht(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function Vt(e,t){e=e.style;for(var n in t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),o=n,a=t[n];o=null==a||"boolean"===typeof a||""===a?"":r||"number"!==typeof a||0===a||Bo.hasOwnProperty(o)&&Bo[o]?(""+a).trim():a+"px","float"===n&&(n="cssFloat"),r?e.setProperty(n,o):e[n]=o}}function Wt(e,t,n){t&&(Vo[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML)&&r("137",e,n()),null!=t.dangerouslySetInnerHTML&&(null!=t.children&&r("60"),"object"===typeof t.dangerouslySetInnerHTML&&"__html"in t.dangerouslySetInnerHTML||r("61")),null!=t.style&&"object"!==typeof t.style&&r("62",n()))}function Kt(e,t){if(-1===e.indexOf("-"))return"string"===typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}function $t(e,t){e=9===e.nodeType||11===e.nodeType?e:e.ownerDocument;var n=Qe(e);t=_n[t];for(var r=0;r<\/script>",e=e.removeChild(e.firstChild)):e="string"===typeof t.is?n.createElement(e,{is:t.is}):n.createElement(e):e=n.createElementNS(r,e),e}function qt(e,t){return(9===t.nodeType?t:t.ownerDocument).createTextNode(e)}function Gt(e,t,n,r){var o=Kt(t,n);switch(t){case"iframe":case"object":Be("topLoad","load",e);var a=n;break;case"video":case"audio":for(a in to)to.hasOwnProperty(a)&&Be(a,to[a],e);a=n;break;case"source":Be("topError","error",e),a=n;break;case"img":case"image":case"link":Be("topError","error",e),Be("topLoad","load",e),a=n;break;case"form":Be("topReset","reset",e),Be("topSubmit","submit",e),a=n;break;case"details":Be("topToggle","toggle",e),a=n;break;case"input":pe(e,n),a=de(e,n),Be("topInvalid","invalid",e),$t(r,"onChange");break;case"option":a=Rt(e,n);break;case"select":Ut(e,n),a=dn({},n,{value:void 0}),Be("topInvalid","invalid",e),$t(r,"onChange");break;case"textarea":At(e,n),a=Mt(e,n),Be("topInvalid","invalid",e),$t(r,"onChange");break;default:a=n}Wt(t,a,Wo);var i,l=a;for(i in l)if(l.hasOwnProperty(i)){var u=l[i];"style"===i?Vt(e,u,Wo):"dangerouslySetInnerHTML"===i?null!=(u=u?u.__html:void 0)&&zo(e,u):"children"===i?"string"===typeof u?("textarea"!==t||""!==u)&&Ht(e,u):"number"===typeof u&&Ht(e,""+u):"suppressContentEditableWarning"!==i&&"suppressHydrationWarning"!==i&&"autoFocus"!==i&&(kn.hasOwnProperty(i)?null!=u&&$t(r,i):null!=u&&fe(e,i,u,o))}switch(t){case"input":te(e),ye(e,n);break;case"textarea":te(e),jt(e,n);break;case"option":null!=n.value&&e.setAttribute("value",n.value);break;case"select":e.multiple=!!n.multiple,t=n.value,null!=t?Ft(e,!!n.multiple,t,!1):null!=n.defaultValue&&Ft(e,!!n.multiple,n.defaultValue,!0);break;default:"function"===typeof a.onClick&&(e.onclick=pn)}}function Xt(e,t,n,r,o){var a=null;switch(t){case"input":n=de(e,n),r=de(e,r),a=[];break;case"option":n=Rt(e,n),r=Rt(e,r),a=[];break;case"select":n=dn({},n,{value:void 0}),r=dn({},r,{value:void 0}),a=[];break;case"textarea":n=Mt(e,n),r=Mt(e,r),a=[];break;default:"function"!==typeof n.onClick&&"function"===typeof r.onClick&&(e.onclick=pn)}Wt(t,r,Wo),t=e=void 0;var i=null;for(e in n)if(!r.hasOwnProperty(e)&&n.hasOwnProperty(e)&&null!=n[e])if("style"===e){var l=n[e];for(t in l)l.hasOwnProperty(t)&&(i||(i={}),i[t]="")}else"dangerouslySetInnerHTML"!==e&&"children"!==e&&"suppressContentEditableWarning"!==e&&"suppressHydrationWarning"!==e&&"autoFocus"!==e&&(kn.hasOwnProperty(e)?a||(a=[]):(a=a||[]).push(e,null));for(e in r){var u=r[e];if(l=null!=n?n[e]:void 0,r.hasOwnProperty(e)&&u!==l&&(null!=u||null!=l))if("style"===e)if(l){for(t in l)!l.hasOwnProperty(t)||u&&u.hasOwnProperty(t)||(i||(i={}),i[t]="");for(t in u)u.hasOwnProperty(t)&&l[t]!==u[t]&&(i||(i={}),i[t]=u[t])}else i||(a||(a=[]),a.push(e,i)),i=u;else"dangerouslySetInnerHTML"===e?(u=u?u.__html:void 0,l=l?l.__html:void 0,null!=u&&l!==u&&(a=a||[]).push(e,""+u)):"children"===e?l===u||"string"!==typeof u&&"number"!==typeof u||(a=a||[]).push(e,""+u):"suppressContentEditableWarning"!==e&&"suppressHydrationWarning"!==e&&(kn.hasOwnProperty(e)?(null!=u&&$t(o,e),a||l===u||(a=[])):(a=a||[]).push(e,u))}return i&&(a=a||[]).push("style",i),a}function Yt(e,t,n,r,o){"input"===n&&"radio"===o.type&&null!=o.name&&he(e,o),Kt(n,r),r=Kt(n,o);for(var a=0;a=Kn),qn=String.fromCharCode(32),Gn={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"topBlur topCompositionEnd topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"topBlur topCompositionStart topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"topBlur topCompositionUpdate topKeyDown topKeyPress topKeyUp topMouseDown".split(" ")}},Xn=!1,Yn=!1,Zn={eventTypes:Gn,extractEvents:function(e,t,n,r){var o=void 0,a=void 0;if(Wn)e:{switch(e){case"topCompositionStart":o=Gn.compositionStart;break e;case"topCompositionEnd":o=Gn.compositionEnd;break e;case"topCompositionUpdate":o=Gn.compositionUpdate;break e}o=void 0}else Yn?L(e,n)&&(o=Gn.compositionEnd):"topKeyDown"===e&&229===n.keyCode&&(o=Gn.compositionStart);return o?(Qn&&(Yn||o!==Gn.compositionStart?o===Gn.compositionEnd&&Yn&&(a=D()):(Ln._root=r,Ln._startText=R(),Yn=!0)),o=Bn.getPooled(o,t,n,r),a?o.data=a:null!==(a=j(n))&&(o.data=a),N(o),a=o):a=null,(e=$n?z(e,n):B(e,n))?(t=Hn.getPooled(Gn.beforeInput,t,n,r),t.data=e,N(t)):t=null,null===a?t:null===t?a:[a,t]}},Jn=null,er={injectFiberControlledHostComponent:function(e){Jn=e}},tr=null,nr=null,rr=Object.freeze({injection:er,enqueueStateRestore:V,needsStateRestore:W,restoreStateIfNeeded:K}),or=!1,ar={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0},ir=sn.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,lr="function"===typeof Symbol&&Symbol.for,ur=lr?Symbol.for("react.element"):60103,cr=lr?Symbol.for("react.call"):60104,sr=lr?Symbol.for("react.return"):60105,fr=lr?Symbol.for("react.portal"):60106,dr=lr?Symbol.for("react.fragment"):60107,pr=lr?Symbol.for("react.strict_mode"):60108,hr=lr?Symbol.for("react.provider"):60109,mr=lr?Symbol.for("react.context"):60110,yr=lr?Symbol.for("react.async_mode"):60111,vr=lr?Symbol.for("react.forward_ref"):60112,gr="function"===typeof Symbol&&Symbol.iterator,br=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,wr={},Cr={},xr={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){xr[e]=new ce(e,0,!1,e,null)}),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var t=e[0];xr[t]=new ce(t,1,!1,e[1],null)}),["contentEditable","draggable","spellCheck","value"].forEach(function(e){xr[e]=new ce(e,2,!1,e.toLowerCase(),null)}),["autoReverse","externalResourcesRequired","preserveAlpha"].forEach(function(e){xr[e]=new ce(e,2,!1,e,null)}),"allowFullScreen async autoFocus autoPlay controls default defer disabled formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){xr[e]=new ce(e,3,!1,e.toLowerCase(),null)}),["checked","multiple","muted","selected"].forEach(function(e){xr[e]=new ce(e,3,!0,e.toLowerCase(),null)}),["capture","download"].forEach(function(e){xr[e]=new ce(e,4,!1,e.toLowerCase(),null)}),["cols","rows","size","span"].forEach(function(e){xr[e]=new ce(e,6,!1,e.toLowerCase(),null)}),["rowSpan","start"].forEach(function(e){xr[e]=new ce(e,5,!1,e.toLowerCase(),null)});var kr=/[\-:]([a-z])/g;"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(e){var t=e.replace(kr,se);xr[t]=new ce(t,1,!1,e,null)}),"xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(e){var t=e.replace(kr,se);xr[t]=new ce(t,1,!1,e,"http://www.w3.org/1999/xlink")}),["xml:base","xml:lang","xml:space"].forEach(function(e){var t=e.replace(kr,se);xr[t]=new ce(t,1,!1,e,"http://www.w3.org/XML/1998/namespace")}),xr.tabIndex=new ce("tabIndex",1,!1,"tabindex",null);var _r={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"topBlur topChange topClick topFocus topInput topKeyDown topKeyUp topSelectionChange".split(" ")}},Tr=null,Er=null,Sr=!1;fn.canUseDOM&&(Sr=Z("input")&&(!document.documentMode||9=document.documentMode,io={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"topBlur topContextMenu topFocus topKeyDown topKeyUp topMouseDown topMouseUp topSelectionChange".split(" ")}},lo=null,uo=null,co=null,so=!1,fo={eventTypes:io,extractEvents:function(e,t,n,r){var o,a=r.window===r?r.document:9===r.nodeType?r:r.ownerDocument;if(!(o=!a)){e:{a=Qe(a),o=_n.onSelect;for(var i=0;i=Do-e){if(!(-1!==Io&&Io<=e))return void(Oo||(Oo=!0,requestAnimationFrame(Ao)));Uo.didTimeout=!0}else Uo.didTimeout=!1;Io=-1,e=Po,Po=null,null!==e&&e(Uo)}},!1);var Ao=function(e){Oo=!1;var t=e-Do+Fo;tt&&(t=8),Fo=t"+t+"",t=jo.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}),Bo={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},Ho=["Webkit","ms","Moz","O"];Object.keys(Bo).forEach(function(e){Ho.forEach(function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),Bo[t]=Bo[e]})});var Vo=dn({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0}),Wo=pn.thatReturns(""),Ko=Object.freeze({createElement:Qt,createTextNode:qt,setInitialProperties:Gt,diffProperties:Xt,updateProperties:Yt,diffHydratedProperties:Zt,diffHydratedText:Jt,warnForUnmatchedText:function(){},warnForDeletedHydratableElement:function(){},warnForDeletedHydratableText:function(){},warnForInsertedHydratedElement:function(){},warnForInsertedHydratedText:function(){},restoreControlledState:function(e,t,n){switch(t){case"input":if(me(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;tr&&(o=r,r=e,e=o),o=Ge(n,e);var a=Ge(n,r);if(o&&a&&(1!==t.rangeCount||t.anchorNode!==o.node||t.anchorOffset!==o.offset||t.focusNode!==a.node||t.focusOffset!==a.offset)){var i=document.createRange();i.setStart(o.node,o.offset),t.removeAllRanges(),e>r?(t.addRange(i),t.extend(a.node,a.offset)):(i.setEnd(a.node,a.offset),t.addRange(i))}}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for(n.focus(),n=0;n