There are multiple ways, but all of them start from here react-scripts
By default when you do
npx create-react-app my-app
It look for a --script-version
flag & if it doesn't have that flag uses react-scripts by defaults. If you want to override this behavior you have to;
npx create-react-app my-app --script-version <path-to-your-custom-react-scripts>
Now <path-to-your-custom-react-scripts>
can be a local path or npm/github link
- Local path
npx create-react-app my-app --script-version file:///absolute-path-to-where-react-scripts-is-cloned
- Github path
npx create-react-app my-app --script-version git+ssh://git@github.com/<user-name>/<package-name>.git
One you have react-scripts anything & everything it offers can be modified.
In your root folder add a file called template.dependencies.json
& add content like
{
"dependencies": {
"moment": "latest"
}
}
Save changes & hit the command;
npx create-react-app my-app --script-version <path-react-scripts>
By the time it finishes setting up your project, you will have moment
installed in the dependencies
in your package.json
file.
If you want to ship with a different template when you init a new project, maybe the team that you are working with wants a project template setup in a certain way initially whether JS
to Typescript
.
- Go to the appropriate folder for .js
./template
- Go to the appropriate folder for .ts
'./template-typescript
For this example I want to change my .js
file template.
So I'll go in ./template/src/index.jsx
& add the following content
import React from 'react';
import ReactDOM from 'react-dom`;
ReactDOM.render(
<div>
<header>My Header</header>
<main>My main content here</main>
</div>,
document.getElementById('root'),
);
Once the changes are made, simply hit save & npx create-react-app my-app --script-version <path-react-scripts>
By the time it finishes setting up your project, you will have new template to begin with.
The example above is very simple (and probably has no practical usage) but you can see the power of changing the entire template to your own taste.
Before you read on here, check out Dan Abramov's talk on Melting pot of Javascript
<-- Content to be added here -->
It's a one way road, once you decide to move this way, it is going to be hard to get official support on it & it is going to be your own responsibility to maintain the forked version.