├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── webpack.config.js
    └── webpackDevServer.config.js
├── package-lock.json
├── package.json
├── public
    ├── 1.png
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
└── src
    ├── Main
        ├── index.css
        ├── index.jsx
        └── menu.js
    ├── address
        ├── addresslist.jsx
        ├── css
        │   ├── add.css
        │   ├── header.css
        │   ├── index.css
        │   ├── reset.css
        │   └── section.css
        ├── editaddress.jsx
        ├── from.jsx
        ├── header.jsx
        ├── index.jsx
        ├── js
        │   └── rem.js
        └── pushaddress.jsx
    ├── catalog
        ├── base.jsx
        ├── exam.jsx
        └── lesson.jsx
    ├── cinema
        ├── detail.jsx
        ├── home.css
        ├── home.jsx
        ├── img
        │   ├── mp1.jpg
        │   ├── mp2.jpg
        │   ├── mp3.jpg
        │   └── mp4.jpg
        ├── index.jsx
        ├── search.css
        └── search.jsx
    ├── drag
        └── index.jsx
    ├── examDay2
        └── index.jsx
    ├── examDay3
        └── index.jsx
    ├── index.js
    ├── login
        ├── autho.jsx
        ├── index.jsx
        └── login.jsx
    ├── monthA
        ├── index.jsx
        ├── pagedata.js
        └── style.module.css
    ├── newYear
        ├── css
        │   └── style.css
        ├── data.js
        ├── img
        │   ├── 1.png
        │   ├── 11.jpg
        │   ├── 12.jpg
        │   ├── 13.jpg
        │   ├── 14.jpg
        │   ├── 15.jpg
        │   ├── 16.jpg
        │   ├── 17.jpg
        │   ├── 2.png
        │   ├── 3.png
        │   ├── 4.png
        │   ├── 5.png
        │   ├── 6.png
        │   ├── 7.png
        │   ├── 8.png
        │   └── 9.png
        ├── index.jsx
        ├── kll.jsx
        ├── quest.jsx
        └── start.jsx
    ├── pay
        ├── index.css
        ├── index.jsx
        ├── more.css
        ├── more.jsx
        └── start.jsx
    ├── router.js
    ├── router_task
        └── index.jsx
    ├── shopcar
        ├── index.css
        ├── index.jsx
        └── 商品详情.png
    ├── shopping
        ├── checke.jsx
        ├── computed.jsx
        ├── data.js
        ├── group.jsx
        ├── index.jsx
        ├── item.jsx
        ├── provider.jsx
        └── total.jsx
    ├── store
        ├── index.jsx
        └── reducer
        │   ├── cinema.js
        │   ├── list.jsx
        │   └── pay.js
    └── studentMsg
        └── index.jsx


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-demo
 2 | ### 使用框架
 3 | react
 4 | 创建目录 
 5 | ```
 6 | create-react-app react-demo
 7 | cd react-demo
 8 | ```
 9 | ### 安装依赖
