I am currently learning react and I have an app using webpack, babel and react. It seems react has two ways of writing it using either required or import. It also seems there is a lot more documentation on using import. How can I change my stack to use the import version?
The import and export statements are an ES6 standard. Right now, your setup is likely using Babel to transpile this into ES5. You can use one or the other, but import/export will soon become the standard, so adopting it is advised.
import is ES6 (or ES2015) standard. To use it, you need to install and activate the preset in babel.
Follow these steps:
Go to your project folder then type this: npm install --save-dev babel-cli babel-preset-env
Create a file named .babelrc (in case you have not created one) and insert this lines:
{
'presets': ['env', 'react']
}
I assume you have setup the webpack to work with babel.
Related
I need to perform tree-shaking to reduce bundle sizes where lodash and some other libraries are being used.
I've converted all lodash imports like this:
import {isEmpty} from "lodash";
But still bundle size is not getting reduced.
To use plugins like 'lodash-webpack-plugin', we need to configure in webpack.config.js, which is not possible in a create-react-app project. I tried using react-app-rewired but getting issues like:
screenshot of error
Following versions are being used in the project:
react-scripts: 3.4.1
webpack: 4.42.0
react: 16.13.1
lodash: 4.17.15
Webpack can perform tree shaking automatically when ES6 modules(import/export syntax) are used.
Looks like lodash is built to use Common-JS modules.
So you can use single export and cherry-pick methods to reduce size of bundle:
import isEmpty from "lodash/isEmpty";
With this import, only isEmpty function will be included in your bundle.
Alternatively, you can try to use lodash-es written in ES6
Some tutorials use --save mode while some use --save-dev mode.
Both of them use Babel, saying that it is used to convert React into plain Javascript that browsers understand. That means the final bundle will have Javascript. In that case why do we need to install react and react-dom in --save mode? --save-dev mode should suffice right?
Also, statements like import React from 'react', do they go into prod build bundle files? If not, how are statements like React.createClass work without React being available in that corresponding scope/memory-space?
--save mode is for packages that your app will use when it's running, like React. --save-dev are for packages that help you develop like linters, module bundlers, transpilers (eg Babel).
This separation is almost entirely for your benefit -- putting everything into your main dependencies with --save won't break anything, but it's considered bad organization.
By the way, NPM 5 and above will automatically save packages, so the --save flag isn't necessary anymore. (You still need to use --save-dev to mark packages as a "development dependency").
Also, statements like import React from 'react', do they go into prod build bundle files? If not, how are statements like React.createClass work without React being available in that corresponding scope/memory-space?
Yes, that import React from 'react' ends up in the bundle, but using a regular JavaScript function instead of an import statement. You can open up the bundle file in your text editor to see what your code has been transformed into.
Does Create-React-App (or Webpack used by Create-React-App) at any stage (development, staging or production) optimise your node_modules? That is, if I had an import like this:
import _ from 'lodash'
and only use the map function in my project. Would my build bundle for production have all of lodash or would it strip out all other functions and keep the ones that are being referenced in my code?
CRA use UglifyJsPlugin in the webpack.config.prod.js which supports dead code removal.
But you should only import what you need for this to work: https://webpack.js.org/guides/tree-shaking/
For anyone who stumbled here in 2021, create-react-app also do tree-shaking when you use import * as _ from 'lodash
I am learning React and I have already created a few apps with CRA.
I haven't found a good and easy way to include sass on my react projects so I came up with this:
install node-sass on the src folder
add this to the package.json:
"node:sass": "node-sass src/index.scss src/index.css -w"
then on each component, I would add a sass partial file, so I could keep the style and the js file in the same folder.
is there any problems with doing that?
I've read some tutorials to config webpack to use sass but it sounded to complicated.
Including partials per component is just fine and actually encouraged as a standard. Then you include it in the webpack with the ExtractTextPlugin, which allows you to bundle all your sass files into a single css file that you import in index.html. You can see an example here: https://github.com/ianshowell/react-serverless-kickstart/blob/master/webpack.common.js#L46
For this to work, you also need to include the sass-loader which will let your Js files parse your Sass class names. Feel free to use my starter pack that the above code is linked in to help you figure it all out.
Edit: Also, take a look at this example component to see how importing styles works: https://github.com/ianshowell/react-serverless-kickstart/tree/master/src/components/TodoItem
If you want to use sass in your react app, install chokidar
It will help you:
https://www.npmjs.com/package/react-scripts-sass-chokidar
Create react app v2, support SASS out of the box (https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
Here a link to read the documentation: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
All you need is to install node-sass if not already
npm i node-sass --save-dev
And then make sure you import files with scss extension.
If you need to change old css files, change the extension, and so follow with the imports.
I have a React App using Create-React-App. I've used the Map() datastructure included in ES6 in my app. However, in IE11 it does not work. Shouldn't Babel (under the hood of Create-React-App - I did not eject) take care of this?
If not, is there there any solution for that?
As others already mentioned, you are going to need a polyfill to add the functionality when it's not natively supported by the browser in question. Since you're already using Babel, the easiest way to do this is by using a Babel polyfill.
If you don't want to add another dependency, you can use the Map polyfill found here.
No.
Use babel-polyfill for cross-browser babel support:
npm install --save babel-polyfill
If you're using webpack/browserify then here's how you should incorporate the polyfill:
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
If you're still unclear, read the documentation here.