create react app | typescript | redux
• stackchief •
create-react-app is a CLI tool that generates React projects for you. It creates a lot of boilerplate code and abstracts away the configuration, making it easy to focus on writing more ReactJS.
npx is a new binary available with email@example.com.
npx create-react-app some-app
Alternatively you can use older versions of npm or yarn to create new projects...
npm init react-app some-app
yarn create react-app some-app
Running the above commands generates a new project some-app with the following files and folders:
create react app | typescript
With firstname.lastname@example.org and higher, you can create react app with TypeScript:
npx create-react-app some-app --typescript
Running create-react-app with the --typescript argument generates the same boilerplate code with .tsx extensions instead of .js. It also auto configures a tsconfig.json file making your app TypeScript ready out the box.
You can also add TypeScript to an existing project...
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
This installs TypeScript and the necessary type definitions for node, react, react-dom, and jest. Note:: Remember to rename all of your .js files to .tsx files and restart the development server.
create react app | redux
You can easily use Redux with create-react-app just like you otherwise would.
After running create-react-app, you can install the Redux dependencies...
npm install redux react-redux redux-thunk --save
After installing Redux related dependencies, you can create actions and reducers in a similar fashion...
Check this out for a detailed implementation of create-react-app with Redux
Pros and Cons
create-react-app is a highly recommended way to GET STARTED with building React apps. It generates a lot of the boilerplate code for you.
You don't have to worry about configuring webpack either. While create-react-app uses webpack internally, it abstracts away any responsibilities on your end.You don't have to worry about configuring Babel or TypeScript at all.
For these reasons, you can run:
and your app will run on http://localhost:3000 without any work on your end.
You can also run
and run a test watcher in interactive mode.
For productions builds running
builds the app for production in the build directory.
Such a reliance on a hidden webpack configuration is both a blessing and a curse. With ease comes reliance. Using create-react-app makes it difficult to modify your build configuration (webpack) later down the road.
With that said, you can run the following to "eject" your webpack.config.js file....
npm run eject
This will give you access to the webpack.config.js directly but is also irreversible. It can get nasty fast if you don't know what you're doing.
Considerations with create-react-app
create-react-app only implements the frontend. While it allows for easy development with webpack dev server, it doesn't generate a backend. You are still responsible for building out the backend with create-react-app.
create-react-app makes you rely too much on magic. Without understanding configuration details, do you really know what you're doing?