10 | ```
11 | npm install
12 | cnpm install
13 | ```
14 | ### 运行
15 | ```
16 | npm start
17 | ```
18 | ### 打包
19 | ```
20 | npm run build
21 | ```
22 | 点击最下方的空白页面或是右侧的放大图标
23 | <img src="./public/1.png">
24 | 点击右侧的小箭头会显示可以浏览的内容，点击即可进入浏览
25 | 
26 | ### 内容介绍
27 | #### cinema
28 | 猫眼电影，简单渲染和模糊搜索
29 | #### pay
30 | 业务中心 可编辑自己的应用（添加或是删除，或是查看）
31 | #### monthA
32 | 使用递归写出一个文件目录，且可添加可删除
33 | #### shopping 
34 | 一个购物车中出现的多选，全选，全不选功能
35 | #### shopCar
36 | 购物页面上的商品选取颜色和大小码
37 | #### drag 
38 | 小方块的拖拽
39 | #### address 
40 | 收货地址


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     const assetFilename = JSON.stringify(path.basename(filename));
11 | 
12 |     if (filename.match(/\.svg$/)) {
13 |       return `module.exports = {
14 |         __esModule: true,
15 |         default: ${assetFilename},
16 |         ReactComponent: (props) => ({
17 |           $$typeof: Symbol.for('react.element'),
18 |           type: 'svg',
19 |           ref: null,
20 |           key: null,
21 |           props: Object.assign({}, props, {
22 |             children: ${assetFilename}
23 |           })
24 |         }),
25 |       };`;
26 |     }
27 | 
28 |     return `module.exports = ${assetFilename};`;
29 |   },
30 | };
31 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   yarnLockFile: resolveApp('yarn.lock'),
80 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
81 |   proxySetup: resolveApp('src/setupProxy.js'),
82 |   appNodeModules: resolveApp('node_modules'),
83 |   publicUrl: getPublicUrl(resolveApp('package.json')),
84 |   servedPath: getServedPath(resolveApp('package.json')),
85 | };
86 | 
87 | 
88 | 
89 | module.exports.moduleFileExtensions = moduleFileExtensions;
90 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const resolve = require('resolve');
  7 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 10 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 11 | const TerserPlugin = require('terser-webpack-plugin');
 12 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 13 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 14 | const safePostCssParser = require('postcss-safe-parser');
 15 | const ManifestPlugin = require('webpack-manifest-plugin');
 16 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 17 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 18 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 19 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 20 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 21 | const paths = require('./paths');
 22 | const getClientEnvironment = require('./env');
 23 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 24 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 25 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 26 | 
 27 | 
 28 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 29 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 30 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 31 | // makes for a smoother build process.
 32 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 33 | 
 34 | // Check if TypeScript is setup
 35 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 36 | 
 37 | // style files regexes
 38 | const cssRegex = /\.css$/;
 39 | const cssModuleRegex = /\.module\.css$/;
 40 | const sassRegex = /\.(scss|sass)$/;
 41 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 42 | 
 43 | // This is the production and development configuration.
 44 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 45 | module.exports = function(webpackEnv) {
 46 |   const isEnvDevelopment = webpackEnv === 'development';
 47 |   const isEnvProduction = webpackEnv === 'production';
 48 | 
 49 |   // Webpack uses `publicPath` to determine where the app is being served from.
 50 |   // It requires a trailing slash, or the file assets will get an incorrect path.
 51 |   // In development, we always serve from the root. This makes config easier.
 52 |   const publicPath = isEnvProduction
 53 |     ? paths.servedPath
 54 |     : isEnvDevelopment && '/';
 55 |   // Some apps do not use client-side routing with pushState.
 56 |   // For these, "homepage" can be set to "." to enable relative asset paths.
 57 |   const shouldUseRelativeAssetPaths = publicPath === './';
 58 | 
 59 |   // `publicUrl` is just like `publicPath`, but we will provide it to our app
 60 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 61 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 62 |   const publicUrl = isEnvProduction
 63 |     ? publicPath.slice(0, -1)
 64 |     : isEnvDevelopment && '';
 65 |   // Get environment variables to inject into our app.
 66 |   const env = getClientEnvironment(publicUrl);
 67 | 
 68 |   // common function to get style loaders
 69 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 70 |     const loaders = [
 71 |       isEnvDevelopment && require.resolve('style-loader'),
 72 |       isEnvProduction && {
 73 |         loader: MiniCssExtractPlugin.loader,
 74 |         options: Object.assign(
 75 |           {},
 76 |           shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
 77 |         ),
 78 |       },
 79 |       {
 80 |         loader: require.resolve('css-loader'),
 81 |         options: cssOptions,
 82 |       },
 83 |       {
 84 |         // Options for PostCSS as we reference these options twice
 85 |         // Adds vendor prefixing based on your specified browser support in
 86 |         // package.json
 87 |         loader: require.resolve('postcss-loader'),
 88 |         options: {
 89 |           // Necessary for external CSS imports to work
 90 |           // https://github.com/facebook/create-react-app/issues/2677
 91 |           ident: 'postcss',
 92 |           plugins: () => [
 93 |             require('postcss-flexbugs-fixes'),
 94 |             require('postcss-preset-env')({
 95 |               autoprefixer: {
 96 |                 flexbox: 'no-2009',
 97 |               },
 98 |               stage: 3,
 99 |             }),
100 |           ],
101 |           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
102 |         },
103 |       },
104 |     ].filter(Boolean);
105 |     if (preProcessor) {
106 |       loaders.push({
107 |         loader: require.resolve(preProcessor),
108 |         options: {
109 |           sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
110 |         },
111 |       });
112 |     }
113 |     return loaders;
114 |   };
115 | 
116 |   return {
117 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
118 |     // Stop compilation early in production
119 |     bail: isEnvProduction,
120 |     devtool: isEnvProduction
121 |       ? shouldUseSourceMap
122 |         ? 'source-map'
123 |         : false
124 |       : isEnvDevelopment && 'eval-source-map',
125 |     // These are the "entry points" to our application.
126 |     // This means they will be the "root" imports that are included in JS bundle.
127 |     entry: [
128 |       // Include an alternative client for WebpackDevServer. A client's job is to
129 |       // connect to WebpackDevServer by a socket and get notified about changes.
130 |       // When you save a file, the client will either apply hot updates (in case
131 |       // of CSS changes), or refresh the page (in case of JS changes). When you
132 |       // make a syntax error, this client will display a syntax error overlay.
133 |       // Note: instead of the default WebpackDevServer client, we use a custom one
134 |       // to bring better experience for Create React App users. You can replace
135 |       // the line below with these two lines if you prefer the stock client:
136 |       // require.resolve('webpack-dev-server/client') + '?/',
137 |       // require.resolve('webpack/hot/dev-server'),
138 |       isEnvDevelopment &&
139 |         require.resolve('react-dev-utils/webpackHotDevClient'),
140 |       // Finally, this is your app's code:
141 |       paths.appIndexJs,
142 |       // We include the app code last so that if there is a runtime error during
143 |       // initialization, it doesn't blow up the WebpackDevServer client, and
144 |       // changing JS code would still trigger a refresh.
145 |     ].filter(Boolean),
146 |     output: {
147 |       // The build folder.
148 |       path: isEnvProduction ? paths.appBuild : undefined,
149 |       // Add /* filename */ comments to generated require()s in the output.
150 |       pathinfo: isEnvDevelopment,
151 |       // There will be one main bundle, and one file per asynchronous chunk.
152 |       // In development, it does not produce real files.
153 |       filename: isEnvProduction
154 |         ? 'static/js/[name].[chunkhash:8].js'
155 |         : isEnvDevelopment && 'static/js/bundle.js',
156 |       // There are also additional JS chunk files if you use code splitting.
157 |       chunkFilename: isEnvProduction
158 |         ? 'static/js/[name].[chunkhash:8].chunk.js'
159 |         : isEnvDevelopment && 'static/js/[name].chunk.js',
160 |       // We inferred the "public path" (such as / or /my-project) from homepage.
161 |       // We use "/" in development.
162 |       publicPath: publicPath,
163 |       // Point sourcemap entries to original disk location (format as URL on Windows)
164 |       devtoolModuleFilenameTemplate: isEnvProduction
165 |         ? info =>
166 |             path
167 |               .relative(paths.appSrc, info.absoluteResourcePath)
168 |               .replace(/\\/g, '/')
169 |         : isEnvDevelopment &&
170 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
171 |     },
172 |     optimization: {
173 |       minimize: isEnvProduction,
174 |       minimizer: [
175 |         // This is only used in production mode
176 |         new TerserPlugin({
177 |           terserOptions: {
178 |             parse: {
179 |               // we want terser to parse ecma 8 code. However, we don't want it
180 |               // to apply any minfication steps that turns valid ecma 5 code
181 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
182 |               // sections only apply transformations that are ecma 5 safe
183 |               // https://github.com/facebook/create-react-app/pull/4234
184 |               ecma: 8,
185 |             },
186 |             compress: {
187 |               ecma: 5,
188 |               warnings: false,
189 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
190 |               // https://github.com/facebook/create-react-app/issues/2376
191 |               // Pending further investigation:
192 |               // https://github.com/mishoo/UglifyJS2/issues/2011
193 |               comparisons: false,
194 |               // Disabled because of an issue with Terser breaking valid code:
195 |               // https://github.com/facebook/create-react-app/issues/5250
196 |               // Pending futher investigation:
197 |               // https://github.com/terser-js/terser/issues/120
198 |               inline: 2,
199 |             },
200 |             mangle: {
201 |               safari10: true,
202 |             },
203 |             output: {
204 |               ecma: 5,
205 |               comments: false,
206 |               // Turned on because emoji and regex is not minified properly using default
207 |               // https://github.com/facebook/create-react-app/issues/2488
208 |               ascii_only: true,
209 |             },
210 |           },
211 |           // Use multi-process parallel running to improve the build speed
212 |           // Default number of concurrent runs: os.cpus().length - 1
213 |           parallel: true,
214 |           // Enable file caching
215 |           cache: true,
216 |           sourceMap: shouldUseSourceMap,
217 |         }),
218 |         // This is only used in production mode
219 |         new OptimizeCSSAssetsPlugin({
220 |           cssProcessorOptions: {
221 |             parser: safePostCssParser,
222 |             map: shouldUseSourceMap
223 |               ? {
224 |                   // `inline: false` forces the sourcemap to be output into a
225 |                   // separate file
226 |                   inline: false,
227 |                   // `annotation: true` appends the sourceMappingURL to the end of
228 |                   // the css file, helping the browser find the sourcemap
229 |                   annotation: true,
230 |                 }
231 |               : false,
232 |           },
233 |         }),
234 |       ],
235 |       // Automatically split vendor and commons
236 |       // https://twitter.com/wSokra/status/969633336732905474
237 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
238 |       splitChunks: {
239 |         chunks: 'all',
240 |         name: false,
241 |       },
242 |       // Keep the runtime chunk separated to enable long term caching
243 |       // https://twitter.com/wSokra/status/969679223278505985
244 |       runtimeChunk: true,
245 |     },
246 |     resolve: {
247 |       // This allows you to set a fallback for where Webpack should look for modules.
248 |       // We placed these paths second because we want `node_modules` to "win"
249 |       // if there are any conflicts. This matches Node resolution mechanism.
250 |       // https://github.com/facebook/create-react-app/issues/253
251 |       modules: ['node_modules'].concat(
252 |         // It is guaranteed to exist because we tweak it in `env.js`
253 |         process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
254 |       ),
255 |       // These are the reasonable defaults supported by the Node ecosystem.
256 |       // We also include JSX as a common component filename extension to support
257 |       // some tools, although we do not recommend using it, see:
258 |       // https://github.com/facebook/create-react-app/issues/290
259 |       // `web` extension prefixes have been added for better support
260 |       // for React Native Web.
261 |       extensions: paths.moduleFileExtensions
262 |         .map(ext => `.${ext}`)
263 |         .filter(ext => useTypeScript || !ext.includes('ts')),
264 |       alias: {
265 |         // Support React Native Web
266 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
267 |         'react-native': 'react-native-web',
268 |       },
269 |       plugins: [
270 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
271 |         // guards against forgotten dependencies and such.
272 |         PnpWebpackPlugin,
273 |         // Prevents users from importing files from outside of src/ (or node_modules/).
274 |         // This often causes confusion because we only process files within src/ with babel.
275 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
276 |         // please link the files into your node_modules/ and let module-resolution kick in.
277 |         // Make sure your source files are compiled, as they will not be processed in any way.
278 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
279 |       ],
280 |     },
281 |     resolveLoader: {
282 |       plugins: [
283 |         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
284 |         // from the current package.
285 |         PnpWebpackPlugin.moduleLoader(module),
286 |       ],
287 |     },
288 |     module: {
289 |       strictExportPresence: true,
290 |       rules: [
291 |         // Disable require.ensure as it's not a standard language feature.
292 |         { parser: { requireEnsure: false } },
293 | 
294 |         // First, run the linter.
295 |         // It's important to do this before Babel processes the JS.
296 |         {
297 |           test: /\.(js|mjs|jsx)$/,
298 |           enforce: 'pre',
299 |           use: [
300 |             {
301 |               options: {
302 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
303 |                 eslintPath: require.resolve('eslint'),
304 |                 
305 |               },
306 |               loader: require.resolve('eslint-loader'),
307 |             },
308 |           ],
309 |           include: paths.appSrc,
310 |         },
311 |         {
312 |           // "oneOf" will traverse all following loaders until one will
313 |           // match the requirements. When no loader matches it will fall
314 |           // back to the "file" loader at the end of the loader list.
315 |           oneOf: [
316 |             // "url" loader works like "file" loader except that it embeds assets
317 |             // smaller than specified limit in bytes as data URLs to avoid requests.
318 |             // A missing `test` is equivalent to a match.
319 |             {
320 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
321 |               loader: require.resolve('url-loader'),
322 |               options: {
323 |                 limit: 10000,
324 |                 name: 'static/media/[name].[hash:8].[ext]',
325 |               },
326 |             },
327 |             // Process application JS with Babel.
328 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
329 |             {
330 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
331 |               include: paths.appSrc,
332 |               loader: require.resolve('babel-loader'),
333 |               options: {
334 |                 customize: require.resolve(
335 |                   'babel-preset-react-app/webpack-overrides'
336 |                 ),
337 |                 
338 |                 plugins: [
339 |                   [
340 |                     require.resolve('babel-plugin-named-asset-import'),
341 |                     {
342 |                       loaderMap: {
343 |                         svg: {
344 |                           ReactComponent: '@svgr/webpack?-svgo![path]',
345 |                         },
346 |                       },
347 |                     },
348 |                   ],
349 |                 ],
350 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
351 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
352 |                 // directory for faster rebuilds.
353 |                 cacheDirectory: true,
354 |                 cacheCompression: isEnvProduction,
355 |                 compact: isEnvProduction,
356 |               },
357 |             },
358 |             // Process any JS outside of the app with Babel.
359 |             // Unlike the application JS, we only compile the standard ES features.
360 |             {
361 |               test: /\.(js|mjs)$/,
362 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
363 |               loader: require.resolve('babel-loader'),
364 |               options: {
365 |                 babelrc: false,
366 |                 configFile: false,
367 |                 compact: false,
368 |                 presets: [
369 |                   [
370 |                     require.resolve('babel-preset-react-app/dependencies'),
371 |                     { helpers: true },
372 |                   ],
373 |                 ],
374 |                 cacheDirectory: true,
375 |                 cacheCompression: isEnvProduction,
376 |                 
377 |                 // If an error happens in a package, it's possible to be
378 |                 // because it was compiled. Thus, we don't want the browser
379 |                 // debugger to show the original code. Instead, the code
380 |                 // being evaluated would be much more helpful.
381 |                 sourceMaps: false,
382 |               },
383 |             },
384 |             // "postcss" loader applies autoprefixer to our CSS.
385 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
386 |             // "style" loader turns CSS into JS modules that inject <style> tags.
387 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
388 |             // to a file, but in development "style" loader enables hot editing
389 |             // of CSS.
390 |             // By default we support CSS Modules with the extension .module.css
391 |             {
392 |               test: cssRegex,
393 |               exclude: cssModuleRegex,
394 |               use: getStyleLoaders({
395 |                 importLoaders: 1,
396 |                 sourceMap: isEnvProduction
397 |                   ? shouldUseSourceMap
398 |                   : isEnvDevelopment,
399 |               }),
400 |               // Don't consider CSS imports dead code even if the
401 |               // containing package claims to have no side effects.
402 |               // Remove this when webpack adds a warning or an error for this.
403 |               // See https://github.com/webpack/webpack/issues/6571
404 |               sideEffects: true,
405 |             },
406 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
407 |             // using the extension .module.css
408 |             {
409 |               test: cssModuleRegex,
410 |               use: getStyleLoaders({
411 |                 importLoaders: 1,
412 |                 sourceMap: isEnvProduction
413 |                   ? shouldUseSourceMap
414 |                   : isEnvDevelopment,
415 |                 modules: true,
416 |                 getLocalIdent: getCSSModuleLocalIdent,
417 |               }),
418 |             },
419 |             // Opt-in support for SASS (using .scss or .sass extensions).
420 |             // By default we support SASS Modules with the
421 |             // extensions .module.scss or .module.sass
422 |             {
423 |               test: sassRegex,
424 |               exclude: sassModuleRegex,
425 |               use: getStyleLoaders(
426 |                 {
427 |                   importLoaders: 2,
428 |                   sourceMap: isEnvProduction
429 |                     ? shouldUseSourceMap
430 |                     : isEnvDevelopment,
431 |                 },
432 |                 'sass-loader'
433 |               ),
434 |               // Don't consider CSS imports dead code even if the
435 |               // containing package claims to have no side effects.
436 |               // Remove this when webpack adds a warning or an error for this.
437 |               // See https://github.com/webpack/webpack/issues/6571
438 |               sideEffects: true,
439 |             },
440 |             // Adds support for CSS Modules, but using SASS
441 |             // using the extension .module.scss or .module.sass
442 |             {
443 |               test: sassModuleRegex,
444 |               use: getStyleLoaders(
445 |                 {
446 |                   importLoaders: 2,
447 |                   sourceMap: isEnvProduction
448 |                     ? shouldUseSourceMap
449 |                     : isEnvDevelopment,
450 |                   modules: true,
451 |                   getLocalIdent: getCSSModuleLocalIdent,
452 |                 },
453 |                 'sass-loader'
454 |               ),
455 |             },
456 |             // "file" loader makes sure those assets get served by WebpackDevServer.
457 |             // When you `import` an asset, you get its (virtual) filename.
458 |             // In production, they would get copied to the `build` folder.
459 |             // This loader doesn't use a "test" so it will catch all modules
460 |             // that fall through the other loaders.
461 |             {
462 |               loader: require.resolve('file-loader'),
463 |               // Exclude `js` files to keep "css" loader working as it injects
464 |               // its runtime that would otherwise be processed through "file" loader.
465 |               // Also exclude `html` and `json` extensions so they get processed
466 |               // by webpacks internal loaders.
467 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
468 |               options: {
469 |                 name: 'static/media/[name].[hash:8].[ext]',
470 |               },
471 |             },
472 |             // ** STOP ** Are you adding a new loader?
473 |             // Make sure to add the new loader(s) before the "file" loader.
474 |           ],
475 |         },
476 |       ],
477 |     },
478 |     plugins: [
479 |       // Generates an `index.html` file with the <script> injected.
480 |       new HtmlWebpackPlugin(
481 |         Object.assign(
482 |           {},
483 |           {
484 |             inject: true,
485 |             template: paths.appHtml,
486 |           },
487 |           isEnvProduction
488 |             ? {
489 |                 minify: {
490 |                   removeComments: true,
491 |                   collapseWhitespace: true,
492 |                   removeRedundantAttributes: true,
493 |                   useShortDoctype: true,
494 |                   removeEmptyAttributes: true,
495 |                   removeStyleLinkTypeAttributes: true,
496 |                   keepClosingSlash: true,
497 |                   minifyJS: true,
498 |                   minifyCSS: true,
499 |                   minifyURLs: true,
500 |                 },
501 |               }
502 |             : undefined
503 |         )
504 |       ),
505 |       // Inlines the webpack runtime script. This script is too small to warrant
506 |       // a network request.
507 |       isEnvProduction &&
508 |         shouldInlineRuntimeChunk &&
509 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
510 |       // Makes some environment variables available in index.html.
511 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
512 |       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
513 |       // In production, it will be an empty string unless you specify "homepage"
514 |       // in `package.json`, in which case it will be the pathname of that URL.
515 |       // In development, this will be an empty string.
516 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
517 |       // This gives some necessary context to module not found errors, such as
518 |       // the requesting resource.
519 |       new ModuleNotFoundPlugin(paths.appPath),
520 |       // Makes some environment variables available to the JS code, for example:
521 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
522 |       // It is absolutely essential that NODE_ENV is set to production
523 |       // during a production build.
524 |       // Otherwise React will be compiled in the very slow development mode.
525 |       new webpack.DefinePlugin(env.stringified),
526 |       // This is necessary to emit hot updates (currently CSS only):
527 |       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
528 |       // Watcher doesn't work well if you mistype casing in a path so we use
529 |       // a plugin that prints an error when you attempt to do this.
530 |       // See https://github.com/facebook/create-react-app/issues/240
531 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
532 |       // If you require a missing module and then `npm install` it, you still have
533 |       // to restart the development server for Webpack to discover it. This plugin
534 |       // makes the discovery automatic so you don't have to restart.
535 |       // See https://github.com/facebook/create-react-app/issues/186
536 |       isEnvDevelopment &&
537 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
538 |       isEnvProduction &&
539 |         new MiniCssExtractPlugin({
540 |           // Options similar to the same options in webpackOptions.output
541 |           // both options are optional
542 |           filename: 'static/css/[name].[contenthash:8].css',
543 |           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
544 |         }),
545 |       // Generate a manifest file which contains a mapping of all asset filenames
546 |       // to their corresponding output file so that tools can pick it up without
547 |       // having to parse `index.html`.
548 |       new ManifestPlugin({
549 |         fileName: 'asset-manifest.json',
550 |         publicPath: publicPath,
551 |       }),
552 |       // Moment.js is an extremely popular library that bundles large locale files
553 |       // by default due to how Webpack interprets its code. This is a practical
554 |       // solution that requires the user to opt into importing specific locales.
555 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
556 |       // You can remove this if you don't use Moment.js:
557 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
558 |       // Generate a service worker script that will precache, and keep up to date,
559 |       // the HTML & assets that are part of the Webpack build.
560 |       isEnvProduction &&
561 |         new WorkboxWebpackPlugin.GenerateSW({
562 |           clientsClaim: true,
563 |           exclude: [/\.map$/, /asset-manifest\.json$/],
564 |           importWorkboxFrom: 'cdn',
565 |           navigateFallback: publicUrl + '/index.html',
566 |           navigateFallbackBlacklist: [
567 |             // Exclude URLs starting with /_, as they're likely an API call
568 |             new RegExp('^/_'),
569 |             // Exclude URLs containing a dot, as they're likely a resource in
570 |             // public/ and not a SPA route
571 |             new RegExp('/[^/]+\\.[^/]+$'),
572 |           ],
573 |         }),
574 |       // TypeScript type checking
575 |       useTypeScript &&
576 |         new ForkTsCheckerWebpackPlugin({
577 |           typescript: resolve.sync('typescript', {
578 |             basedir: paths.appNodeModules,
579 |           }),
580 |           async: false,
581 |           checkSyntacticErrors: true,
582 |           tsconfig: paths.appTsConfig,
583 |           compilerOptions: {
584 |             module: 'esnext',
585 |             moduleResolution: 'node',
586 |             resolveJsonModule: true,
587 |             isolatedModules: true,
588 |             noEmit: true,
589 |             jsx: 'preserve',
590 |           },
591 |           reportFiles: [
592 |             '**',
593 |             '!**/*.json',
594 |             '!**/__tests__/**',
595 |             '!**/?(*.)(spec|test).*',
596 |             '!**/src/setupProxy.*',
597 |             '!**/src/setupTests.*',
598 |           ],
599 |           watch: paths.appSrc,
600 |           silent: true,
601 |           formatter: typescriptFormatter,
602 |         }),
603 |     ].filter(Boolean),
604 |     // Some libraries import Node modules but don't use them in the browser.
605 |     // Tell Webpack to provide empty mocks for them so importing them works.
606 |     node: {
607 |       module: 'empty',
608 |       dgram: 'empty',
609 |       dns: 'mock',
610 |       fs: 'empty',
611 |       net: 'empty',
612 |       tls: 'empty',
613 |       child_process: 'empty',
614 |     },
615 |     // Turn off performance processing because we utilize
616 |     // our own hints via the FileSizeReporter
617 |     performance: false,
618 |   };
619 | };
620 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware());
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "my-react",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.2.2",
  7 |     "@svgr/webpack": "4.1.0",
  8 |     "antd": "^3.13.6",
  9 |     "babel-core": "7.0.0-bridge.0",
 10 |     "babel-eslint": "9.0.0",
 11 |     "babel-jest": "23.6.0",
 12 |     "babel-loader": "8.0.5",
 13 |     "babel-plugin-named-asset-import": "^0.3.1",
 14 |     "babel-preset-react-app": "^7.0.1",
 15 |     "bfj": "6.1.1",
 16 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 17 |     "css-loader": "1.0.0",
 18 |     "dotenv": "6.0.0",
 19 |     "dotenv-expand": "4.2.0",
 20 |     "eslint": "5.12.0",
 21 |     "eslint-config-react-app": "^3.0.7",
 22 |     "eslint-loader": "2.1.1",
 23 |     "eslint-plugin-flowtype": "2.50.1",
 24 |     "eslint-plugin-import": "2.14.0",
 25 |     "eslint-plugin-jsx-a11y": "6.1.2",
 26 |     "eslint-plugin-react": "7.12.4",
 27 |     "file-loader": "2.0.0",
 28 |     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
 29 |     "fs-extra": "7.0.1",
 30 |     "html-webpack-plugin": "4.0.0-alpha.2",
 31 |     "identity-obj-proxy": "3.0.0",
 32 |     "jest": "23.6.0",
 33 |     "jest-pnp-resolver": "1.0.2",
 34 |     "jest-resolve": "23.6.0",
 35 |     "jest-watch-typeahead": "^0.2.1",
 36 |     "mini-css-extract-plugin": "0.5.0",
 37 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 38 |     "pnp-webpack-plugin": "1.2.1",
 39 |     "postcss-flexbugs-fixes": "4.1.0",
 40 |     "postcss-loader": "3.0.0",
 41 |     "postcss-preset-env": "6.5.0",
 42 |     "postcss-safe-parser": "4.0.1",
 43 |     "react": "^16.8.2",
 44 |     "react-app-polyfill": "^0.2.1",
 45 |     "react-dev-utils": "^7.0.3",
 46 |     "react-dom": "^16.8.2",
 47 |     "react-redux": "^6.0.1",
 48 |     "react-router-dom": "^4.3.1",
 49 |     "redux": "^4.0.1",
 50 |     "resolve": "1.10.0",
 51 |     "sass-loader": "7.1.0",
 52 |     "style-loader": "0.23.1",
 53 |     "terser-webpack-plugin": "1.2.2",
 54 |     "url-loader": "1.1.2",
 55 |     "webpack": "4.28.3",
 56 |     "webpack-dev-server": "3.1.14",
 57 |     "webpack-manifest-plugin": "2.0.4",
 58 |     "workbox-webpack-plugin": "3.6.3"
 59 |   },
 60 |   "scripts": {
 61 |     "start": "node scripts/start.js",
 62 |     "build": "node scripts/build.js",
 63 |     "test": "node scripts/test.js"
 64 |   },
 65 |   "eslintConfig": {
 66 |     "extends": "react-app"
 67 |   },
 68 |   "browserslist": [
 69 |     ">0.2%",
 70 |     "not dead",
 71 |     "not ie <= 11",
 72 |     "not op_mini all"
 73 |   ],
 74 |   "jest": {
 75 |     "collectCoverageFrom": [
 76 |       "src/**/*.{js,jsx,ts,tsx}",
 77 |       "!src/**/*.d.ts"
 78 |     ],
 79 |     "resolver": "jest-pnp-resolver",
 80 |     "setupFiles": [
 81 |       "react-app-polyfill/jsdom"
 82 |     ],
 83 |     "testMatch": [
 84 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
 85 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
 86 |     ],
 87 |     "testEnvironment": "jsdom",
 88 |     "testURL": "http://localhost",
 89 |     "transform": {
 90 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
 91 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 92 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 93 |     },
 94 |     "transformIgnorePatterns": [
 95 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
 96 |       "^.+\\.module\\.(css|sass|scss)$"
 97 |     ],
 98 |     "moduleNameMapper": {
 99 |       "^react-native$": "react-native-web",
100 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
101 |     },
102 |     "moduleFileExtensions": [
103 |       "web.js",
104 |       "js",
105 |       "web.ts",
106 |       "ts",
107 |       "web.tsx",
108 |       "tsx",
109 |       "json",
110 |       "web.jsx",
111 |       "jsx",
112 |       "node"
113 |     ],
114 |     "watchPlugins": [
115 |       "C:\\Users\\25976\\Desktop\\React\\task\\my-react\\node_modules\\jest-watch-typeahead\\filename.js",
116 |       "C:\\Users\\25976\\Desktop\\React\\task\\my-react\\node_modules\\jest-watch-typeahead\\testname.js"
117 |     ]
118 |   },
119 |   "babel": {
120 |     "presets": [
121 |       "react-app"
122 |     ],
123 |     "plugins": [
124 |       [
125 |         "@babel/plugin-proposal-decorators",
126 |         {
127 |           "legacy": true
128 |         }
129 |       ],
130 |       [
131 |         "import",
132 |         {
133 |           "libraryName": "antd",
134 |           "libraryDirectory": "es",
135 |           "style": "css"
136 |         }
137 |       ]
138 |     ]
139 |   },
140 |   "devDependencies": {
141 |     "babel-plugin-import": "^1.11.0"
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/public/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/public/1.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/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": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const bfj = require('bfj');
 23 | const configFactory = require('../config/webpack.config');
 24 | const paths = require('../config/paths');
 25 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 26 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 27 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 28 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 29 | const printBuildError = require('react-dev-utils/printBuildError');
 30 | 
 31 | const measureFileSizesBeforeBuild =
 32 |   FileSizeReporter.measureFileSizesBeforeBuild;
 33 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 34 | const useYarn = fs.existsSync(paths.yarnLockFile);
 35 | 
 36 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 37 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 38 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 39 | 
 40 | const isInteractive = process.stdout.isTTY;
 41 | 
 42 | // Warn and crash if required files are missing
 43 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 44 |   process.exit(1);
 45 | }
 46 | 
 47 | // Process CLI arguments
 48 | const argv = process.argv.slice(2);
 49 | const writeStatsJson = argv.indexOf('--stats') !== -1;
 50 | 
 51 | // Generate configuration
 52 | const config = configFactory('production');
 53 | 
 54 | // We require that you explicitly set browsers and do not fall back to
 55 | // browserslist defaults.
 56 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 57 | checkBrowsers(paths.appPath, isInteractive)
 58 |   .then(() => {
 59 |     // First, read the current file sizes in build directory.
 60 |     // This lets us display how much they changed later.
 61 |     return measureFileSizesBeforeBuild(paths.appBuild);
 62 |   })
 63 |   .then(previousFileSizes => {
 64 |     // Remove all content but keep the directory so that
 65 |     // if you're in it, you don't end up in Trash
 66 |     fs.emptyDirSync(paths.appBuild);
 67 |     // Merge with the public folder
 68 |     copyPublicFolder();
 69 |     // Start the webpack build
 70 |     return build(previousFileSizes);
 71 |   })
 72 |   .then(
 73 |     ({ stats, previousFileSizes, warnings }) => {
 74 |       if (warnings.length) {
 75 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 76 |         console.log(warnings.join('\n\n'));
 77 |         console.log(
 78 |           '\nSearch for the ' +
 79 |             chalk.underline(chalk.yellow('keywords')) +
 80 |             ' to learn more about each warning.'
 81 |         );
 82 |         console.log(
 83 |           'To ignore, add ' +
 84 |             chalk.cyan('// eslint-disable-next-line') +
 85 |             ' to the line before.\n'
 86 |         );
 87 |       } else {
 88 |         console.log(chalk.green('Compiled successfully.\n'));
 89 |       }
 90 | 
 91 |       console.log('File sizes after gzip:\n');
 92 |       printFileSizesAfterBuild(
 93 |         stats,
 94 |         previousFileSizes,
 95 |         paths.appBuild,
 96 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 97 |         WARN_AFTER_CHUNK_GZIP_SIZE
 98 |       );
 99 |       console.log();
100 | 
101 |       const appPackage = require(paths.appPackageJson);
102 |       const publicUrl = paths.publicUrl;
103 |       const publicPath = config.output.publicPath;
104 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
105 |       printHostingInstructions(
106 |         appPackage,
107 |         publicUrl,
108 |         publicPath,
109 |         buildFolder,
110 |         useYarn
111 |       );
112 |     },
113 |     err => {
114 |       console.log(chalk.red('Failed to compile.\n'));
115 |       printBuildError(err);
116 |       process.exit(1);
117 |     }
118 |   )
119 |   .catch(err => {
120 |     if (err && err.message) {
121 |       console.log(err.message);
122 |     }
123 |     process.exit(1);
124 |   });
125 | 
126 | // Create the production build and print the deployment instructions.
127 | function build(previousFileSizes) {
128 |   console.log('Creating an optimized production build...');
129 | 
130 |   let compiler = webpack(config);
131 |   return new Promise((resolve, reject) => {
132 |     compiler.run((err, stats) => {
133 |       let messages;
134 |       if (err) {
135 |         if (!err.message) {
136 |           return reject(err);
137 |         }
138 |         messages = formatWebpackMessages({
139 |           errors: [err.message],
140 |           warnings: [],
141 |         });
142 |       } else {
143 |         messages = formatWebpackMessages(
144 |           stats.toJson({ all: false, warnings: true, errors: true })
145 |         );
146 |       }
147 |       if (messages.errors.length) {
148 |         // Only keep the first error. Others are often indicative
149 |         // of the same problem, but confuse the reader with noise.
150 |         if (messages.errors.length > 1) {
151 |           messages.errors.length = 1;
152 |         }
153 |         return reject(new Error(messages.errors.join('\n\n')));
154 |       }
155 |       if (
156 |         process.env.CI &&
157 |         (typeof process.env.CI !== 'string' ||
158 |           process.env.CI.toLowerCase() !== 'false') &&
159 |         messages.warnings.length
160 |       ) {
161 |         console.log(
162 |           chalk.yellow(
163 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
164 |               'Most CI servers set it automatically.\n'
165 |           )
166 |         );
167 |         return reject(new Error(messages.warnings.join('\n\n')));
168 |       }
169 | 
170 |       const resolveArgs = {
171 |         stats,
172 |         previousFileSizes,
173 |         warnings: messages.warnings,
174 |       };
175 |       if (writeStatsJson) {
176 |         return bfj
177 |           .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
178 |           .then(() => resolve(resolveArgs))
179 |           .catch(error => reject(new Error(error)));
180 |       }
181 | 
182 |       return resolve(resolveArgs);
183 |     });
184 |   });
185 | }
186 | 
187 | function copyPublicFolder() {
188 |   fs.copySync(paths.appPublic, paths.appBuild, {
189 |     dereference: true,
190 |     filter: file => file !== paths.appHtml,
191 |   });
192 | }
193 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explictly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const urls = prepareUrls(protocol, HOST, port);
 82 |     // Create a webpack compiler that is configured with custom messages.
 83 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 84 |     // Load proxy config
 85 |     const proxySetting = require(paths.appPackageJson).proxy;
 86 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 87 |     // Serve webpack assets generated by the compiler over a web server.
 88 |     const serverConfig = createDevServerConfig(
 89 |       proxyConfig,
 90 |       urls.lanUrlForConfig
 91 |     );
 92 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 93 |     // Launch WebpackDevServer.
 94 |     devServer.listen(port, HOST, err => {
 95 |       if (err) {
 96 |         return console.log(err);
 97 |       }
 98 |       if (isInteractive) {
 99 |         clearConsole();
100 |       }
101 |       console.log(chalk.cyan('Starting the development server...\n'));
102 |       openBrowser(urls.localUrlForBrowser);
103 |     });
104 | 
105 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
106 |       process.on(sig, function() {
107 |         devServer.close();
108 |         process.exit();
109 |       });
110 |     });
111 |   })
112 |   .catch(err => {
113 |     if (err && err.message) {
114 |       console.log(err.message);
115 |     }
116 |     process.exit(1);
117 |   });
118 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI, in coverage mode, explicitly adding `--no-watch`,
42 | // or explicitly running all tests
43 | if (
44 |   !process.env.CI &&
45 |   argv.indexOf('--coverage') === -1 &&
46 |   argv.indexOf('--no-watch') === -1 &&
47 |   argv.indexOf('--watchAll') === -1
48 | ) {
49 |   // https://github.com/facebook/create-react-app/issues/5210
50 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
51 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
52 | }
53 | 
54 | // Jest doesn't have this option so we'll remove it
55 | if (argv.indexOf('--no-watch') !== -1) {
56 |   argv = argv.filter(arg => arg !== '--no-watch');
57 | }
58 | 
59 | 
60 | jest.run(argv);
61 | 


