create react app | typescript | redux

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 create-react-app

npx is a new binary available with npm@v5.2.0.

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:

• package.json
• .gitignore
• node_modules/
• • public/
  • favicon.ico
  • index.html
  • logo192.png
  • logo512.png
  • manifest.json
  • robots.txt
• • src/
  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js
  • logo.svg
  • serviceWorker.js

create react app | typescript

With react-script@2.1.0 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.

For these reasons, you can run:

npm start

or

yarn start

and your app will run on http://localhost:3000 without any work on your end.

You can also run

npm test

or

yarn test

and run a test watcher in interactive mode.

For productions builds running

npm build

or

yarn build

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?

Your thoughts?