Maison > Article > interface Web > Comment créer un environnement de compartiment de la famille React
Cette fois, je vais vous montrer comment créer un environnement de bucket familial React et quelles sont les précautions pour construire un environnement de bucket familial React. Voici des cas pratiques, jetons un coup d'œil.
Configuration de l'environnement
1. Créer un environnement de développement webpack+react à partir de zéro
2.
Installer les dépendancesnpm i -S @types/react @types/react-dom npm i -D typescript awesome-typescript-loader source-map-loaderNouveau tsconfig.json
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "include": [ "./src/**/*" ] }Modifier webpack.config.js
// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: { index:'./src/index.js', }, output: { filename: 'bundle.js', path: path.resolve(dirname, 'dist') }, devtool: "source-map", // Add '.ts' and '.tsx' as resolvable extensions. resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] }, { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, ] }, plugins: [ new HtmlWebpackPlugin({ title: 'production', template: './index.html' }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: './dist', hot: true }, };3. Introduire moins et prendre en charge l'importation moins. modulesInstaller les dépendances
npm i -D less less-loader npm i -D typings-for-css-modules-loaderastuces : typings-for-css-modules-loaderModulariser le style
//demo.less -> demo.less.d.ts //.demo{color:red;} -> export const demo: string; import * as styles from 'demo.less' <DemoComponent className={styles.demo} />Modifier webpack.config.js
// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: { index:'./src/index.js', }, output: { filename: 'bundle.js', path: path.resolve(dirname, 'dist') }, devtool: "source-map", //add .less resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.less', '.css'] }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //import less modules,name:demodemo_hash { test: /\.less/, use: [ 'style-loader', 'typings-for-css-modules-loader?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]&namedExport&camelCase&less!less-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] }, { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, ] }, plugins: [ new HtmlWebpackPlugin({ title: 'production', template: './index.html' }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ], devServer: { contentBase: './dist', hot: true }, };4. Présentez React-routerv4
npm i -S react-router-domCréer un historique
import { createHashHistory } from 'history'; export default createHashHistory();Utilisez la syntaxe
import React from 'react'; import ReactDom from 'react-dom'; import * as styles from "./index.less"; import history from './helpers/history'; import {Router, Route, Switch, Redirect, Link} from 'react-router-dom'; import Hello from "./router/Hello"; import TodoList from "./router/TodoList"; const PrivateRoute = ({ component: Component , ...rest}) => { return ( <Route {...rest} render={props => ( <Component {...props}/> )}/> ); } ReactDom.render( <Router history={history} > <p className={styles.wrap}> <ul> <li><Link to="/">Homes</Link></li> <li><Link to="/todo">TodoList</Link></li> </ul> <Switch> <Route exact path="/" component={Hello}/> {/*<Route path="/demo" component={Demo}/>*/} <PrivateRoute path="/todo" component={TodoList} /> </Switch> </p> </Router>, document.getElementById('root') );...ES7 pour signaler une erreur
npm i -S babel-preset-stage-2modifiez .babelrc
{ "presets": ["es2015", "react", "stage-2"], }5. Introduisez la gestion de l'état mobx
npm i -S mobx mobx-reactUtiliser la syntaxe du décorateurModifier tsconfig.json
"compilerOptions": { "target":"es2017", //fix mobx.d.ts error "experimentalDecorators": true, "allowJs": true }
npm i -D babel-plugin-transform-decorators-legacyModifier .babelrc
{ "presets": ["es2015", "react", "stage-2"], "plugins": ["transform-decorators-legacy"] }Je crois que vous maîtrisez la méthode après En lisant le cas dans cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :
Comment utiliser JS pour implémenter le tri des tableaux d'objets JSON par propriétés d'objet
Comment utiliser Vue Cryptage .js 3DES
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!