How to set up a React.js/TypeScript project using create-react-app
Why is this important
Suppose you want to start a new project with React.js and because you are a good software developer, you want to use npm, babel and Webpack. what comes to mind is
Where do i start?
Before create-react-app you had to search and try an infinite amount of boilerplates and example repositories to finally had a mediocre setup after two days of wasted time.
Now it’s easier .
We will learn how to create a React/TypeScript project using the create-react-app utility. By the end, we’ll have
* a project with React and TypeScript
We’ll use the create-react-app tool to quickly get set up.I assume that you’re already using Node.js with npm.
First, install the global package.
npm install -g create-react-app
Create our new project
We’ll create a new project called myreactapp:
create-react-app myreactapp — scripts-version=react-scripts-ts
* create-react-app is a global command-line utility that you use to create new projects
* react-scripts-ts is a development dependency in the generated project to take the standard create-react-app project and bring TypeScript into the mix.
The create-react-app — scripts-version=react-scripts-ts command will proceed to create the myreactapp folder and install the dependencies in the package.json file it generated.
Your project layout should look like this.
| — — index.tsx
| — — registerServiceWorker.ts
| — — logo.svg
| — — App.tsx
| — — App.test.tsx
| — — App.css
| — — index.css
| — — assets/
* tsconfig.json contains TypeScript-specific options for our project.
* tslint.json stores the settings that our linter, TSLint, will use.
* package.json contains our dependencies, as well as some shortcuts for commands we’d like to run for testing, previewing, and deploying our app.
* public contains static assets like the HTML page we’re planning to deploy to, or images. You can delete any file in this folder apart from index.html.
* src contains our TypeScript and CSS code.
*index.tsx is the entry-point for our file, and is mandatory.
Running the project
Ok, now that we are done with the setup. lets fire up our application. First, move into the project folder myreactapp.
Then, run the command
npm run start
This runs the start script specified in our package.json, and will spawn off a server which reloads the page as we save our files. Typically the server runs at http://localhost:3000, but should be automatically opened for you.
You can now navigate your favorite browser to localhost:3000 to see our application in action.
Testing the project
Testing is also just a command away:
npm run test
Creating a production build
When running the project with npm run start, we didn’t end up with an optimized build. Typically, we want the code we ship to users to be as fast and small as possible. Certain optimizations like minification can accomplish this, but often take more time. We call builds like this “production” builds (as opposed to development builds).
To run a production build, just run
npm run build
This will create an optimized JS and CSS build in ./build/static/js and ./build/static/css respectively.
You won’t need to run a production build most of the time, but it is useful if you need to measure things like the final size of your app.
You can see that create-react-app is a powerful command-line tool that simplifies the creation of React/TypeScript projects.
I can’t emphasize how useful and important create-react-app is for the ecosystem.
The first and obvious benefit is being able to quickly create new projects without having to think about build infrastructure, which is honestly the most painful part of building a modern React project. create-react-app makes all the hard choices for you and gives you a reasonable set of defaults to work with.
I can’t thank the team behind this little tool enough for making it so easy and so much fun to build React applications!
You can find the full source code at my Github repo.