image credit: NASA

Starting a React/Redux Project with TypeScript

TypeScript

Table of Contents

  1. Install Node.js
  2. Install create-react-app
  3. Create Your App
  4. Run Your App
  5. Install VSCode
  6. Try Hot Reloading
  7. Add Redux
  8. Add React-Redux
  9. Run a Test Window
  10. What's Next?

1. Install Node.js

Many of the tools we're going to use -- such as NPM -- require Node.js. NPM stands for Node Package Manager and we use it to add third-party libraries to our project.

You probably already have Node and NPM installed.

Otherwise... go and download them now.

Download Node.js

2. Install create-react-app

We're going to use a bootstrapping tool called create-react-app.

It gives us a fully-functional skeleton app, preconfigured with linting, ES6-to-ES5 transpiling, hot reloading, development vs. release builds, automated testing, etc.

Don't worry yet about what these terms mean.

npm install -g create-react-app

Be patient because it takes a while to pull down all the dependencies... depending on the speed of your internet connection.

3. Create Your App

Now we're ready to create the beginning of our project. By default, create-react-app sets you up to use ES6 JavaScript with Babel.

To use TypeScript instead, instruct create-react-app to use an alternate set of scripts like this:

create-react-app hello-world --scripts-version=react-scripts-ts

Be patient again... it may take a while to download everything you need.

Output from create-react-app and react-script-ts for TypeScript

Happy hacking, it says.

4. Run Your App

Your app is ready to go. Run it now to see a basic website made with React.

Note: the create-react-app documentation refers to yarn (made by Facebook) instead of npm (the standard). These are essentially interchangeable. I use npm by habit. Feel free to use whichever you prefer.

cd hello-worldnpm start

It will compile your project and then, upon success, run a development server on a local port.

Running your app with 'npm run start'

It also launches your new web app into a browser window.

The create-react-app starter page in the browser

Looking good. Time to make some changes.

5. Install VSCode

No doubt you've already got a code editor that you love.

If that editor happens to be Visual Studio 2015 (or older) then you absolutely need to try VSCode, which has much better support for TypeScript.

Otherwise, feel free to skip this step.

Download VSCode from https://code.visualstudio.com/download

Download VSCode

Open the project folder you just created.

VSCode with hello-world project

6. Try Hot Reloading

The term 'hot reloading' refers to you being able to make source code changes, save those changes, and then have the changes appear in your browser without you having to perform any other steps.

Try it now by changing some text in App.tsx and press Ctrl S to save

Type 'Hello World!' and save changes

Then go back to your web browser and see that the changes have magically appeared

'Hello World!' now shows up in browser thanks to hot reloading

7. Add Redux

Redux will handle our application state.

Install Redux via npm. You should also install the TypeScript type definitions for Redux.

npm install --save redux @types/redux

8. Add React-Redux

Finally, we need to connect React and Redux. This is essential for having React automatically update in response to changes in our application state.

Note: if you're wondering why this isn't provided with Redux automatically, it's because Redux doesn't have to be used with React. Similarly, React doesn't need Redux. Some developers may choose Flux, MobX, other libraries, or even nothing but pure React.

Install react-redux and its TypeScript definitions

npm install --save react-redux @types/react-redux

9. Run a Test Window

Now you're ready to start playing with the code and learning React/Redux.

I just want to point out one more thing.

The automated testing can be initiated from the command line like this:

npm run test

The test runner is Jest (also written by Facebook). It runs your test suite and then waits for file changes before running again.

create-react-app provides a single test in App.test.tsx that verifies the App component doesn't crash when rendered.

Testing your app with 'npm run test'

And, of course, it passes.

What's Next?

This is just the beginning of your journey into React/Redux with TypeScript.

Create-react-app has taken care of concerns like setting up TypeScript linting, hot reloading, Webpack, automated testing, development vs. release builds, etc.

However, the creators of create-react-app hold the philosophy that the choice of technology stack to build around React should be yours rather than theirs.

And there is a lot of room for choice.

Coming soon...

Hey, I've got lots more to share with you.

If you'd like to learn more about React/Redux with TypeScript, please drop your email and name in the boxes below and I'll notify you when future installments are finished.

Join the Email List

React + Redux + TypeScript. Tutorials. Sample Code. Q&A.