I'm starting journey with React and have a very important question for me : as I'm not familiar with Webpack can I add it later - after I finish my project? Won't it cause any problems in file structure and so on ?
You could add webpack once your project is complete, but this isn't really good practice.
Webpack allows you to work in ways which would not be possible without such a tool. Webpack does lots of things, but most of the things which it does are useful when you're developing code, not once you're done developing. If you were to do add webpack once you've finished your project, you would have set up your code in a way which doesn't take advantage of webpack.
For React, webpack makes it easy to split your components into multiple files, and it allows you to transform files containing jsx.
Webpack can be a pain to configure, but there are options to make your life easier, like create-react-app. Alternatively, parcel has a lot of the functionality of webpack, without the config.
Related
I created an application using create react app, then I did the npm run eject command and I get a list of all dependencies. Yes, I do not have webpack config files, which will be if I create my own webpack. I see only one advantage that create react app adds extra dependencies that are not needed. All other settings, as I understand it, I can add the cra application to my own webpack. Can you please tell me why it is so important to create your own webpack? I just don't see much difference between builds. I have read a lot of articles and have not found objectively strong advantages can you tell me
I'm writing a library that exposes some React Components as part of its API.
I'm going to make a few assumptions here :
1 - It is going to be used inside react projects.
2 - Those projects will bundle their dependencies at some point.
3 - Those react projects can use JSX as a way of describing the UI.
4 - Their bundler of choice, Webpack if it's a create-react-app, will use babel in order to parse and transpile that JSX into vanilla JS.
Following that logic, I should be able export some JSX from an external package, because the package's code will be bundled, transpiled alongside the app.
However, when I do so in a create-react-app project, I get the following error :
SyntaxError: /Users/someone/Desktop/someproject/dist/esm/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (35:13):
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
Yes, I could transpile the JSX, maybe I will. I just don't see any reason to, if it's going to be bundled anyway. I prefer leaving transpiling tweaking and optimisation to the user.
My concern is that if I transpile it myself, I have 2 choices.
import React in scope, and using babel to turn <MyComponent/> into React.createElement(), but this will rule out the possibility to use the new JSX transform
use the new JSX transform myself, and figure out whether or not my code will be compatible with react versions prior to 17. And increase my own bundle size because there is a lot of code added by babel to make that work.
At this point, I think I'm quite excited about this issue because frankly I have no idea why I can't just export plain JSX from my package. I know I'm probably missing something obvious, like a semi-colon or whatever, but I really want to understand.
If you want some code / rollup - babel configs feel free to ask.
Tanks !
Your logic seems to make sense at first glance. But let's examine why this is a bad idea.
JSX is a special syntax that must be transpiled down to the lowest common demoninator to be understood in the browser, or by Nodejs. This is what bundlers do, and as you mentioned, anyone working with react in a node environment is almost certainly using a bundler to do this.
However, there are any number of wierd syntaxes that people may use in their code. When a bundler imports code from a node_module, if the code in those modules is not already transpiled, the bundler would need to transpile them as well. Considering un-transpiled modules may be in any number of strange syntaxes, each module would need its own transpilation instructions (think babel configuration). Having unique transpilation configurations for every node_module would be very unwieldy, not to mention having to transpile each node_module, potentially in a different way, would be bad for performance.
The generally accepted best practice for solve this problem is to simply build your package using a bunder which boils the code down to the lowest common denominator. This enables your package-user's bundler to just bring in the code in a node_module "as is".
While its probably possible to come up with some crazy babe/webpack/rollup instructions to custom-interperet your module as JSX, do you really want your library users to have to do that? Especially in the case of people using create-react-app, customizing the babel config of CRA is not natively supported, which means they will need to take extra-steps to get your library to work. Additionally, webpack defaults to excluding node_modules from js transpilations for obvious performance reasons, and CRA follows this convention. When publishing libraries, you want them to be universally useable as easy as possible to consume.
Transpiling, tweaking, and optimizing code is best left to the person who wrote it, which in the case of a react component library you're trying to publish, is you.
I'm thinking about an app that uses electron, react and webpack. But I'm not sure if it make sense to use webpack on electron. I'm definitely sure that using webpack to the react part of an app could benefit a lot but I would like to know if it is the same thing with the electron part of an app.
Why do you need webpack for some cases even in node.js? Because CJS module resolution can cost a lot depends on your code:
https://twitter.com/samccone/status/1010584941355077632
Friendly reminder that Node startup time due to module runtime parse and compile is non-trivial. Illustrated below is the hello-world webpack common chunks example, As we can see the actual work takes < 1/4th of the time, the rest is lost to the javascript parse ghoul
This applies to Electron because it shares the exact same module resolution.
https://twitter.com/_ojkwon/status/933046538762207232
CJS without bundling
with webpack bundled
Still, it means development / deployment pipeline will change entirely, and this is not the guaranteed path of improving cost of module loading. You have to analyze your dependencies, and decide proper path for best performance.
Webpack is separate from electron. Webpack is used to bundle js files if you want to bundle your code together. There is a similar question that goes into additional detail here.
Say the webpack config is as follows
{
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
Now the build from webpack is
and the build from react-scripts build ( static contains css, js and media in seperate folders )
Question: Is there any specific advantage of webpack over react-scripts build? ( including but not limited to performance )
NOTE: package.json is edited to achieve this.
Webpack is a general purpose bundler, with applications beyond React. Before create-react-app, the web was full of examples of setting up a brand new React project which uses webpack as the bundler. It is extremely flexible and can handle things including and beyond what a React application would need. It works for Angular, Vue, NodeJS and even Web Assembly.
But it used to take a while to setup. You will need to understand its working and configure it so that you can transpile your React+ES6 code into plan-vanilla JS. You would need to decide the output structure you like and configure webpack for it. And then also add hot-module-reloading and code-splitting support yourself. During this, you will also need to add other plugins required by Webpack to support all the above :).
This naturally caused some fatigue with folks who were starting with React.
So facebook created cra which internally uses webpack, pre-configured to include all the nice tools to take care of these basics and help you focus on the React part of your code. It hides webpack from you as much as possible, otherwise the build process may break if the configuration is changed by the user.
With that aside, the structural conventions which cra uses should not be having any performance impact over a bare-bones webpack setup. It's just a convention.
Your question should then be, when would I use create-react-app and when would I use Webpack?
As a beginner you might want to stick to cra as you focus on your react app. Eventually there would come a time where what you want to do is not supported by the webpack configuration cra is managing under the hood. A very common example is if you want to write a component library to reuse in other apps. This cannot be done by cra (it's about the whole app :)). You can then switch over to webpack and start learning it.
react-scripts hides all of the webpack configs behind the scenes. The advantage of this is it makes it cleaner and since create-react-app is regularly updated, its easy to stay up to date with React, Webpack, and Babel. The community automatically fixes the issues for you.
In terms of performance, should be the same regardless with react-scripts or with webpack.
Advantages of running only webpack:
Full control of your environment
Can do custom things like server-side rendering easily (still possible with create-react-app
Knowledge of webpack as a skill
Disadvantages of webpack only
Full in charge updating and maintenance of webpack (some webpack versions are not backward compatible or future compatible)
Can be intimidating and can be a headache if you are trying to learn to react quickly.
If you want to customize create-react-app, here is some info
https://auth0.com/blog/how-to-configure-create-react-app/
Here is server-side rendering with create-react-app
https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff
TLDR: Use create-react-app / react-scripts if you want to go to 0-100 as quick as possible for whatever reason
Use just webpack if you enjoy messing around under the hood
I'm quite confused about what learn does. Is it something like Webpack's code splitting? Should I have one Webpack configuration for each learn module or shouln't I use them together?
I'm trying to create modular react app. Any other resource would be great too!
Thank you.
lerna - A tool for managing JavaScript projects with multiple packages. To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories (sometimes called monorepos)
see https://github.com/lerna/lerna
webpack - Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand.
There are diferrent. And what dose create modular react app mean? modular develop (es6/commonjs/amd) or dynamic modular loading?