--------------------------------------------------------------------------------
/src/Main/index.css:
--------------------------------------------------------------------------------
 1 | .main-aside{
 2 |     position: fixed;
 3 |     left:0;
 4 |     right:0;
 5 |     bottom:0;
 6 |     z-index: 100;
 7 |     background-color:#001529; 
 8 |     transition: transform 0.3s ease 0s;
 9 | }
10 | .menu-icon{
11 |     position: fixed;
12 |     z-index: 9999;
13 |     right:20px;
14 |     top:100px;
15 |     font-size: 100px;
16 | }


--------------------------------------------------------------------------------
/src/Main/index.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {
 3 |     Route,
 4 |     Switch,
 5 |     Link
 6 | } from "react-router-dom"
 7 | import {Menu,Icon} from "antd"
 8 | import "./index.css"
 9 | import Lesson from "../catalog/lesson"
10 | import Exam from "../catalog/exam"
11 | import {menu as menuData} from "./menu.js"
12 | const {SubMenu} = Menu;
13 | export default class Index extends Component{
14 |     state={
15 |         height:200,
16 |         transY:200
17 |     }
18 |     changeMenu=()=>{
19 |         let {height,transY}=this.state
20 |         if(transY!==height){
21 |             this.setState({transY:height})
22 |         }else{
23 |             this.setState({transY:0})
24 |         }
25 |     }
26 |     render(){
27 |         let {height,transY}=this.state 
28 |         return <React.Fragment>
29 |             <div style={{
30 |                     transform:`translateY(${transY}px)`,
31 |                     height
32 |                     }} className="main-aside">
33 |                 <Menu theme="dark" mode="vertical">
34 |                     {
35 |                         menuData&&menuData.map((item)=>{
36 |                             console.log(item)
37 |                             return <SubMenu key={item.subKey} title={item.subName}>
38 |                                 {
39 |                                     item.child&&item.child.map((val)=>{
40 |                                         return <Menu.Item key={val.key}>
41 |                                             <Link to={`${item.path+val.path}`}>{val.itemName}</Link>
42 |                                         </Menu.Item>
43 |                                     })
44 |                                 }
45 |                             </SubMenu>
46 |                         })
47 |                     }
48 |                 </Menu>
49 |             </div>
50 |             <div className="menu-icon" onClick={this.changeMenu}>
51 |                 <Icon type="fullscreen"/>
52 |             </div>
53 |             <Switch>
54 |                 <Route path="/exam" component={Exam}></Route>
55 |                 <Route path="/lesson" component={Lesson}></Route>
56 |             </Switch>
57 |         </React.Fragment>
58 |         
59 |     }
60 | }


--------------------------------------------------------------------------------
/src/Main/menu.js:
--------------------------------------------------------------------------------
 1 | export const menu=[
 2 |     {
 3 |         subName:"课堂",
 4 |         subKey:"lesson",
 5 |         path:"/lesson",
 6 |         child:[
 7 |             {
 8 |                 itemName:"address",
 9 |                 key:"/lesson/address",
10 |                 path:"/address"
11 |             },{
12 |                 itemName:"drag",
13 |                 key:"/lesson/drag",
14 |                 path:"/drag"
15 |             },{
16 |                 itemName:"shopcar",
17 |                 key:"/lesson/shopcar",
18 |                 path:"/shopcar"
19 |             },{
20 |                 itemName:"shopping",
21 |                 key:"/lesson/shopping",
22 |                 path:"/shopping"
23 |             },{
24 |                 itemName:"monthA",
25 |                 key:"/lesson/monthA",
26 |                 path:"/monthA"
27 |             },{
28 |                 itemName:"pay",
29 |                 key:"/lesson/pay",
30 |                 path:"/pay"
31 |             },{
32 |                 itemName:"cinema",
33 |                 key:"/lesson/cinema",
34 |                 path:"/cinema"
35 |             }
36 |         ]
37 |     },{
38 |         subName:'考试',
39 |         subKey:'exam',
40 |         path:'/exam',
41 |         child:[
42 |             {
43 |                 itemName:"newyear",
44 |                 key:"/exam/newyear",
45 |                 path:"/newyear"
46 |             }, {
47 |                 itemName:"examDay3",
48 |                 key:"/exam/examday3",
49 |                 path:"/examday3"
50 |             }, {
51 |                 itemName:"examDay2",
52 |                 key:"/exam/examday2",
53 |                 path:"/examday2"
54 |             }
55 |         ]
56 |     }
57 | ]


--------------------------------------------------------------------------------
/src/address/addresslist.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import "./css/add.css"
 3 | var addressData = [
 4 |   {
 5 |     concats: '赵小六',
 6 |     tel: '13423457890',
 7 |     address: '雨欣家园',
 8 |     area: '8号楼401室',
 9 |     index: 0
10 |   },
11 |   {
12 |     concats: '张三',
13 |     tel: '13423457890',
14 |     address: '龙湖小区',
15 |     area: '8号楼401室',
16 |     index: 0
17 |   },
18 |   {
19 |     concats: '李四',
20 |     tel: '13423457890',
21 |     address: '龙湖小区',
22 |     area: '8号楼401室',
23 |     index: 1
24 |   },
25 |   {
26 |     concats: '王五',
27 |     tel: '13423457890',
28 |     address: '龙湖小区',
29 |     area: '8号楼401室',
30 |     index: 0
31 |   }
32 | ]
33 | class Index extends React.Component {
34 |   static defaultProps = {
35 |     addressData
36 |   }
37 |   render() {
38 |     let { addressData } = this.props
39 |     return <div>
40 |       {
41 |         addressData && addressData.map((item, key) => {
42 |           return <li className="list" key={key}>
43 |             <h3>{item.address}</h3>
44 |             <p>{item.area}</p>
45 |             <i className="tel">{item.concats}({item.index === 0 ? '先生' : '女士'}) ${item.tel}</i>
46 |             <i className="edit" onClick={() => {
47 |               this.props.history.push("/lesson/address/editaddress")
48 |             }}>编辑</i>
49 |           </li>
50 |         })
51 |       }
52 |     </div>
53 |   }
54 | }
55 | export default Index 


--------------------------------------------------------------------------------
/src/address/css/add.css:
--------------------------------------------------------------------------------
 1 | section ul{
 2 |     background-color:#fff;
 3 | }
 4 | section li.list{
 5 |     
 6 | }
 7 | section li.list span{
 8 |     padding-left:15px; font-weight: bold; display: inline-block; width:70px;
 9 | }
10 | input{
11 |     outline:none; padding:0; border:0; background-color:transparent; padding-left:20px; height: 0.5rem; line-height:0.5rem; font-size:20px;
12 | }
13 | .sex span{
14 |     display: inline-block; padding: 7px 12px; border: 1px solid rgba(35,149,255,.18); border-radius:5px; font-weight: normal; color:#333; font-size:14px; text-align: center;
15 | }
16 | .sex span.active{
17 |     background-color:#eef7ff; color:#2395ff; 
18 | }
19 | .sex{
20 |     padding-left:90px;
21 | }
22 | .btn{
23 |     background: #00d762; display: block;
24 |     margin:20px;
25 |     text-align: center;
26 |     border-radius: .533333vw;
27 |     font-size: 16px;
28 |     line-height: 0.4rem;
29 |     color: #fff;
30 |     border: none;
31 |     font-weight: 700;
32 | }


--------------------------------------------------------------------------------
/src/address/css/header.css:
--------------------------------------------------------------------------------
1 | 
2 | header{
3 |     height:0.36rem; display: flex; justify-content: space-around; align-items: center; background-color:rgb(0,140,255); color:#fff;
4 | }
5 | header>div{
6 |     height:30px; line-height:30px;
7 | }


