Posts

Showing posts with the label Ecmascript 6

Can You Use Es6 Import Alias Syntax For React Components?

Answer : Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try: import {default as StyledButton} from "component-library"; The other possibility is your library is using commonjs exports i.e. module.exports = foo . In this case you can import like this: import * as componentLibrary from "component-library"; Update Since this is a popular answer, here a few more tidbits: export default Button -> import Button from './button' const Button = require('./button').default export const Button -> import { Button } from './button' const { Button } = require('./button') export { Button } ...

Best Way To Polyfill ES6 Features In React App That Uses Create-react-app

Answer : Update : The create-react-app polyfill approach and docs have changed since this question/answer. You should now include react-app-polyfill (here) if you want to support older browsers like ie11. However, this only includes the " ...minimum requirements and commonly used language features ", so you'll still want to use one of the approaches below for less common ES6/7 features (like Array.includes ) These two approaches both work: 1. Manual imports from react-app-polyfill and core-js Install react-app-polyfill and core-js (3.0+): npm install react-app-polyfill core-js or yarn add react-app-polyfill core-js Create a file called (something like) polyfills.js and import it into your root index.js file. Then import the basic react-app polyfills, plus any specific required features, like so: /* polyfills.js */ import 'react-app-polyfill/ie11'; import 'core-js/features/array/find'; import 'core-js/features/array/includes'; ...