CSS Loader & Style LoaderĬss-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string. PostCSS plugins can lint your CSS, support variables and mixins syntax, transpile future CSS syntax, and many more things depending on its configs. PostCSS is a JavaScript plugin to transform your CSS. The dependencies for Jest allow you to write test scripts for your application without having to install another testing library. Jest is a testing library by Facebook that plays very well with React. It also plays well with a modern code editor like VSCode. The library will warn you from the console if you have any errors. ESLintĮSLint is a JavaScript linter that will scan your code and flag any code errors. The most advanced browsers like Chrome and Safari may support new JavaScript versions, but JSX is a React-only feature that’s not a part of ES versions.īabel transforms your modern JavaScript code into the older version, and then adds polyfills, a piece of code that implements features missing in the browser but needed by your app. Since the release of ES 2015, browsers have seen slow but steady progress to implement new JavaScript APIs and features.
The main purpose of Babel is to make your code readable by older browsers. Please note that this article was written using Create React App version 4.0.1 as the reference. That's a lot of packages! Let's break it down a little to understand what these packages are used for. When you look into the package.json file of react-scripts, you'll see all the packages needed to make React works in the browser. It's just that the configurations are hidden from you inside the react-scripts package inside node_modules.
We need transpilers and bundlers to create, run and understand React builds on browser.Īlthough you can’t see Babel or Webpack listed as dependencies in the generated package.json file, CRA still uses Babel and Webpack under the hood. To run your React application, you need to turn your JSX into plain JavaScript, that browser can understand. The script generates the required files and folders to start the React application and run it on the browser. The dependencies that create-react-app usesĬreate React App (CRA) is a tool to create single-page React applications that is officially supported by the React team. It lets you focus more on coding part without having to bother much about configurations. The benefit of Create React App is that the inner workings are hidden away. It sets up an assortment of basic web app elements commands to test, build, and serve your app a git repo and plenty of guide rails and documentation for how to get started with React. Create-react-app(CRA) is like a pandora’s box for beginners.
0 kommentar(er)