--------------------------------------------------------------------------------
/src/address/css/index.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | section li{
 5 |     position: relative; padding-left:15px; border-bottom:1px solid #ccc; background-color:#fff; padding:10px;
 6 | }
 7 | section li h3{
 8 |     padding-bottom:10px;
 9 | }
10 | section li p{
11 |     padding-bottom:20px;
12 | }
13 | section li .tel{
14 |     color:#ccc; font-style:normal;
15 | }
16 | .edit{
17 |     position:absolute; right:40px; top:20px; font-style:normal;
18 | }


--------------------------------------------------------------------------------
/src/address/css/reset.css:
--------------------------------------------------------------------------------
 1 | *{margin:0; padding:0; box-sizing:border-box;}
 2 | li{list-style:none;}
 3 | a{text-decoration: none; color:#fff;}
 4 | html,body,.address{
 5 |     width:100%; height:100%;
 6 | }
 7 | body{
 8 |     font-size:16px;
 9 | }
10 | .address{
11 |     display: flex; flex-direction: column;
12 | }


--------------------------------------------------------------------------------
/src/address/css/section.css:
--------------------------------------------------------------------------------
1 | section{
2 |     flex:1; position:relative; overflow:hidden; background-color:rgb(245,245,245);
3 | }
4 | section ul{
5 |     padding-top:20px;
6 | }


--------------------------------------------------------------------------------
/src/address/editaddress.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import Form from "./from"
3 | class Index extends React.Component {
4 |   render() {
5 |     return <Form page="edit" />
6 |   }
7 | }
8 | export default Index 


--------------------------------------------------------------------------------
/src/address/from.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | class Index extends React.Component {
 3 |   static defaultProps = {
 4 |     concats: "张飒",
 5 |     sex: 1,
 6 |     tel: 12312334566,
 7 |     address: "哈哈哈",
 8 |     area: "99"
 9 |   }
10 |   state = {
11 |     fromProps: {
12 |       ...this.props
13 |     }
14 |   }
15 |   setValue = key => {
16 |     let { page } = this.state.fromProps;
17 |     return page === "edit" ? this.state.fromProps[key] : ""
18 |   }
19 |   changeValue = (key, value) => {
20 |     let { fromProps } = this.state
21 |     fromProps[key] = value;
22 |     this.setState({ fromProps })
23 |   }
24 |   render() {
25 |     window.form = this
26 |     let num = this.setValue('sex')
27 |     return <React.Fragment>
28 |       <ul>
29 |         <li className="input">
30 |           <span>联系人</span>
31 |           <input value={this.setValue("concats")} onChange={(ev) => {
32 |             this.changeValue("concats", ev.target.value)
33 |           }}
34 |             data-prop="concats" type="text" />
35 |         </li>
36 |         <li className="sex">
37 |           <span className={num === 0 ? "active" : ""} onClick={() =>
38 |             this.changeValue('sex', 0)
39 |           }>先生</span>
40 |           <span className={num === 1 ? "active" : ""} onClick={() =>
41 |             this.changeValue('sex', 1)
42 |           }>女士</span>
43 |         </li>
44 |         <li className="input">
45 |           <span>电话</span>
46 |           <input value={this.setValue("tel")} onChange={(ev) => {
47 |             this.changeValue("tel", ev.target.value)
48 |           }} type="text" data-prop="tel" />
49 |         </li>
50 |         <li className="input">
51 |           <span>地址</span>
52 |           <input value={this.setValue("address")} onChange={(ev) => {
53 |             this.changeValue("address", ev.target.value)
54 |           }} type="text" data-prop="address" />
55 |         </li>
56 |         <li className="input">
57 |           <span>门牌号</span>
58 |           <input value={this.setValue("area")} onChange={(ev) => {
59 |             this.changeValue("area", ev.target.value)
60 |           }} type="text" data-prop="area" />
61 |         </li>
62 |       </ul>
63 |       <div className="btn">确定</div>
64 |     </React.Fragment>
65 |   }
66 | }
67 | export default Index 


--------------------------------------------------------------------------------
/src/address/header.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | import "./css/header.css"
 4 | class Index extends React.Component{
 5 |     static defaultProps={
 6 |         backBtnText:"back",
 7 |         title:"收货地址",
 8 |         isRight:true,
 9 |         rightBtnText:"新增地址",
10 |         rightBtnPath:"/lesson/address/pushaddress"
11 |     }
12 |     render(){
13 |         let {
14 |             backBtnText,
15 |             title,
16 |             isRight,
17 |             rightBtnText,
18 |             rightBtnPath
19 |         }=this.props
20 |         return <header>
21 |             <div onClick={ this.props.history.goBack}>{backBtnText}</div>
22 |             <div>{title}</div>
23 |             <div>
24 |                 {
25 |                     isRight? <a href={rightBtnPath}>{rightBtnText}</a>:null
26 |                 }
27 |             </div>
28 |                
29 |         </header>
30 |     }
31 | }
32 | export default Index 


--------------------------------------------------------------------------------
/src/address/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import{
 3 |     Switch,
 4 |     Route
 5 | } from "react-router-dom"
 6 | import "./js/rem"
 7 | import "./css/reset.css"
 8 | import "./css/index.css"
 9 | import "./css/section.css"
10 | import Addresslist from "./addresslist"
11 | import Pushaddress from "./pushaddress"
12 | import Editaddress from "./editaddress"
13 | import Header from "./header"
14 | class Index extends React.Component {
15 |     render() {
16 |         let {match,history}=this.props
17 |         console.log(match)
18 |         return <div className="address">
19 |                 <Header history={history}/>
20 |                 <section>
21 |                     <Switch>
22 |                         <Route path={`${match.path}/addresslist`} component={Addresslist}></Route>
23 |                         <Route path={`${match.path}/pushaddress`} component={Pushaddress}></Route>
24 |                         <Route path={`${match.path}/editaddress`} component={Editaddress}></Route>
25 |                         {/* <Redirect from={match.path} to={`${match.path}/editaddress`}></Redirect> */}
26 |                     </Switch>
27 |                 </section>
28 |             </div>
29 |     }
30 | }
31 | export default Index 


--------------------------------------------------------------------------------
/src/address/js/rem.js:
--------------------------------------------------------------------------------
 1 | (function(doc,win){  
 2 |     var docEl =doc.documentElement,  
 3 |             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
 4 |             recalc = function(){  
 5 |                 var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;  
 6 |                 if (!clientWidth) {return};  
 7 |                 docEl.style.fontSize = 100 * (clientWidth / 300) + 'px';  
 8 |             };  
 9 |     recalc();  
10 |     if (!doc.addEventListener) return;  
11 |     win.addEventListener(resizeEvt, recalc, false);  
12 |     doc.addEventListener('DOMContentLoaded', recalc, false);  
13 | })(document,window)


--------------------------------------------------------------------------------
/src/address/pushaddress.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import Form from "./from"
3 | class Index extends React.Component {
4 |     render() {
5 |         return <Form />
6 |        }
7 | }
8 | export default Index 


--------------------------------------------------------------------------------
/src/catalog/base.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import{
 3 |     Switch,Link
 4 | } from "react-router-dom"
 5 | import Exam from "./exam"
 6 | import Lesson from "./lesson"
 7 | function Base(){
 8 |     return 
 9 | }
10 | export default Base


--------------------------------------------------------------------------------
/src/catalog/exam.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import ExamDay3 from '../examDay3'
 3 | import ExamDay2 from '../examDay2'
 4 | import NewYear from "../newYear"
 5 | import{
 6 |     Switch,Route
 7 | } from "react-router-dom"
 8 | function Exam(){
 9 |     return <div>
10 |         {/* <h1>Exam</h1>
11 |             <Link to="/exam/examday3">examday3</Link><br />
12 |             <Link to="/exam/examday2">examday2</Link><br /> */}
13 |             <Switch>
14 |                 <Route path="/exam/examday3" component={ExamDay3}></Route>
15 |                 <Route path="/exam/examday2" component={ExamDay2}></Route>
16 |                 <Route path="/exam/newyear" component={NewYear}></Route>
17 |             </Switch>
18 |     </div>
19 | }
20 | export default Exam


--------------------------------------------------------------------------------
/src/catalog/lesson.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Drag from '../drag'
 3 | import Shopcar from '../shopcar'
 4 | import Shopping from '../shopping'
 5 | import Address from '../address'
 6 | import Login from "../login"
 7 | import MonthA from "../monthA"
 8 | import Pay from "../pay"
 9 | import Cinema from "../cinema"
10 | import{
11 |     Switch,
12 |     Route
13 | } from "react-router-dom"
14 | function Lesson(){
15 |     return <div>
16 |             {/* <Link to="/lesson/drag">drag</Link><br />
17 |             <Link to="/lesson/shopcar">shopcar</Link><br />
18 |             <Link to="/lesson/shopping">shopping</Link><br />
19 |             <Link to="/lesson/address">address</Link><br /> */}
20 |             <Switch>
21 |                 <Route path="/lesson/address" component={Address}></Route>
22 |                 <Route path="/lesson/drag" component={Drag}></Route>
23 |                 <Route path="/lesson/shopcar" component={Shopcar}></Route>
24 |                 <Route path="/lesson/shopping" component={Shopping}></Route>
25 |                 <Route path="/lesson/login" component={Login}></Route>
26 |                 <Route path="/lesson/monthA" component={MonthA}></Route>
27 |                 <Route path="/lesson/pay" component={Pay}></Route>
28 |                 <Route path="/lesson/cinema" component={Cinema}></Route>
29 |             </Switch>
30 |     </div>
31 | }
32 | export default Lesson


--------------------------------------------------------------------------------
/src/cinema/detail.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {connect} from "react-redux"
 3 | class Index extends Component{
 4 |     render(){
 5 |         let {id}=this.props.location.state;
 6 |         let {alldata}=this.props.movielist;
 7 |         return <div>
 8 |             {
 9 |                 alldata.map((item)=>{
10 |                     if(item.id===id){
11 |                         return <div>
12 |                             { item.name }
13 |                         </div>
14 |                     }
15 |                 })
16 |             }
17 |         </div>
18 |     }
19 | }
20 | let mapStateToProps=(store)=>{
21 |     return store
22 | }
23 | Index = connect(mapStateToProps)(Index)
24 | export default Index
25 | 


--------------------------------------------------------------------------------
/src/cinema/home.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin:0;
  3 |     padding:0;
  4 |     list-style: none;
  5 | }
  6 | body,html{
  7 |     width: 100%;
  8 |     height: 100%;
  9 | }
 10 | #root,#root>div:last-child{
 11 |     width: 100%;
 12 |     height: 100%;
 13 | }
 14 | .cinema{
 15 |     width: 100%;
 16 |     height: 100%;
 17 |     display: flex;
 18 |     flex-direction: column;
 19 | }
 20 | .cinema .Chead{
 21 |     width: 100%;
 22 |     height: 44px;
 23 |     background: crimson;
 24 | }
 25 | .cinema .Chead h3{
 26 |     width: 100%;
 27 |     height: 100%;
 28 |     text-align: center;
 29 |     line-height: 44px;
 30 |     color:#fff;
 31 | }
 32 | .cinema .Csection{
 33 |     width: 100%;
 34 |     flex:1;
 35 |     display: flex;flex-direction: column;
 36 | }
 37 | .cinema .Csection .title{
 38 |     width: 100%;
 39 |     height: 44px;
 40 |     display: flex;
 41 | }
 42 | .cinema .Csection .title .left{
 43 |     width: 75%;
 44 |     height: 100%;
 45 |     display: flex;
 46 |     border-bottom:1px solid #ccc;
 47 | }
 48 | .cinema .Csection .title .left p{
 49 |     width: 100%;
 50 |     height: 100%;
 51 |     text-align: center;
 52 |     line-height: 44px;
 53 | }
 54 | .cinema .Csection .right{
 55 |     flex:1;
 56 |     height: 100%;
 57 |     text-align: center;
 58 |     line-height: 44px;
 59 |     border:1px solid #ccc;
 60 | }
 61 | .cinema .Csection .datelist{
 62 |     width: 100%;
 63 |     flex:1;
 64 |     overflow:scroll;
 65 | }
 66 | .cinema .datelist li{
 67 |     width: 100%;
 68 |     height: 200px;
 69 |     display: flex;
 70 | }
 71 | li .img{
 72 |     width: 100px;
 73 |     height: 100%;
 74 | }
 75 | .img img{
 76 |     width: 90%;
 77 |     margin-left: 5px;
 78 |     margin-top:15px;
 79 | }
 80 | li .about{
 81 |     flex:1;
 82 |     padding:15px;
 83 |     height: 100%;
 84 | } 
 85 | li .look{
 86 |     width: 50px;
 87 |     padding:15px 5px;;
 88 |     height: 100%;
 89 | }
 90 | .look p{
 91 |     text-align: center;
 92 | }
 93 | .cinema .Cfoot{
 94 |     width: 100%;
 95 |     height: 44px;
 96 |     display: flex;
 97 | }
 98 | .cinema .Cfoot p{
 99 |     width: 100%;
100 |     height: 100%;
101 |     text-align: center;
102 |     line-height: 44px;
103 | }


--------------------------------------------------------------------------------
/src/cinema/home.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {connect} from "react-redux"
 3 | import "./home.css"
 4 | class Index extends Component{
 5 |     render(){
 6 |         let {movielist,history}=this.props;
 7 |         console.log(movielist);
 8 |         return <div className="cinema">
 9 |             <div className="Chead">
10 |                 <h3>猫眼电影</h3>
11 |             </div>
12 |             <div className="Csection">
13 |                 <div className="title">
14 |                     <div className="left">
15 |                         <p>北京</p>
16 |                         <p>热映</p>
17 |                         <p>待放</p>
18 |                     </div>
19 |                     <div className="right" onClick={
20 |                       ()=>{  history.push('/lesson/cinema/search')}
21 |                     }>搜索</div>
22 |                 </div>
23 |                 <ul className="datelist">
24 |                 {
25 |                     movielist.alldata&&movielist.alldata.map((item,key)=>{
26 |                             return <li key={key}>
27 |                                 <div className="img">
28 |                                     <img src={require(`${item.src}`)} alt=""/>
29 |                                 </div>
30 |                                 <div className="about">
31 |                                     <h3>{item.name}</h3>
32 |                                     <p>{item.introduction}</p>
33 |                                     <p>{item.actor}</p>
34 |                                     <p>{item.address}</p>
35 |                                 </div>
36 |                                 <div className="look">
37 |                                     <p>{item.mark}分</p>
38 |                                     <p style={item.buy==="购票"?{background:"red",color:"#fff"}:{background:"skyblue",color:"#fff"}}>{item.buy}</p>
39 |                                 </div>
40 |                             </li>
41 |                     })
42 |                 }
43 |                 </ul>
44 |             </div>
45 |             <div className="Cfoot">
46 |                 <p style={{color:"red"}}>电影</p>
47 |                 <p>影院</p>
48 |                 <p>我的</p>
49 |             </div>
50 |         </div>
51 |     }
52 | }
53 | let mapStateToProps=(store)=>{
54 |     return store
55 | }
56 | Index = connect(mapStateToProps)(Index)
57 | export default Index


--------------------------------------------------------------------------------
/src/cinema/img/mp1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/cinema/img/mp1.jpg


--------------------------------------------------------------------------------
/src/cinema/img/mp2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/cinema/img/mp2.jpg


--------------------------------------------------------------------------------
/src/cinema/img/mp3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/cinema/img/mp3.jpg


--------------------------------------------------------------------------------
/src/cinema/img/mp4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/cinema/img/mp4.jpg


--------------------------------------------------------------------------------
/src/cinema/index.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react";
 2 | import {
 3 |     Switch,
 4 |     Route,
 5 |     Redirect
 6 | } from "react-router-dom"
 7 | import Home from "./home"
 8 | import Search from "./search"
 9 | import Detail from "./detail"
10 | class Index extends Component{
11 |     render(){
12 |         let {match}=this.props
13 |         return <div className="cinema">
14 |             <Switch>
15 |                 <Redirect exact from={`${match.path}/`} to={`${match.path}/home`}></Redirect>
16 |                 <Route path={`${match.path}/home`} component={Home}></Route>
17 |                 <Route path={`${match.path}/search`} component={Search}></Route>
18 |                 <Route path={`${match.path}/detail`} component={Detail}></Route>
19 |             </Switch>
20 |         </div>
21 |     }
22 | }
23 | export default Index;


