Welcome to step by step hands-on guide to setup webpack in your upcoming typescript project. Please follow the steps and you should be able to create your own webpack project. Please download the source code from github.
You will learn below things:
webpack.config.js file and modify webpack.config.js based on our need.
Thanks to React hooks you have now happily turned all your classes into functional components.
Wait, all your components? Not quite. There is one thing that can still only be implemented using classes: Error boundaries.
There is just no functional equivalent for componentDidCatch and deriveStateFromError yet.
| import React from "react" | |
| import Time from "react-time" | |
| import { OverlayTrigger, Popover } from "react-bootstrap" | |
| import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Surface, Symbols, XAxis, YAxis } from "recharts" | |
| import "./style/StudentEngagement.less" | |
| import { i18n } from "../services/Messages/Messages" | |
| class StudentEngagementLineChart extends React.Component { |
| # If you worked with React and JSX you probably noticed that you can't use JS comments when inside JSX sections | |
| # Add this to your Atom init script | |
| # Then add 'ctrl-cmd-/': 'comment-jsx' to your keymap.cson | |
| # Then when you are on a JS/JSX file, just press cmd+ctrl+/ to use JSX-style comments that work with JSX elements | |
| # Is not the most efficient way, but it's the cleanest and reliable one | |
| atom.commands.add 'atom-workspace', 'comment-jsx', -> | |
| atom.config.set('editor.commentStart', '{/*', {scopeSelector: '.source.js.jsx'}) | |
| atom.config.set('editor.commentEnd', '*/}', {scopeSelector: '.source.js.jsx'}) | |
| for selection in atom.workspace.getActiveTextEditor().selections |
| // Implementation in ES6 | |
| function pagination(c, m) { | |
| var current = c, | |
| last = m, | |
| delta = 2, | |
| left = current - delta, | |
| right = current + delta + 1, | |
| range = [], | |
| rangeWithDots = [], | |
| l; |