Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 27, 2021 06:49 pm GMT

Create your own Create React App template

Create React App is a convienient way to start building a new single-page application in React. Your app only needs one build dependency react-scripts. Under the hood it uses webpack, Babel, ESLint, and other amazing projects to power your app.

Make it your own

If you don't like the default scaffold of create react app it really easy to adjust.

  • Start by creating a folder called cra-template.

  • Cd into the folder and run yarn init -y or npm init -y if your prefer npm. This will generate a basic package.json file for you.

  • Create a template.json with your specific template settings. Any dependencies you add here will be added to the final dependency list.

{  "package": {    "dependencies": {      "@testing-library/jest-dom": "^5.11.4",      "@testing-library/react": "^11.1.0",      "@testing-library/user-event": "^12.1.10",      "web-vitals": "^1.0.1"    },    "eslintConfig": {      "extends": ["react-app", "react-app/jest"]    }  }}

  • Create a template folder.

  • Create a gitignore file with the content below. Make sure to omit the dot.

# dependencies/node_modules/.pnp.pnp.js# testing/coverage# production/build# misc.DS_Store.env.local.env.development.local.env.test.local.env.production.localnpm-debug.log*yarn-debug.log*yarn-error.log*
  • Inside the template folder create a public folder with the following index.html.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <meta name="theme-color" content="#000000" />    <meta      name="description"      content="Web site created using create-react-app"    />    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />    <title>CRA template</title>  </head>  <body>    <noscript>You need to enable JavaScript to run this app.</noscript>    <div id="root"></div>  </body></html>
  • Inside the template folder create a src folder and an index.tsx in it.
import React from "react";import ReactDOM from "react-dom";import App from "./App";ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  document.getElementById("root"));
  • Inside the template/src folder create a App.tsx file.
import React from "react";const App = () => {  return <div>My CRA template</div>;};export default App;
  • Test that your scaffold is working locally by running
npx create-react-app my-app --template file:.
  • Finished code

Should look something like this


Original Link: https://dev.to/codsworth/create-your-own-create-react-app-template-46ll

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To