--------------------------------------------------------------------------------
/src/cinema/search.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding:0;
 4 |     list-style: none;
 5 | }
 6 | body,html{
 7 |     width: 100%;
 8 |     height: 100%;
 9 | }
10 | #root,#root>div:last-child,.cinema,.cinema>div{
11 |     width: 100%;
12 |     height: 100%;
13 | }
14 | .Search{
15 |     width: 100%;
16 |     height: 100%;
17 |     display: flex;
18 |     flex-direction: column;
19 | }
20 | .Shead{
21 |     width: 100%;
22 |     height: 44px;
23 |     background: crimson;
24 |     display: flex;
25 |     color:#fff;
26 |     justify-content: space-between;
27 | }
28 | .Shead div{
29 |     width: 100%;
30 |     height: 100%;
31 |     text-align: center;
32 |     line-height: 44px;
33 |     color:#fff;
34 | }
35 | .Ssection{
36 |     width: 100%;
37 |     flex:1;
38 |     display: flex;
39 |     flex-direction: column;
40 | }
41 | .Ssection .title{
42 |     width: 100%;
43 |     height: 44px;
44 | }
45 | .title input{
46 |     width: 80%;
47 |     height: 40px;
48 |     line-height: 44px;
49 |     border:1px solid #ccc;
50 |     margin-top:2px;
51 | }
52 | .title span{
53 |     display: inline-block;
54 |     width: 19%;
55 |     height: 100%;
56 |     text-align: center;
57 |     line-height: 44px;
58 | }
59 | .Ssection .list{
60 |     width: 100%;flex: 1;
61 |     overflow: scroll;
62 | }
63 | .list li{
64 |     width: 100%;
65 |     height: 200px;
66 |     display: flex;
67 | }
68 | li .img{
69 |     width: 100px;
70 |     height: 100%;
71 | }
72 | .img img{
73 |     width: 90%;
74 |     margin-left: 5px;
75 |     margin-top:15px;
76 | }
77 | li .about{
78 |     flex:1;
79 |     padding:15px;
80 |     height: 100%;
81 | } 
82 | li .look{
83 |     width: 50px;
84 |     padding:15px 5px;;
85 |     height: 100%;
86 | }
87 | .look p{
88 |     text-align: center;
89 | }


--------------------------------------------------------------------------------
/src/cinema/search.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react"
 2 | import "./search.css"
 3 | import { connect } from "react-redux"
 4 | class Index extends Component {
 5 |   state = {
 6 |     value: "",
 7 |     ...this.props
 8 |   }
 9 |   change = (ev) => {
10 |     let { alldata, value } = this.state.movielist;
11 |     value = ev.target.value;
12 |     if (value !== "") {
13 |       this.props.dispatch({ type: "CHANGE" })
14 |       alldata.forEach((item) => {
15 |         if (item.name.indexOf(value) !== -1) {
16 |           let obj = item;
17 |           this.props.dispatch({ type: "PUSH", obj: obj })
18 |         }
19 |       })
20 |     }
21 |     this.setState({ value })
22 |   }
23 |   cancel = () => {
24 |     console.log("1111111111111111111111111111")
25 |     console.log(this.props)
26 |     let {history} = this.props
27 |     history.goBack()
28 |   }
29 | 
30 |   render() {
31 |     let { blurlist } = this.props.movielist;
32 |     console.log(blurlist)
33 |     return <div>
34 |       <div className="Search">
35 |         <div className="Shead">
36 |           <div onClick={() => this.cancel()}>back</div>
37 |           <div>搜索</div>
38 |           <div></div>
39 |         </div>
40 |         <div className="Ssection">
41 |           <div className="title">
42 |             <input type="text" value={this.state.value} onChange={(ev) => {
43 |               this.props.dispatch({ type: "CHANGES" })
44 |               this.change(ev)
45 |             }} />
46 |             <span onClick={() => this.cancel()}>取消</span>
47 |           </div>
48 |           <ul className="list">
49 |             {
50 |               blurlist && blurlist.map((item, key) => {
51 |                 return <li key={key} onClick={() => {
52 |                   console.log(item.id)
53 |                   this.props.history.push({ pathname: "/lesson/cinema/detail", state: { id: item.id } })
54 |                 }}>
55 |                   <div className="img">
56 |                     <img src={require(`${item.src}`)} alt="" />
57 |                   </div>
58 |                   <div className="about">
59 |                     <h3>{item.name}</h3>
60 |                     <p>{item.introduction}</p>
61 |                     <p>{item.actor}</p>
62 |                     <p>{item.address}</p>
63 |                   </div>
64 |                   <div className="look">
65 |                     <p>{item.mark}分</p>
66 |                     <p style={item.buy === "购票" ? { background: "red", color: "#fff" } : { background: "skyblue", color: "#fff" }}>{item.buy}</p>
67 |                   </div>
68 |                 </li>
69 |               })
70 |             }
71 |           </ul>
72 |         </div>
73 |       </div>
74 |     </div>
75 |   }
76 | }
77 | let mapStateToProps = (state) => {
78 |   return state
79 | }
80 | Index = connect(mapStateToProps)(Index)
81 | export default Index


--------------------------------------------------------------------------------
/src/drag/index.jsx:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: LiXiaoNa 
 3 |  * @Date: 2019-02-15 16:49:29 
 4 |  * @Last Modified by: LiXiaoNa
 5 |  * @Last Modified time: 2019-05-07 15:28:18
 6 |  */
 7 | import React from "react"
 8 | 
 9 | const device={
10 |     position:"absolute",
11 |     width:200,
12 |     height:200,
13 |     background:"red",
14 |     cursor:'printer'
15 | }
16 | class DragBox extends React.Component{
17 |     constructor (props){
18 |         super(props)
19 |         this.state={
20 |             left:10,
21 |             top:0
22 |         }
23 |     }  
24 |     mouseDowm=ev=>{
25 |         let {left,top}=this.state;
26 |         let disX=ev.clientX-left;
27 |         let disY=ev.clientY-top;
28 |         document.onmousemove=ev=>{
29 |             let left1=ev.clientX-disX
30 |             let top1=ev.clientY-disY
31 |             this.setState({left:left1,top:top1})
32 |         }
33 |         document.onmouseup=()=>{
34 |             document.onmousemove=null
35 |             document.onmouseup=null
36 |         }
37 |     }
38 |     render(){
39 |         let {left,top}=this.state;
40 |         return <div style={{...device,left:left,top:top}} onMouseDown={this.mouseDowm}
41 |         >
42 |         
43 |         </div>
44 |     }
45 | }
46 | export default DragBox
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/src/examDay2/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | class ExamDay2 extends React.Component {
 4 |     constructor(props) {
 5 |         super(props)
 6 |     }
 7 |     render() {
 8 |         return <div>
 9 |             <HeadBar />
10 |             <NavBar />
11 |         </div>
12 |     }
13 | }
14 | function HeadBar() {
15 |     return <h1><a href="#">豆瓣</a></h1>
16 | }
17 | class NavBar extends React.Component {
18 |     constructor(props) {
19 |         super(props)
20 |         this.state =
21 |             {
22 |                 Nav: [
23 |                     { name:"电影",color:"red"},
24 |                     { name:"图书",color:"orange"},
25 |                     { name:"广播",color:"pink"},
26 |                     { name:"小组",color:"yellow"}
27 |                 ]
28 |             }
29 | 
30 |     }
31 |     render() {
32 |         let {Nav}=this.state
33 |         return <ul>
34 |             {
35 |                 Nav.map((item,key)=>{
36 |                     return <li key={key} style={{color:item.color}}>{item.name}</li>
37 |                 })
38 |             }
39 |         </ul>
40 |     }
41 | }
42 | export default ExamDay2


--------------------------------------------------------------------------------
/src/examDay3/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | class Exam extends React.Component{
 4 |     constructor(props){
 5 |         super(props);
 6 |         this.state={
 7 |             num:0,
 8 |             status:true
 9 |         }
10 |     }
11 |     render(){
12 |         let {num,status}=this.state
13 |         return <div>
14 |             {
15 |                 status?<button onClick={this.add}>赞</button>:null
16 |             }
17 |             <span>{num}</span>
18 |         </div>
19 |     }
20 |     add=()=>{
21 |         let {num}=this.state
22 |         num++
23 |         if(num>10){
24 |             this.setState({status:false})
25 |         }else{
26 |             this.setState({num:num})
27 |         }
28 |         
29 |     }
30 | }
31 | 
32 | export default Exam;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | // import ExamDay3 from './examDay3'
 4 | // import ExamDay2 from './examDay2'
 5 | // import Drag from './drag'
 6 | // import Shopcar from './shopcar'
 7 | // import Shopping from './shopping'
 8 | import RootRouter from './router'
 9 | import store from "./store"
10 | import {Provider} from "react-redux";
11 | // import RootRouter from './address/index'
12 | // import './store'
13 | // import Address from "./address"
14 | // import Newyear from "./newYear"
15 | // import MonthA from "./monthA"
16 | 
17 | 
18 | 
19 | // ReactDOM.render(<MonthA />,document.getElementById("root"))
20 | // ReactDOM.render(<Newyear />,document.getElementById("root"))
21 | //ReactDOM.render( <ExamDay3 /> , document.getElementById('root'));
22 | // ReactDOM.render( <ExamDay2 /> , document.getElementById('root'));
23 | // ReactDOM.render( <Drag /> , document.getElementById('root'));
24 | // ReactDOM.render( <Shopcar /> , document.getElementById('root'));
25 | // ReactDOM.render( <Shopping /> , document.getElementById('root'));
26 | // ReactDOM.render( <Router /> , document.getElementById('root'));
27 | // ReactDOM.render( <Catalog /> , document.getElementById('root'));
28 | ReactDOM.render( 
29 |     <Provider store={store}>
30 |         <RootRouter />
31 |     </Provider> , 
32 |     document.getElementById('root')
33 | );
34 | // ReactDOM.render( <Address /> , document.getElementById('root'));


--------------------------------------------------------------------------------
/src/login/autho.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {
 3 |     Redirect
 4 | } from "react-router-dom"
 5 | 
 6 | function Autho(RouterComponent){
 7 |     return class extends Component{
 8 |         render(){
 9 |             
10 |             let isLogin=JSON.parse(localStorage.getItem("isLogin"))
11 |             console.log(1)
12 |             if(!isLogin||isLogin.status!==1){
13 |                return <Redirect to="/login"></Redirect>
14 |             }
15 |             return <RouterComponent {...this.props}/>
16 |         }
17 |     }
18 | }
19 | export default Autho;


--------------------------------------------------------------------------------
/src/login/index.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {
 3 |     BrowserRouter as Router,
 4 |     Route,
 5 |     Switch
 6 | } from "react-router-dom"
 7 | import Login from "./login"
 8 | import Main from "../Main"
 9 | import Autho from "./autho"
10 | // Main=Autho(Main)
11 | export default class Index extends Component{
12 |     render(){
13 |         return <Router>
14 |             <Switch>
15 |                 <Route exact path="/login" component={Login}></Route>
16 |                 <Route path="/" component={Autho(Main)}></Route>
17 |             </Switch>
18 |         </Router>
19 |     }
20 | }


--------------------------------------------------------------------------------
/src/login/login.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {Button,Input} from "antd"
 3 | import 'antd/dist/antd.css';  
 4 | export default class Index extends Component{
 5 |     state={
 6 |         val:""
 7 |     }
 8 |     login=()=>{
 9 |         let val =this.state.val
10 |         if(!val){
11 |             return;
12 |         }
13 |         localStorage.setItem('isLogin',JSON.stringify({user:val,status:2}));
14 |         this.props.history.push("/")
15 |     }
16 |     render(){
17 |         let {val} = this.state
18 |         return <div>
19 |             <div>
20 |                 <Input value={val} onChange={ev=>{
21 |                     this.setState({val:ev.target.value})
22 |                 }} type="请输入用户名"/>
23 |             </div>
24 |             <div>
25 |                 <Button onClick={()=>this.login()}>登录</Button>
26 |             </div>
27 |         </div>
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/monthA/index.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component, createContext } from "react"
  2 | import { pageData } from "./pagedata"
  3 | import { Input, Icon } from "antd"
  4 | import 'antd/dist/antd.css';
  5 | import style from "./style.module.css"
  6 | import { connect } from "react-redux"
  7 | 
  8 | const { Provider, Consumer } = createContext()
  9 | class Index extends Component {
 10 |   state = {
 11 |     pageData
 12 |   }
 13 |   updateView = (newPageData) => {
 14 |     this.setState({ pageData: newPageData })
 15 |   }
 16 |   render() {
 17 |     let { pageData } = this.state
 18 |     let { list } = this.props;
 19 |     console.log(list)
 20 |     let store = {
 21 |       pageData,
 22 |       updateView: this.updateView
 23 |     }
 24 |     return <Provider value={store}>
 25 |       <ul>
 26 |         {
 27 |           pageData && pageData.map((item, key) => {
 28 |             return <SinglePage key={key} pageSingle={item} />
 29 |           })
 30 |         }
 31 |       </ul>
 32 |     </Provider>
 33 | 
 34 |   }
 35 | }
 36 | class SinglePage extends Component {
 37 |   changeValue = (ev, store) => {
 38 |     this.props.pageSingle.title = ev.target.value
 39 |     store.updateView(store.pageData)
 40 |   }
 41 |   doubleClick = (store) => {
 42 |     this.resetEdit(store)
 43 |     this.props.pageSingle.isEdit = true;
 44 |     store.updateView(store.pageData)
 45 |   }
 46 |   onKeyDown = (ev, store) => {
 47 |     let keyCode = ev.keyCode;
 48 |     if (keyCode !== 13) {
 49 |       return;
 50 |     }
 51 |     this.props.pageSingle.isEdit = false;
 52 |     store.updateView(store.pageData)
 53 |   }
 54 |   resetEditObj = obj => {
 55 |     obj.isEdit = false;
 56 |     obj.child && obj.child.forEach(item => {
 57 |       this.resetEditObj(item)
 58 |     })
 59 |   }
 60 |   resetEdit = (store) => {
 61 |     store.pageData.forEach(item => {
 62 |       this.resetEditObj(item)
 63 |     })
 64 |   }
 65 |   add = (store) => {
 66 |     let obj = {
 67 |       title: "子页面",
 68 |       isOpen: true,
 69 |       isEdit: true
 70 |     }
 71 |     this.resetEdit(store)
 72 |     if (!(this.props.pageSingle.child instanceof Array)) {
 73 |       this.props.pageSingle.child = [];
 74 |     }
 75 |     this.props.pageSingle.child.forEach((item) => {
 76 |       item.isEdit = false
 77 |     })
 78 |     this.props.pageSingle.child.push(obj);
 79 |     store.updateView(store.pageData)
 80 |   }
 81 |   renderTitle = (title, isEdit, store) => {
 82 |     if (isEdit) {
 83 |       return <div className={style.inputWrap}>
 84 |         <Input value={title} onChange={ev => {
 85 |           this.changeValue(ev, store)
 86 |         }}
 87 |           onKeyDown={ev => { this.onKeyDown(ev, store) }} />
 88 |       </div>
 89 |     } else {
 90 |       return <span onDoubleClick={() => this.doubleClick(store)}>{title}</span>
 91 |     }
 92 |   }
 93 |   del = (store) => {
 94 |     let { index, parentArr } = this.props;
 95 |     if (this.props.pageSingle.child && (this.props.pageSingle.child.length > 0)) {
 96 |       let result = window.confirm("点击确定删除该页面及子页面，点击取消仅删除该页面")
 97 |       if (result) {
 98 |         parentArr.splice(index, 1);
 99 |       } else {
100 |         let child = this.props.pageSingle.child;
101 |         parentArr.splice(index, 1, child)
102 |       }
103 |     } else {
104 |       parentArr.splice(store.pageData);
105 |     }
106 |     store.updateView(store.pageData)
107 |   }
108 |   render() {
109 |     let { key, pageSingle } = this.props
110 |     return <Consumer>
111 |       {
112 |         store => {
113 |           return <li key={key} className={style.page} >
114 |             <div className={style.title}>
115 |               {
116 |                 this.renderTitle(pageSingle.title, pageSingle.isEdit, store)
117 |               }
118 |               <div className={style.btn}>
119 |                 <Icon style={{ marginRight: 10 }} type="plus-circle" theme="filled" onClick={() => { this.add(store) }} />
120 |                 <Icon type="delete" onClick={() => { this.del(store) }} theme="filled" />
121 |               </div>
122 |             </div>
123 |             <ChildPage {...this.props} />
124 |           </li>
125 | 
126 | 
127 |         }
128 |       }
129 |     </Consumer>
130 |   }
131 | }
132 | function ChildPage(props) {
133 |   let { child } = props.pageSingle;
134 |   // if(!isOpen){
135 |   //     return null
136 |   // }
137 |   if (!child || child.length === 0) {
138 |     return null
139 |   }
140 |   return <ul className={style.ul}>
141 |     {
142 |       child && child.map((item, key) => {
143 |         return <SinglePage index={key} parentArr={child} key={key} pageSingle={item} ></SinglePage>
144 |       })
145 |     }
146 |   </ul>
147 | }
148 | let mapStateToProps = (state) => {
149 |   return state;
150 | }
151 | let mapDispatchToProps = (dispatch) => {
152 |   return {
153 | 
154 |   }
155 | }
156 | Index = connect(mapStateToProps, mapDispatchToProps)(Index)
157 | export default Index


--------------------------------------------------------------------------------
/src/monthA/pagedata.js:
--------------------------------------------------------------------------------
 1 | export const pageData=[
 2 |     {
 3 |         title:"页面一",
 4 |         isOpen:true,
 5 |         isEdit:true,
 6 |         child:[
 7 |             {
 8 |                 title:"页面一的子页面"
 9 |             }
10 |         ]
11 |     }, {
12 |         title:"页面er",
13 |         isOpen:true,
14 |         isEdit:true,
15 |         child:[
16 |             {
17 |                 title:"页面er的子页面"
18 |             }
19 |         ]
20 |     }
21 | ]


--------------------------------------------------------------------------------
/src/monthA/style.module.css:
--------------------------------------------------------------------------------
 1 | /* *{
 2 |     width: 100%;
 3 |     height: 100%;
 4 | }
 5 | body,html{
 6 |     width: 100%;
 7 |     height: 100%;
 8 | }
 9 | #root{
10 |     width: 100%;
11 |     height: 100%;
12 | } */
13 | .page{
14 |     width:300px;
15 | }
16 | .ul{
17 |    padding-left:40px;
18 | }
19 | .btn{
20 |    display: none;
21 | }
22 | .title{
23 |    display: flex; justify-content: space-between; line-height:40px;
24 | }
25 | .title:hover .btn{
26 |    display: block;
27 | }
28 | .inputWrap{
29 |    width:200px;
30 | }


--------------------------------------------------------------------------------
/src/newYear/css/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding:0;
 4 | }
 5 | body,html{
 6 |     width: 100%;
 7 |     height: 100%;
 8 | }
 9 | #root{
