{
"$type": "site.standard.document",
"content": {
"$type": "site.standard.content.markdown",
"text": "import FYIBlock from \"../../components/FYIBlock.astro\";\n\n## What is 'Create React App'?\n\nSo, what is it? 'Create React App' is a tool to create single-page React applications, and generates a project holding a skeleton structure of files and folders. According to the official [documentation](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) this setup allows the use of _\"the latest JavaScript features, provides a nice developer experience, and optimizes your app for production\"_.\n\n## Setting up a project\n\nNow we know _what_ it is, let's start using it.\n\n<aside-block type=\"prerequisites\" heading=\"Prerequisites\" text=\"\n You will need to have the following versions of Node & npm installed; Node >= 14.0.0, npm >= 5.6. You can check what versions you have of each by using `node -v` and `npm -v`.\"></aside-block>\n\n### Install the 'Create React App' package\n\nRather than installing the CRA packaging directly using `npm i create-react-app`, we are going to use `npx`. This is a tool that allows you to run packages without having a global or local installation. In a similar fashion to an `npm` command, we will use `npx create-react-app my-app` to get started. If you are using `yarn` like I do, use the command `yarn create-react-app learn-react`. To use `npx`, you will need to have npm 5.2+ or higher.\n\n<aside-block type=\"info\" heading=\"Using typescript? No problem\" text=\"\n If you intend on using Typescript in your React project, just add `--template typescript` to the `create-react-app` command. We're sticking with 'regular' Javascript for this, but it doesn't differ too much.\"></aside-block>\n\nLooking at our output in the folder directory, this is what we are given;\n\n```txt\nREADME.md\n node_modules/\n package.json\n public/\n index.html\n favicon.ico\n src/\n App.css\n App.js\n App.test.js\n main.css\n index.js\n logo.svg\n reportWebVitals.js\n setupTests.js\n```\n\nFor the project to build, these files must exist with exact filenames:\n\n public/index.html is the page template;\n src/index.js is the JavaScript entry point.\n\nYou can delete or rename the other files.\n\n### After project setup\n\nRun `yarn start` to open the project up on the default port of 3000 - and get started!\n\n### Eject from CRA\n\nThe CRA has a distinct advantage of only having one dependency to manage - `react-scripts`. While it is great to only have to manage one dependency, and not have to deal with the underlying packages, sometime we need/want to. So what then? In this instance, the CRA team included a command `npm run eject`. This command takes all the configuration files and other dependencies such as webpack and Babel and copies them into your projects `package.json` file as seperate dependencies.\n\n<FYIBlock type=\"warning\">\n\t<span slot=\"title\">Point of no return</span>\n\t<div slot=\"body\">Running the `npm run eject` or `yarn eject` commands is irreversible, so make sure you choose wisely as to whether or not you want to run this command. There is an alternative however, which we will cover below, so don't be too trigger happy.</div>\n</FYIBlock>\n\n## Eject alternatives\n\nRunning eject isn't highly recommended however, as there are tools that can allow for overriding dependencies _without_ ejecting. CRACO for example, which stands for Create React App Configuration Override can override parts of the create-react-app tool while still allowing for the advantage of CRA's one dependecy to be taken advantage of.\n\n### Advantages & Disadvantages\n\nUltimately, using the CRA tool seems like a great way forward to creating Single Page Applications in React, but surely there's some downsides? Let's run through some advantages and disadvantages of using this.\n\n#### Advantages\n\nA great start to this is that there's **less to learn**, you don't need to find out the ins-and-outs to configure any of the build tools used such as Webpack or Babel, and there's also instant browser reload to help with development. There's also **only one dependency** so when it comes to the pieces that make up the CRA, we don't need to worry about versions being out-of-date, or not being compatible.\n\n#### Disadvantages\n\nIt's not all sunshine though, as always there are some downsides. The CRA does have a lot of dependencies stored in it that will be included regardless of it actually being used. Running the `eject` command on our previously installed CRA app, will result in a vastly different `package.json` file which you can see below. For context, I've removed the content around the dependencies section.\n\n```json\n{\n \"dependencies\": {\n \"@babel/core\": \"7.12.3\",\n \"@pmmmwh/react-refresh-webpack-plugin\": \"0.4.3\",\n \"@svgr/webpack\": \"5.5.0\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"@typescript-eslint/eslint-plugin\": \"^4.5.0\",\n \"@typescript-eslint/parser\": \"^4.5.0\",\n \"babel-eslint\": \"^10.1.0\",\n \"babel-jest\": \"^26.6.0\",\n \"babel-loader\": \"8.1.0\",\n \"babel-plugin-named-asset-import\": \"^0.3.7\",\n \"babel-preset-react-app\": \"^10.0.0\",\n \"bfj\": \"^7.0.2\",\n \"camelcase\": \"^6.1.0\",\n \"case-sensitive-paths-webpack-plugin\": \"2.3.0\",\n \"css-loader\": \"4.3.0\",\n \"dotenv\": \"8.2.0\",\n \"dotenv-expand\": \"5.1.0\",\n \"eslint\": \"^7.11.0\",\n \"eslint-config-react-app\": \"^6.0.0\",\n \"eslint-plugin-flowtype\": \"^5.2.0\",\n \"eslint-plugin-import\": \"^2.22.1\",\n \"eslint-plugin-jest\": \"^24.1.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.3.1\",\n \"eslint-plugin-react\": \"^7.21.5\",\n \"eslint-plugin-react-hooks\": \"^4.2.0\",\n \"eslint-plugin-testing-library\": \"^3.9.2\",\n \"eslint-webpack-plugin\": \"^2.5.2\",\n \"file-loader\": \"6.1.1\",\n \"fs-extra\": \"^9.0.1\",\n \"html-webpack-plugin\": \"4.5.0\",\n \"identity-obj-proxy\": \"3.0.0\",\n \"jest\": \"26.6.0\",\n \"jest-circus\": \"26.6.0\",\n \"jest-resolve\": \"26.6.0\",\n \"jest-watch-typeahead\": \"0.6.1\",\n \"mini-css-extract-plugin\": \"0.11.3\",\n \"optimize-css-assets-webpack-plugin\": \"5.0.4\",\n \"pnp-webpack-plugin\": \"1.6.4\",\n \"postcss-flexbugs-fixes\": \"4.2.1\",\n \"postcss-loader\": \"3.0.0\",\n \"postcss-normalize\": \"8.0.1\",\n \"postcss-preset-env\": \"6.7.0\",\n \"postcss-safe-parser\": \"5.0.2\",\n \"prompts\": \"2.4.0\",\n \"react\": \"^17.0.2\",\n \"react-app-polyfill\": \"^2.0.0\",\n \"react-dev-utils\": \"^11.0.3\",\n \"react-dom\": \"^17.0.2\",\n \"react-refresh\": \"^0.8.3\",\n \"resolve\": \"1.18.1\",\n \"resolve-url-loader\": \"^3.1.2\",\n \"sass-loader\": \"^10.0.5\",\n \"semver\": \"7.3.2\",\n \"style-loader\": \"1.3.0\",\n \"terser-webpack-plugin\": \"4.2.3\",\n \"ts-pnp\": \"1.2.0\",\n \"url-loader\": \"4.1.1\",\n \"web-vitals\": \"^1.0.1\",\n \"webpack\": \"4.44.2\",\n \"webpack-dev-server\": \"3.11.1\",\n \"webpack-manifest-plugin\": \"2.2.0\",\n \"workbox-webpack-plugin\": \"5.1.4\"\n }\n}\n```\n\nLet's compare this 'ejected' version to the one created by default upon running the tool;\n\n```json\n{\n \"name\": \"create-react-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.14.1\",\n \"@testing-library/react\": \"^12.0.0\",\n \"@testing-library/user-event\": \"^13.2.1\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-scripts\": \"5.0.0\",\n \"web-vitals\": \"^2.1.0\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\"react-app\", \"react-app/jest\"]\n },\n \"browserslist\": {\n \"production\": [\">0.2%\", \"not dead\", \"not op_mini all\"],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n```\n\nThere is a huge difference in the amount of dependencies shown. So, all of this is brought into a project everytime CRA is used to build it. If you only use CSS, and not SASS...well you're getting the functionality to use SASS anyway. There is also a disadvantage when it comes to adding custom build configs, as ejecting the app would mean that you didn't have only one build dependency. Then again, we can resolve these issues CRA also uses Client Side Rendering by default, which means that the main javascript file in our built project will be downloaded first before any other assets. Also, development time can be slower than other tools, such as Vite, depending on the size of the project. Vite is built on top of esbuild whereas CRA is built on top of Webpack, and for comparison, esbuild continually builds projects much faster than CRA does. This is written about in more depth in [this](https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13) article by Can Durmus.",
"version": "1.0"
},
"description": "A deep dive into Create React App - a tool for building single page applications",
"path": "/writing/lets-react-create-react-app",
"publishedAt": "2022-02-17T00:00:00.000Z",
"site": "https://dominickjay.com",
"tags": [
"react"
],
"textContent": "import FYIBlock from \"../../components/FYIBlock.astro\";\n\nWhat is 'Create React App'?\n\nSo, what is it? 'Create React App' is a tool to create single-page React applications, and generates a project holding a skeleton structure of files and folders. According to the official documentation this setup allows the use of \"the latest JavaScript features, provides a nice developer experience, and optimizes your app for production\".\n\nSetting up a project\n\nNow we know what it is, let's start using it.\n\n= 14.0.0, npm >= 5.6. You can check what versions you have of each by using and .\">\n\nInstall the 'Create React App' package\n\nRather than installing the CRA packaging directly using , we are going to use . This is a tool that allows you to run packages without having a global or local installation. In a similar fashion to an command, we will use to get started. If you are using like I do, use the command . To use , you will need to have npm 5.2+ or higher.\n\nLooking at our output in the folder directory, this is what we are given;\n\nFor the project to build, these files must exist with exact filenames:\n\n public/index.html is the page template;\n src/index.js is the JavaScript entry point.\n\nYou can delete or rename the other files.\n\nAfter project setup\n\nRun to open the project up on the default port of 3000 - and get started!\n\nEject from CRA\n\nThe CRA has a distinct advantage of only having one dependency to manage - . While it is great to only have to manage one dependency, and not have to deal with the underlying packages, sometime we need/want to. So what then? In this instance, the CRA team included a command . This command takes all the configuration files and other dependencies such as webpack and Babel and copies them into your projects file as seperate dependencies.\n\n\tPoint of no return\n\tRunning the or commands is irreversible, so make sure you choose wisely as to whether or not you want to run this command. There is an alternative however, which we will cover below, so don't be too trigger happy.\n\nEject alternatives\n\nRunning eject isn't highly recommended however, as there are tools that can allow for overriding dependencies without ejecting. CRACO for example, which stands for Create React App Configuration Override can override parts of the create-react-app tool while still allowing for the advantage of CRA's one dependecy to be taken advantage of.\n\nAdvantages & Disadvantages\n\nUltimately, using the CRA tool seems like a great way forward to creating Single Page Applications in React, but surely there's some downsides? Let's run through some advantages and disadvantages of using this.\n\nAdvantages\n\nA great start to this is that there's less to learn, you don't need to find out the ins-and-outs to configure any of the build tools used such as Webpack or Babel, and there's also instant browser reload to help with development. There's also only one dependency so when it comes to the pieces that make up the CRA, we don't need to worry about versions being out-of-date, or not being compatible.\n\nDisadvantages\n\nIt's not all sunshine though, as always there are some downsides. The CRA does have a lot of dependencies stored in it that will be included regardless of it actually being used. Running the command on our previously installed CRA app, will result in a vastly different file which you can see below. For context, I've removed the content around the dependencies section.\n\nLet's compare this 'ejected' version to the one created by default upon running the tool;\n\nThere is a huge difference in the amount of dependencies shown. So, all of this is brought into a project everytime CRA is used to build it. If you only use CSS, and not SASS...well you're getting the functionality to use SASS anyway. There is also a disadvantage when it comes to adding custom build configs, as ejecting the app would mean that you didn't have only one build dependency. Then again, we can resolve these issues CRA also uses Client Side Rendering by default, which means that the main javascript file in our built project will be downloaded first before any other assets. Also, development time can be slower than other tools, such as Vite, depending on the size of the project. Vite is built on top of esbuild whereas CRA is built on top of Webpack, and for comparison, esbuild continually builds projects much faster than CRA does. This is written about in more depth in this article by Can Durmus.",
"title": "Let's React: Create React App"
}