10 |     width: 100%;
11 |     height: 100%;
12 |     overflow: hidden;
13 | }
14 | .wrap{
15 |     width: 100%;
16 |     height: 100%;
17 |     position: relative;
18 |     display:flex;
19 |     flex-direction: column;
20 |     background:#e12552
21 | }
22 | .main{
23 |     flex:1;
24 | }
25 | .h{
26 |     position: relative;
27 | }
28 | .h img{
29 |     position: absolute;
30 | }
31 | .h .h1{
32 |     right:-200px;
33 |     top:-80px;
34 | }
35 | .h .h2{
36 |     left:-100px;
37 |     top:260px;
38 | }
39 | .h .h3{
40 |     width: 100px;
41 |     height: 150px;
42 |     top:110px;
43 |     left:50px;
44 | }
45 | .h .h4{
46 |     width: 100px;
47 |     height: 100px;
48 |     top:160px;
49 |     left:170px;
50 | }
51 | .h .h5{
52 |     position: absolute;
53 |     width: 100px;
54 |     height: 40px;
55 |     left:220px;
56 |     top:280px;
57 | }
58 | .wrap img{
59 |     width: 100%;
60 |     height: auto;
61 | }
62 | /* .haha{
63 |     width: 100%;
64 |     height: 100%;
65 |     position: absolute;
66 |     top:0;
67 |     left:0;
68 | } */


--------------------------------------------------------------------------------
/src/newYear/data.js:
--------------------------------------------------------------------------------
 1 | let data={
 2 |     list:[
 3 |         {   
 4 |             hh:"福",
 5 |             tit:"那些不是春联的别称1",
 6 |             check:[
 7 |                 "A:对联",
 8 |                 "B:春帖",
 9 |                 "C:门对",
10 |                 "D:喜联"
11 |             ],
12 |             sure:2
13 |         },
14 |         {
15 |             hh:"禄",
16 |             tit:"那些不是春联的别称2",
17 |             check:[
18 |                 "A:对联",
19 |                 "B:春帖",
20 |                 "C:门对",
21 |                 "D:喜联"
22 |             ],
23 |             sure:3
24 |         },{
25 |             hh:"寿",
26 |             tit:"那些不是春联的别称3",
27 |             check:[
28 |                 "A:对联",
29 |                 "B:春帖",
30 |                 "C:门对",
31 |                 "D:喜联"
32 |             ],
33 |             sure:0
34 |         },{
35 |             hh:"旺",
36 |             tit:"那些不是春联的别称4",
37 |             check:[
38 |                 "A:对联",
39 |                 "B:春帖",
40 |                 "C:门对",
41 |                 "D:喜联"
42 |             ],
43 |             sure:3
44 |         },{
45 |             hh:"德",
46 |             tit:"那些不是春联的别称5",
47 |             check:[
48 |                 "A:对联",
49 |                 "B:春帖",
50 |                 "C:门对",
51 |                 "D:喜联"
52 |             ],
53 |             sure:1
54 |         }
55 |     ]
56 | }
57 | export default data


--------------------------------------------------------------------------------
/src/newYear/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/1.png


--------------------------------------------------------------------------------
/src/newYear/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/11.jpg


--------------------------------------------------------------------------------
/src/newYear/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/12.jpg


--------------------------------------------------------------------------------
/src/newYear/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/13.jpg


--------------------------------------------------------------------------------
/src/newYear/img/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/14.jpg


--------------------------------------------------------------------------------
/src/newYear/img/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/15.jpg


--------------------------------------------------------------------------------
/src/newYear/img/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/16.jpg


--------------------------------------------------------------------------------
/src/newYear/img/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/17.jpg


--------------------------------------------------------------------------------
/src/newYear/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/2.png


--------------------------------------------------------------------------------
/src/newYear/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/3.png


--------------------------------------------------------------------------------
/src/newYear/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/4.png


--------------------------------------------------------------------------------
/src/newYear/img/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/5.png


--------------------------------------------------------------------------------
/src/newYear/img/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/6.png


--------------------------------------------------------------------------------
/src/newYear/img/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/7.png


--------------------------------------------------------------------------------
/src/newYear/img/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/8.png


--------------------------------------------------------------------------------
/src/newYear/img/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/newYear/img/9.png


--------------------------------------------------------------------------------
/src/newYear/index.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {
 3 |     BrowserRouter as Router,
 4 |     Route,
 5 |     Switch
 6 | } from "react-router-dom"
 7 | import Start from "./start"
 8 | import Quest from "./quest"
 9 | import Kll from "./kll"
10 | class Index extends Component{
11 |     render(){
12 |         return <Router>
13 |            <Switch>
14 |                 <Route path="/newyear" component={Start}></Route>
15 |                 <Route path="/hhh/:sort/quest" component={Quest}></Route>        
16 |                 <Route path="/hhh/quest" component={Kll}></Route>        
17 |            </Switch>
18 |         </Router>
19 |     }
20 | }
21 | export default Index


--------------------------------------------------------------------------------
/src/newYear/kll.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react"
 2 | class Index extends Component {
 3 |     render() {
 4 |         console.log(this.props)
 5 |         console.log(this.state)
 6 |         let {search}=this.props.location;
 7 |         console.log(search)
 8 |         return <div>
 9 |             一共答对了<span>{search.slice(1).split("=")[1]}</span>题
10 |         </div>
11 |     }
12 | }
13 | export default Index
14 | 


--------------------------------------------------------------------------------
/src/newYear/quest.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | // import {
 3 | //     Route
 4 | // } from "react-router-dom"
 5 | import "./css/style.css"
 6 | import data from "./data"
 7 | let styleCss={
 8 |     background:"orange",
 9 |     color:"#fff"
10 | }
11 | 
12 | class Index extends Component{
13 |     clck=(sure,key)=>{
14 |             let { num } = this.state;
15 |         if (sure === key) {
16 |             num++;
17 |             this.setState({ num })
18 |             console.log(num)
19 |         } 
20 |         let sort =this.props.match.params.sort*1;
21 |         sort++;
22 |         this.props.history.push(`/hhh/${sort}/quest`)  
23 |          setTimeout(()=>{
24 |              if(sort>4){ 
25 |             // sort=4;
26 |                 this.props.history.push(`/hhh/quest?abc=${this.state.num}`)      
27 |         }
28 |     },1000)
29 |     }
30 |     state={
31 |             num:0
32 |         }
33 |     render(){
34 |         console.log(this.props)
35 |         let sort =this.props.match.params.sort*1;
36 |         return <div>
37 |             <div className="head">
38 |                 {
39 |                     data.list && data.list.map((item,key)=>{
40 |                         return <p style={key<=sort?styleCss:null} key={key}>{item.hh}</p>
41 |                     })
42 |                 }
43 |             </div>
44 |             <div className="main">
45 |                 <p>{data.list[sort].tit}</p>
46 |                 {
47 |                     data.list[sort].check.map((item,key)=>{
48 |                         return <p key={key} onClick={()=>{this.clck(data.list[sort].sure,key)}}>{item}</p>
49 |                     })
50 |                 }
51 |             </div>
52 |         </div>
53 |     }
54 | }
55 | export default Index


--------------------------------------------------------------------------------
/src/newYear/start.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react"
 2 | import "./css/style.css"
 3 | class Index extends Component {
 4 |     render() {
 5 |         console.log(this.props)
 6 |         return <div className="wrap">
 7 |             <div className="top">
 8 |                 <img src={require("./img/2.png")} alt="" />
 9 |             </div>
10 |             <div className="main">
11 |                 <div className="h">
12 |                     <img src={require("./img/5.png")} alt="" />
13 |                     <img src={require("./img/6.png")} className="h1" alt="" />
14 |                     <img src={require("./img/7.png")} className="h2" alt="" />
15 |                     <img src={require("./img/3.png")} className="h3" alt="" />
16 |                     <img src={require("./img/4.png")} className="h4" alt="" />
17 |                     <img src={require("./img/8.png")} onClick={()=>this.props.history.push('hhh/0/quest')} 
18 |                     className="h5" alt="" />
19 |                 </div>
20 | 
21 |             </div>
22 |             <div className="bottom">
23 |                 <img src={require("./img/1.png")} alt="" />
24 |             </div>
25 |         </div>
26 |     }
27 | }
28 | export default Index
29 | 


--------------------------------------------------------------------------------
/src/pay/index.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding:0;
 4 | }
 5 | body,html{
 6 |     width: 100%;
 7 |     height: 100%;
 8 | }
 9 | #root{
10 |     width: 100%;
11 |     height: 100%;
12 | }
13 | #root .carWrap{
14 |     width: 100%;
15 |     height: 200px;
16 |     display: flex;
17 |     flex-wrap: wrap;
18 |     justify-content: flex-start;
19 | }
20 | #root .carWrap p{
21 |     padding: 0 5px;
22 |     text-align: center;
23 |     width: 20%;
24 |     height: 40px;
25 | 
26 | }


--------------------------------------------------------------------------------
/src/pay/index.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import {
 3 |     Switch,
 4 |     Route,
 5 |     Redirect
 6 | } from "react-router-dom"
 7 | import Start from "./start"
 8 | import More from "./more"
 9 | class Index extends Component{
10 |     render(){
11 |         let {match}=this.props;
12 |         console.log(match)
13 |         return <Switch>
14 |             <Redirect exact from={`${match.path}`} to={`${match.path}/start`}></Redirect>
15 |             <Route path={`${match.path}/start`} component={Start}></Route>
16 |             <Route path={`${match.path}/more`} component={More}></Route>
17 |         </Switch>
18 |     }
19 | }
20 | 
21 | export default Index


--------------------------------------------------------------------------------
/src/pay/more.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding:0;
 4 | }
 5 | body,html{
 6 |     width: 100%;
 7 |     height: 100%;
 8 | }
 9 | #root{
10 |     width: 100%;
11 |     height: 100%;
12 | }
13 | #root>div:last-child{
14 |     width: 100%;
15 |     height: 100%;
16 | }
17 | .letcar{
18 |     width: 100%;
19 |     height: 100%;
20 |     display: flex;
21 |     flex-direction: column;
22 | }
23 | .letcar .headApp{
24 |     width: 100%;
25 |     height: 44px;
26 |     background: skyblue;
27 |     color:#fff;
28 |     display: flex;
29 |     justify-content: space-around
30 | }
31 | .headApp div{
32 |     padding:0 5px;
33 |     width: 33%;
34 |     text-align: center;
35 |     line-height: 44px;
36 | }
37 | .letcar .section{
38 |     width: 100%;
39 |     flex:1;
40 |     overflow: scroll;
41 | }
42 | .section>div{
43 |     width: 100%;
44 |     height: 400px;
45 | }
46 | .section>div h3{
47 |     font-size: 18px;
48 |     width: 100%;
49 |     height: 44px;
50 |     line-height: 44px;
51 | }
52 | .section>div>div{
53 |     width: 100%;
54 |     height: 356px;
55 |     display: flex;
56 |     flex-wrap: wrap;
57 | }
58 | .section>div>div p{
59 |     width: 20%;
60 |     height: 30px;
61 |     padding:0 3px;
62 |     text-align: center;
63 |     line-height: 30px;
64 |     position: relative;
65 | }
66 | .section>div>div p i{
67 |    position: absolute;
68 |    width: 15px;
69 |    height: 15px;
70 |    line-height: 10px;
71 |    font-weight: bold;
72 |    text-align: center;
73 |    right:0;
74 |    top:0;
75 |    border-radius: 50%;
76 | }
77 | .section>div>div p i.edit{
78 |    display: none;
79 | }
80 | 


--------------------------------------------------------------------------------
/src/pay/more.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import "./more.css"
 3 | import {connect} from "react-redux"
 4 | class Index extends Component{
 5 |     state={
 6 |         isShow:false
 7 |     }
 8 |     changeList=(item)=>{
 9 |         if(item.code===0){
10 |             item.code=1;
11 |             let obj={
12 |                 code:1,
13 |                 icon:"",
14 |                 title:item.title,
15 |             }
16 |             console.log(this.props);
17 |             this.props.dispatch({type:"PUSH",obj:obj})
18 |             this.setState({})
19 |         }
20 |         else if(item.code===1){
21 |             item.code=0;
22 |              let obj={
23 |                 code:1,
24 |                 icon:"",
25 |                 title:item.title,
26 |             } 
27 |             this.props.dispatch({type:"POP",obj:obj})
28 |             this.setState({})
29 |         }
30 |     }
31 |     addApp=(data)=>{
32 |         let {isShow}=this.state
33 |         return <div>
34 |             <h3>{data.title}</h3>
35 |             <div>
36 |                 {
37 |                     data.examples&&data.examples.map((item,key)=>{
38 |                         return <p 
39 |                         onClick={()=>{this.changeList(item)}}
40 |                         key={key}>{item.title}<i className={isShow?"":"edit" }style={item.code?{background:"red"}:{background:"blue"}}>{item.code?"-":"+"}</i></p>
41 |                     })
42 |                 }
43 |                 {
44 |                     isShow?"取消":<span onClick={()=>{
45 |                         isShow=!isShow;
46 |                         this.setState({isShow})
47 |                     }}>{data.title==="我的应用"?"编辑":""}</span>
48 |                 }
49 |             </div>
50 |         </div>
51 |     }
52 |     changeShow=()=>{
53 |         let {isShow}=this.state;
54 |         isShow=!isShow;
55 |         this.setState({isShow})
56 |     }
57 |     render(){
58 |         let {datalist,history}=this.props;
59 |         let {isShow}=this.state;
60 |         return <div className="letcar">
61 |             <div className="headApp">
62 |                 <div onClick={()=>{
63 |                     history.goBack();
64 |                 }}>返回</div>
65 |                 <div>业务中心</div>
66 |                 <div onClick={isShow?()=>{this.changeShow()}:null}>{isShow?"完成":""}</div>
67 |             </div>
68 |             <div className="section">
69 |                 {
70 |                     this.addApp(datalist.myApp,0)
71 |                 }
72 |                 {
73 |                     this.addApp(datalist.carApp,1)
74 |                 }
75 |                 {
76 |                     this.addApp(datalist.cardApp,2)
77 |                 } 
78 |                 
79 |             </div>
80 |         </div>  
81 |     }
82 | }
83 | let mapStateToProps=store=>{
84 |     // console.log(store)
85 |     return store
86 | }
87 | Index = connect(mapStateToProps)(Index)
88 | export default Index


--------------------------------------------------------------------------------
/src/pay/start.jsx:
--------------------------------------------------------------------------------
 1 | import React,{Component} from "react"
 2 | import "./index.css"
 3 | import {connect} from "react-redux"
 4 | class Index extends Component{
 5 |     link=()=>{
 6 |         let {history}=this.props;
 7 |         history.push("/lesson/pay/more")
 8 |     }
 9 |     render(){
10 |         let {datalist}=this.props;
11 |         return <div>
12 |                 <h3>{datalist.myApp.title}</h3>
13 |                 <div className="carWrap">
14 |                     {
15 |                             datalist.myApp&&datalist.myApp.examples.map((item,key)=>{
16 |                                 return <p onClick={key===datalist.myApp.examples.length-1?this.link:null} key={key}>{item.title}</p>
17 |                             })
18 |                         }
19 |                 </div>
20 |             </div>   
21 |     }
22 | }
23 | let mapStateToProps=store=>{
24 |     console.log(store)
25 |     return store
26 | }
27 | Index = connect(mapStateToProps)(Index)
28 | export default Index


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {
 3 |     BrowserRouter as Router,
 4 |     Route,
 5 |     Switch
 6 | } from "react-router-dom"
 7 | 
 8 | import Login from "./login/login"
 9 | import Main from "./Main"
10 | function RootRouter(){
11 |     return <Router>
12 |         <React.Fragment>
13 |             <Switch>
14 |                 <Route exact path="/login" component={Login}></Route>
15 |                 <Route path="/" component={Main}></Route>
16 |             </Switch>
17 |         </React.Fragment>
18 |     </Router>
19 | }
20 | export default RootRouter
21 | 


--------------------------------------------------------------------------------
/src/router_task/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import {
 3 |     BrowserRouter as Router,
 4 |     Route,
 5 |     Switch,
 6 |     Link,
 7 |     Redirect
 8 | } from "react-router-dom"
 9 | 
10 | function Login(){
11 |     return <div>login</div>
12 | }
13 | function List(){
14 |     return <div>list</div>
15 | }
16 | function Main(){
17 |     return <div>main</div>
18 | }
19 | class Index extends React.Component{
20 |     render(){
21 |         return <Router>
22 |             <div>
23 |                 <Link to="/">首页</Link>
24 |                 <Link to={{pathname:"/list",search:"udername='zhangsan'&password='1234566'"}}>列表</Link>
25 |                 <Link to="/login">登录</Link>
26 |                 <Switch>
27 |                     <Redirect exact from="/" to="/list" />
28 |                     <Route exact path="/" component={Main} />
29 |                     <Route path="/login" component={Login} />
30 |                     <Route path="/list" component={List} />
31 |                     <Route path="/list/abc" component={Main} />
32 |                 </Switch>
33 |             </div>
34 |             
35 |         </Router>
36 |     }
37 | }
38 | export default Index


--------------------------------------------------------------------------------
/src/shopcar/index.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0;
 3 |     padding:0;
 4 |     font-size: 16px;
 5 | }
 6 | /* #root{
 7 |     width: 600px;
 8 |     height: 600px;
 9 |     border:1px solid #ccc;
10 |     margin:0 auto;
11 | } */
12 | .head{
13 |     width: 90%;
14 |     height: 260px;
15 |     margin:0 auto;
16 | }
17 | .head p{
18 |     line-height: 30px;
19 |     margin-top:10px;
20 | }
21 | .head p b{
22 |     font-size: 26px;
23 |     color:red;
24 | }
25 | .head p span{
26 |     display: inline-block;
27 |     padding:3px 10px;
28 |     margin-left:10px;
29 |     color:#fff;
30 |     background: tan;
31 | }
32 | .head h3{
33 |     margin-top:20px;
34 |     font-weight: normal;
35 |     height: 50px;
36 |     background: #f5f5f5;
37 | }
38 | .head h3 span{
39 |     display: inline-block;
40 |     height: 30px;
41 |    line-height: 30px;
42 |     padding:0 10px;
43 |     margin-left:10px;
44 |     color:#fff;
45 |     margin-top:10px;
46 |     background: tan;
47 | }
48 | .choose{
49 |     width: 90%;
50 |     margin-top:20px;
51 |     margin:0 auto;
52 | }
53 | .choose p{
54 |     margin-top:10px;
55 | }
56 | .choose p span{
57 |     display: inline-block;
58 |     width: 50px;
59 |     height: 30px;
60 |     line-height: 30px;
61 |     text-align: center;
62 |     border:1px solid #ccc;
63 |     margin-left:5px;
64 | }
65 | .choose p i{
66 |     display: inline-block;
67 |     font-style: normal;
68 |     padding:3px 10px;
69 |     border:1px solid #ccc;
70 |     margin-right: 10px;
71 | }
72 | .choose p span.heighLight{
73 |     background: orange;
74 |     color:#fff;
75 | }
76 | .num span b{
77 |     display: inline-block;
78 |     padding:0 3px;
79 | }


--------------------------------------------------------------------------------
/src/shopcar/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import "./index.css"
 3 | class Shopping extends React.Component {
 4 |     constructor(props) {
 5 |         super(props)
 6 |     }
 7 |     render() {
 8 |         return (<div>
 9 |             <Head />
10 |             <Choose />
11 |         </div>)
12 |     }
13 | }
14 | 
15 | function Head() {
16 |     return <div className="head">
17 |         <p>茵佳兰迪INPLUS-LADY夏季新款  欧美时尚 个性条纹修身背带裙套装（两件套）MI16041952</p>
18 |         <p>直降价：<b>￥288.00</b><span>2.9折</span></p>
19 |         <p>银泰价：<del>￥328.00</del> 参考价：<del>￥988.00</del></p>
20 |         <h3><span>直降</span>   活动时间：5月6日 9:00~5月10日 10:00</h3>
21 |     </div>
22 | }
23 | class Choose extends React.Component {
24 |     constructor(props) {
25 |         super(props);
26 |         this.state={
27 |             color:"黑色",
28 |             isShow:false,
29 |             borderName:"heighLight",
30 |             heighLight:false,
31 |             num:1,
32 |             arr:[
33 |                 {name:"S",size:"黑色S",has:false},
34 |                 {name:"M",size:"黑色M",has:false},
35 |                 {name:"L",size:"黑色L",has:false}
36 |             ]
37 |         }   
38 |      }
39 |     render() {
40 |         let {arr}=this.state
41 |         return <div className="choose">
42 |             <p>选择颜色：<i onClick={this.dui}>{this.state.color}</i>
43 |                 {this.state.isShow ? <b>√</b>:null}
44 |             </p>
45 |             <p>选择尺码：
46 |                 {
47 |                     arr.map((item,key)=>{
48 |                         return <span key={key} className={item.has?this.state.borderName:null} onClick={()=>{
49 |                             this.setState({color:arr[key].size});
50 |                             arr.forEach((item)=>{
51 |                                 item.has=false
52 |                             })
53 |                             arr[key].has=true
54 |                         }}>{item.name}</span>
55 |                     })
56 |                 }
57 |             </p>
58 |             <p className="num">
59 |                 <span><b onClick={this.ss}>-</b><b>{this.state.num}</b><b onClick={this.add}>+</b></span>
60 |             </p>
61 |         </div>
62 |     }
63 |     dui=()=>{
64 |         let {isShow}=this.state
65 |         this.setState({isShow:!isShow})
66 |     }
67 |     ss=()=>{
68 |         let {num}=this.state
69 |         console.log(num)
70 |         num < 2? this.setState({num:1}) : this.setState({num:--num})
71 |     }
72 |     add=()=>{
73 |         let {num}=this.state
74 |         this.setState({num:++num})
75 |     }
76 | }
77 | export default Shopping 


--------------------------------------------------------------------------------
/src/shopcar/商品详情.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/shopcar/商品详情.png


--------------------------------------------------------------------------------
/src/shopping/checke.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 |  import {Consumer} from "./provider"
 3 | let spanStyle={
 4 |     width:15,
 5 |     height:15,
 6 |     borderRadius:"50%",
 7 |     border:"1px solid #ccc",
 8 |     display:"inline-block"
 9 | }
10 | class Check extends React.Component{
11 |     handleClick=(groupKey,itemKey,isCheck,store)=>{
12 |         let check=!isCheck
13 |         store.changeCheck({groupKey,itemKey,check,store})
14 |     }
15 |     render(){
16 |         let {
17 |             groupKey,
18 |             itemKey,
19 |             isCheck,    //决定是否被选中
20 |         }=this.props
21 |         return <Consumer>
22 |             {
23 |                 store=>{
24 |                     return <span style={{...spanStyle,background:isCheck?"orange":"transparent"}} onClick={()=>this.handleClick(groupKey,itemKey,isCheck,store)}> 
25 | 
26 |                     </span>
27 |                 }
28 |             }
29 |         </Consumer>
30 |         
31 |         
32 |     }
33 | }
34 | export default Check


--------------------------------------------------------------------------------
/src/shopping/computed.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import {Consumer} from "./provider"
 3 | class Computed extends React.Component{
 4 |     changeNum=(type,store,{groupKey,itemKey,num})=>{
 5 |         if(type===true){
 6 |             num++;
 7 |             store.changeNum(groupKey,itemKey,num);
 8 |         }else{
 9 |             if(num<1){
10 |                 num=1
11 |             }
12 |             num--;
13 |             store.changeNum(groupKey,itemKey,num);
14 |         }
15 |     }
16 |     render(){
17 |         let {num,groupKey,itemKey}=this.props
18 |         return <Consumer>
19 |             {
20 |                 store=>{
21 |                     // console.log(changeNum)
22 |                     return <div>
23 |                                 <span onClick={()=>this.changeNum(false,store,{groupKey,itemKey,num})}>-</span>
24 |                                 <span>{num}</span>
25 |                                 <span onClick={()=>this.changeNum(true,store,{groupKey,itemKey,num})}>+</span>
26 |                             </div>
27 |                     
28 |                 }
29 |             }
30 |            
31 |         </Consumer>
32 |         
33 |     }
34 | }
35 | export default Computed


--------------------------------------------------------------------------------
/src/shopping/data.js:
--------------------------------------------------------------------------------
 1 | let datas={
 2 |     allPrice:0,
 3 |     allCheck:false,
 4 |     allnum:0,
 5 |     group:[
 6 |         {
 7 |             groupCheck:false,
 8 |             groupTittle:"洋酒",
 9 |             item:[
10 |                 {
11 |                     itemCheck:false,
12 |                     imgSrc:"",
13 |                     title:"",
14 |                     price:123,
15 |                     num:1
16 |                 },{
17 |                     itemCheck:false,
18 |                     imgSrc:"",
19 |                     title:"",
20 |                     price:123,
21 |                     num:1
22 |                 }, {
23 |                     itemCheck:false,
24 |                     imgSrc:"",
25 |                     title:"",
26 |                     price:123,
27 |                     num:1
28 |                 },{
29 |                     itemCheck:false,
30 |                     imgSrc:"",
31 |                     title:"",
32 |                     price:123,
33 |                     num:1
34 |                 }
35 |             ]
36 |         },{
37 |             groupCheck:false,
38 |             groupTittle:"红酒",
39 |             item:[
40 |                 {
41 |                     itemCheck:false,
42 |                     imgSrc:"",
43 |                     title:"",
44 |                     price:123,
45 |                     num:1
46 |                 },{
47 |                     itemCheck:false,
48 |                     imgSrc:"",
49 |                     title:"",
50 |                     price:123,
51 |                     num:1
52 |                 }
53 |             ]
54 |         }
55 |     ]
56 | }
57 | export default datas


--------------------------------------------------------------------------------
/src/shopping/group.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Check from  "./checke"
 3 | import Item from './item'
 4 | class Group extends React.Component{
 5 |     
 6 |     render(){
 7 |         // console.log(this.props);
 8 |         let {groupTittle,item,groupKey,groupCheck}=this.props
 9 |         return <div>
10 |             <h3>
11 |                 <Check groupKey={groupKey} itemKey={-1} isCheck={groupCheck}/>{groupTittle}  
12 |             </h3>
13 |             <ul>
14 |                 {
15 |                     item && item.map((val,key)=>{
16 |                         return <Item groupKey={groupKey} itemKey={key} key={key} {...val}/>
17 |                     })
18 |                 }
19 |             </ul>
20 |             <p>一共dfd件商品，总共15000元</p>
21 |         </div>
22 |     }
23 | }
24 | export default Group


--------------------------------------------------------------------------------
/src/shopping/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import {Provider} from "./provider"
 3 | import datas from "./data"
 4 | import Total from "./total"
 5 | import Group from "./group"
 6 | // console.log(datas)
 7 | class Shopping extends React.Component{
 8 |     state={
 9 |         datas:datas
10 |     }
11 |     changeNum=(groupKey,itemKey,num)=>{
12 |         let datas=this.state.datas;
13 |         datas.group[groupKey].item[itemKey].num=num
14 |         datas.allnum =this.getAllNum(datas)
15 |         datas.allPrice =this.getAllPrice(datas)  
16 |         console.log(datas.allnum)
17 |         this.setState({datas:datas})
18 | 
19 |     }
20 |     changeCheck=({groupKey,itemKey,check})=>{
21 |         let datas =this.state.datas
22 |         if(groupKey===-1 && itemKey ===-1){
23 |             //全选
24 |             datas.allCheck=check
25 |             datas.group.forEach((item)=>{
26 |                 item.groupCheck=check;
27 |                 item.item.forEach((val)=>{
28 |                     val.itemCheck=check
29 |                 })
30 |             })
31 |         }else if(groupKey>-1 &&itemKey===-1){
32 |             //组选
33 |             datas.group[groupKey].groupCheck=check
34 |             datas.group[groupKey].item.forEach((item)=>{
35 |                 item.itemCheck=check
36 |             })
37 |         }else if(groupKey>-1 &&itemKey>-1){
38 |             //条选
39 |             datas.group[groupKey].item[itemKey].itemCheck=check 
40 |             // 控制组
41 |             datas.group[groupKey].groupCheck = datas.group[groupKey].item.every(item=>item.itemCheck);
42 |             // 控制全选
43 |             datas.allCheck = datas.group.every(item=>item.groupCheck);
44 |         }
45 |         datas.allnum =this.getAllNum(datas)     
46 |         datas.allPrice =this.getAllPrice(datas)     
47 |         this.setState({datas:datas}) 
48 |     }
49 |     getAllNum=(datas)=>{
50 |         let allNum=0;
51 |         datas.group.forEach((item)=>{
52 |             item.item.forEach((val)=>{
53 |                 if(val.itemCheck){
54 |                     allNum+=val.num;
55 |                 }
56 |             })
57 |         })
58 |         return allNum 
59 |     }
60 |     getAllPrice = (datas)=>{
61 |         let allPrice = 0;
62 |         datas.group.forEach(item=>{
63 |           item.item.forEach(val=>{
64 |             if(val.itemCheck){
65 |               allPrice += val.num * val.price;
66 |             }
67 |           })
68 |         });
69 |         return allPrice;
70 |       }
71 |     render(){
72 |         let {datas}=this.state
73 |         let obj={
74 |             datas,
75 |             changeNum:this.changeNum,
76 |             changeCheck:this.changeCheck
77 |         }
78 |         return <Provider value={obj}>
79 |             {
80 |                 datas.group && datas.group.map((item,key)=>{
81 |                     return <Group key={key} groupKey={key} itemKey={-1} {...item}/>
82 |                 })
83 |             }
84 |             <Total />
85 |         </Provider>
86 |     }
87 | }
88 | export default Shopping 


--------------------------------------------------------------------------------
/src/shopping/item.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Check from "./checke"
 3 | import Copmputed from "./computed"
 4 | 
 5 | class Item extends React.Component{
 6 |     render(){
 7 |         let {
 8 |             groupKey,
 9 |             itemKey,
10 |             itemCheck,
11 |             imgSrc,
12 |             title,
13 |             price,
14 |             num
15 |         } = this.props
16 |         return <li>
17 |             <Check groupKey={groupKey} itemKey={itemKey} isCheck={itemCheck}/>
18 |             <img src={imgSrc} alt=""/>
19 |             <p>{title}</p>
20 |             <p>{price}</p>
21 |             {/* computed商品数量加或减 */}
22 |             <Copmputed groupKey={groupKey} itemKey={itemKey} num={num} />
23 |         </li>
24 |     }
25 | }
26 | export default Item


--------------------------------------------------------------------------------
/src/shopping/provider.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | const {Provider , Consumer} = React.createContext();
3 | // console.log(Provider,Consumer)
4 | export {Provider,Consumer}


--------------------------------------------------------------------------------
/src/shopping/total.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Check from "./checke"
 3 | import {Consumer} from "./provider"
 4 | class Total extends React.Component{
 5 |     render(){
 6 |         return <Consumer>
 7 |             {
 8 |                 store=>{
 9 |                     let {allPrice,allCheck,allnum}=store.datas;
10 |                     return <div>
11 |                         <Check groupKey={-1} itemKey={-1} isCheck={allCheck}/>全选
12 |                         <p>一共{allnum}件商品</p>
13 |                         <p>需要支付：{allPrice}</p>
14 |                         <button>结算</button>
15 |                     </div>
16 |                 }
17 |             }
18 |         </Consumer>
19 |     }
20 | 
21 | }
22 | export default Total


--------------------------------------------------------------------------------
/src/store/index.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { createStore, combineReducers } from "redux";
 3 | import list from "./reducer/list"
 4 | import datalist from "./reducer/pay"
 5 | import movielist from "./reducer/cinema"
 6 | 
 7 | let reducer=combineReducers({
 8 |     list,
 9 |     datalist,
10 |     movielist,
11 | })
12 | const store=createStore(reducer)
13 | window.store=store 
14 | export default store


--------------------------------------------------------------------------------
/src/store/reducer/cinema.js:
--------------------------------------------------------------------------------
  1 | let data={
  2 |     alldata:[
  3 |         {
  4 |             id:1,
  5 |             src:"./img/mp1.jpg",
  6 |             name:"反贪风暴3",
  7 |             introduction:"剧情，动作，犯罪",
  8 |             actor:"主演：古天乐，张智霖，郑嘉颖",
  9 |             address:"今天197家电影院放映2473场",
 10 |             mark:"8.9",
 11 |             buy:"购票",
 12 |             tail:{
 13 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 14 |             }
 15 |         },{
 16 |             id:2,
 17 |             src:"./img/mp2.jpg",
 18 |             name:"碟中谍6：全面瓦解",
 19 |             introduction:"动作，冒险，惊悚",
 20 |             actor:"主演：汤姆·克鲁斯，亨利·卡威尔",
 21 |             address:"今天194家电影院放映1974场",
 22 |             mark:"8.9",
 23 |             buy:"预售",
 24 |             tail:{
 25 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 26 |             }
 27 |         },{
 28 |             id:3,
 29 |             src:"./img/mp3.jpg",
 30 |             name:"镰仓物语",
 31 |             introduction:"剧情奇幻",
 32 |             actor:"主演：古天乐，张智霖，郑嘉颖",
 33 |             address:"今天197家电影院放映2473场",
 34 |             mark:"8.9",
 35 |             buy:"购票",
 36 |             tail:{
 37 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 38 |             }
 39 |         },{
 40 |             id:4,
 41 |             src:"./img/mp4.jpg",
 42 |             name:"黄金兄弟",
 43 |             introduction:"剧情，动作，犯罪",
 44 |             actor:"主演：古天乐，张智霖，郑嘉颖",
 45 |             address:"今天197家电影院放映2473场",
 46 |             mark:"8.9",
 47 |             buy:"预售",
 48 |             tail:{
 49 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 50 |             }
 51 |         },{
 52 |             id:5,
 53 |             src:"./img/mp1.jpg",
 54 |             name:"里茶的姑妈",
 55 |             introduction:"剧情，动作，犯罪",
 56 |             actor:"主演：古天乐，张智霖，郑嘉颖",
 57 |             address:"今天197家电影院放映2473场",
 58 |             mark:"8.9",
 59 |             buy:"预售",
 60 |             tail:{
 61 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 62 |             }
 63 |         },{
 64 |             id:6,
 65 |             src:"./img/mp2.jpg",
 66 |             name:"反贪风暴2",
 67 |             introduction:"剧情，动作，犯罪",
 68 |             actor:"主演：古天乐，张智霖，郑嘉颖",
 69 |             address:"今天197家电影院放映2473场",
 70 |             mark:"8.9",
 71 |             buy:"购票",
 72 |             tail:{
 73 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 74 |             }
 75 |         },{
 76 |             id:7,
 77 |             src:"./img/mp3.jpg",
 78 |             name:"反贪风暴",
 79 |             introduction:"剧情，动作，犯罪",
 80 |             actor:"主演：古天乐，张智霖，郑嘉颖",
 81 |             address:"今天197家电影院放映2473场",
 82 |             mark:"8.9",
 83 |             buy:"购票",
 84 |             tail:{
 85 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 86 |             }
 87 |         },{
 88 |             id:8,
 89 |             src:"./img/mp4.jpg",
 90 |             name:"黄金兄弟2",
 91 |             introduction:"剧情，动作，犯罪",
 92 |             actor:"主演：古天乐，张智霖，郑嘉颖",
 93 |             address:"今天197家电影院放映2473场",
 94 |             mark:"8.9",
 95 |             buy:"购票",
 96 |             tail:{
 97 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
 98 |             }
 99 |         },{
100 |             id:9,
101 |             src:"./img/mp1.jpg",
102 |             name:"黄金瞳",
103 |             introduction:"剧情，动作，犯罪",
104 |             actor:"主演：古天乐，张智霖，郑嘉颖",
105 |             address:"今天197家电影院放映2473场",
106 |             mark:"8.9",
107 |             buy:"购票",
108 |             tail:{
109 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
110 |             }
111 |         },{
112 |             id:10,
113 |             src:"./img/mp2.jpg",
114 |             name:"成龙历险记",
115 |             introduction:"剧情，动作，犯罪",
116 |             actor:"主演：古天乐，张智霖，郑嘉颖",
117 |             address:"今天197家电影院放映2473场",
118 |             mark:"8.9",
119 |             buy:"购票",
120 |             tail:{
121 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
122 |             }
123 |         },{
124 |             id:11,
125 |             src:"./img/mp3.jpg",
126 |             name:"成龙历险记2",
127 |             introduction:"剧情，动作，犯罪",
128 |             actor:"主演：古天乐，张智霖，郑嘉颖",
129 |             address:"今天197家电影院放映2473场",
130 |             mark:"8.9",
131 |             buy:"购票",
132 |             tail:{
133 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
134 |             }
135 |         },{
136 |             id:12,
137 |             src:"./img/mp4.jpg",
138 |             name:"澳洲风云3",
139 |             introduction:"剧情，动作，犯罪",
140 |             actor:"主演：古天乐，张智霖，郑嘉颖",
141 |             address:"今天197家电影院放映2473场",
142 |             mark:"8.9",
143 |             buy:"购票",
144 |             tail:{
145 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
146 |             }
147 |         },{
148 |             id:13,
149 |             src:"./img/mp1.jpg",
150 |             name:"澳洲风云2",
151 |             introduction:"剧情，动作，犯罪",
152 |             actor:"主演：古天乐，张智霖，郑嘉颖",
153 |             address:"今天197家电影院放映2473场",
154 |             mark:"8.9",
155 |             buy:"购票",
156 |             tail:{
157 |                 con:"ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)ICAC(廉政公署) 陆志谦 (古天乐 饰)，JFIU(联合财富情报组) 刘宝强 (张智霖 饰) 分别侦查贪污及洗黑钱案，但苦无线索，这时廉政公署L组(内部记录)"
158 |             }
159 |         }
160 |     ],
161 |     blurlist:[]
162 | }
163 | let movielist=(state=data,action)=>{
164 |     switch(action.type){
165 |         case "PUSH":{
166 |             state.blurlist.push(action.obj)
167 |             return state
168 |         }
169 |         case "CHANGE":{
170 |             state.blurlist=[];
171 |             return state;
172 |         }
173 |         case "CHANGES":{
174 |             console.log(1)
175 |             state.blurlist=[];
176 |             return state;
177 |         }
178 |         default:
179 |             return state
180 |     }
181 | }
182 | export default movielist


--------------------------------------------------------------------------------
/src/store/reducer/list.jsx:
--------------------------------------------------------------------------------
 1 | let data=[
 2 |     {
 3 |         title:"sdfadfa",
 4 |         num:2
 5 |     },{
 6 |         title:"sdfadfa",
 7 |         num:2
 8 |     },{
 9 |         title:"sdfadfa",
10 |         num:2
11 |     },{
12 |         title:"sdfadfa",
13 |         num:2
14 |     },
15 | ]
16 | let datalist=(state=data,action)=>{
17 |     switch(action.type){
18 |         case "A":
19 |             return {...state,...action};
20 |         default:
21 |             return {...state}
22 |     }
23 | }
24 | export default datalist


--------------------------------------------------------------------------------
/src/store/reducer/pay.js:
--------------------------------------------------------------------------------
  1 | let date={
  2 |     myApp:{
  3 |         title:"我的应用",
  4 |         examples:[
  5 |             {
  6 |                 code:1,
  7 |                 title:"机动车检验预约"
  8 |             },{
  9 |                 code:1,
 10 |                 title:"备案非本人机动车"
 11 |             },{
 12 |                 code:1,
 13 |                 title:"申领免检标志"
 14 |             },{
 15 |                 code:1,
 16 |                 title:"遗失补领驾驶证"
 17 |             },{
 18 |                 code:1,
 19 |                 title:"期满换领驾驶证 "
 20 |             },{
 21 |                 code:1,
 22 |                 title:"补换领行驶证"
 23 |             },{
 24 |                 code:1,
 25 |                 title:"补换领机动车号牌  "
 26 |             },{
 27 |                 title:"更多"
 28 |             }
 29 |         ]
 30 |     },
 31 |     carApp:{
 32 |         title:"机动车业务",
 33 |         examples:[
 34 |             {
 35 |                 code:0,
 36 |                 icon:"",
 37 |                 title:"新车选号"
 38 |             },{
 39 |                 code:0,
 40 |                 icon:"",
 41 |                 title:"在用车选号"
 42 |             },{
 43 |                 code:0,
 44 |                 icon:"",
 45 |                 title:"新能源车换牌选号"
 46 |             },{
 47 |                 code:0,
 48 |                 icon:"",
 49 |                 title:"号牌号段公布"
 50 |             },{
 51 |                 code:1,
 52 |                 icon:"",
 53 |                 title:"备案非本人机动车"
 54 |             },{
 55 |                 code:1,
 56 |                 icon:"",
 57 |                 title:"机动车检验预约"
 58 |             },{
 59 |                 code:0,
 60 |                 icon:"",
 61 |                 title:"新能源车换牌预约"
 62 |             },{
 63 |                 code:0,
 64 |                 icon:"",
 65 |                 title:"补换领机动车牌号"
 66 |             },{
 67 |                 code:1,
 68 |                 icon:"",
 69 |                 title:"补换领行驶证"
 70 |             },{
 71 |                 code:0,
 72 |                 icon:"",
 73 |                 title:"补领检验合格标志"
 74 |             },{
 75 |                 code:0,
 76 |                 icon:"",
 77 |                 title:"变更机动车联系方式"
 78 |             },{
 79 |                 code:0,
 80 |                 icon:"",
 81 |                 title:"机动车挂靠申请"
 82 |             },{
 83 |                 code:1,
 84 |                 icon:"",
 85 |                 title:"申领免检标志"
 86 |             },{
 87 |                 code:0,
 88 |                 icon:"",
 89 |                 title:"机动车转籍申请"
 90 |             },{
 91 |                 code:1,
 92 |                 icon:"",
 93 |                 title:"补换领机动车号牌"
 94 |             }
 95 |         ]
 96 |     },
 97 |     cardApp:{
 98 |         title:"驾驶证业务",
 99 |         examples:[
100 |             {
101 |                 code:0,
102 |                 icon:"",
103 |                 title:"考试预约"
104 |             },{
105 |                 code:0,
106 |                 icon:"",
107 |                 title:"取消考试预约"
108 |             },{
109 |                 code:0,
110 |                 icon:"",
111 |                 title:"考试信息公布"
112 |             },{
113 |                 code:0,
114 |                 icon:"",
115 |                 title:"考试费缴纳"
116 |             },{
117 |                 code:0,
118 |                 icon:"",
119 |                 title:"初学增驾工本费缴纳"
120 |             },{
121 |                 code:0,
122 |                 icon:"",
123 |                 title:"电子学习驾驶证明"
124 |             },{
125 |                 code:1,
126 |                 icon:"",
127 |                 title:"期满换领驾驶证"
128 |             },{
129 |                 code:1,
130 |                 icon:"",
131 |                 title:"遗失补领驾驶证"
132 |             },{
133 |                 code:0,
134 |                 icon:"",
135 |                 title:"超龄换领驾驶证"
136 |             },{
137 |                 code:0,
138 |                 icon:"",
139 |                 title:"损毁换领驾驶证"
140 |             },{
141 |                 icon:"",
142 |                 title:"延期换领驾驶证"
143 |             },{
144 |                 code:0,
145 |                 icon:"",
146 |                 title:"延期驾驶证审验"
147 |             },{
148 |                 code:0,
149 |                 icon:"",
150 |                 title:"提交驾驶证件照片"
151 |             },{
152 |                 code:0,
153 |                 icon:"",
154 |                 title:"变更驾驶证联系方式"
155 |             },{
156 |                 code:0,
157 |                 icon:"",
158 |                 title:"驾驶证挂靠申请"
159 |             },{
160 |                 code:0,
161 |                 icon:"",
162 |                 title:"延期提交身体证明"
163 |             }
164 |         ]
165 |     }
166 | }
167 | let datalist=(state=date,action)=>{
168 |     switch(action.type){
169 |         case "PUSH":{
170 |             state.myApp.examples.splice(state.myApp.examples.length-2,0,action.obj)
171 |             return state;
172 |         }
173 |         case "POP": {
174 |             state.myApp.examples.forEach((item,index)=>{
175 |                 if(item.title===action.obj.title){
176 |                    return state.myApp.examples.splice(index,1)
177 |                 }
178 |             })
179 |         }
180 |         default:
181 |             return state
182 |     }
183 | }
184 | export default datalist


--------------------------------------------------------------------------------
/src/studentMsg/index.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneenana/react-demo/ab97eeef68d03626f4ef9b11adbca46b486588a0/src/studentMsg/index.jsx


--------------------------------------------------------------------------------