Convert Figma logo to code with AI

wmonk logocreate-react-app-typescript

DEPRECATED: Create React apps using typescript with no build configuration.

3,703
492
3,703
119
View on GitHubView on NPM

Top Related Projects

facebook's avatar

create-react-app

102,511

Set up a modern web app by running one command.

microsoft's avatar

TypeScript-React-Starter

11,084

A starter template for TypeScript and React with a detailed README describing how to use the two together.

microsoft's avatar

TypeScript-React-Conversion-Guide

1,428

A guide for converting a simple JavaScript/React project to TypeScript. Contains both before an after code with the step-by-step process in the README below.

react-boilerplate's avatar

react-boilerplate

29,448

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Quick Overview

The create-react-app-typescript project is a fork of the popular create-react-app tool, which provides a pre-configured setup for building React applications. This fork specifically targets TypeScript, a superset of JavaScript that adds static typing to the language, making it a great choice for larger-scale React projects.

Pros

  • Streamlined Setup: The project provides a quick and easy way to set up a new React project with TypeScript, without the need to manually configure the build process.
  • TypeScript Support: By using this fork, developers can take advantage of the benefits of TypeScript, such as improved code maintainability, better tooling, and more robust type checking.
  • Customization: The project allows for easy customization of the configuration, making it possible to adapt the setup to specific project needs.
  • Active Development: The project is actively maintained and regularly updated, ensuring that it stays up-to-date with the latest versions of React and TypeScript.

Cons

  • Limited Flexibility: While the project provides a good starting point, some developers may find the pre-configured setup too restrictive and may prefer to set up their own TypeScript-based React project from scratch.
  • Potential Compatibility Issues: As a fork of create-react-app, there may be occasional compatibility issues with the upstream project, which could require additional effort to resolve.
  • Learning Curve: Developers who are new to TypeScript may need to invest some time in learning the language and its best practices, which could add to the initial setup time.
  • Dependency on create-react-app: The project is dependent on the create-react-app project, which means that any changes or issues in the upstream project could potentially affect the create-react-app-typescript fork.

Getting Started

To get started with create-react-app-typescript, follow these steps:

  1. Install the create-react-app-typescript package globally:
npm install -g create-react-app-typescript
  1. Create a new React project with TypeScript support:
create-react-app-typescript my-app --template typescript
  1. Navigate to the project directory and start the development server:
cd my-app
npm start

This will start the development server and open your new React application in the browser.

Competitor Comparisons

facebook logo

create-react-app

102,511

Set up a modern web app by running one command.

Pros of Create React App

  • Officially maintained by Facebook, ensuring regular updates and broad community support
  • Extensive documentation and resources available
  • Seamless integration with React ecosystem and tools

Cons of Create React App

  • Lacks built-in TypeScript support, requiring additional configuration
  • May include unnecessary dependencies for some projects
  • Less flexibility in configuration without ejecting

Code Comparison

Create React App (JavaScript):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Create React App TypeScript:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);

The main difference is the use of TypeScript syntax in the second example, with explicit type annotations and the as HTMLElement type assertion.

Create React App TypeScript provides out-of-the-box TypeScript support, which can lead to improved code quality and developer experience for TypeScript users. However, Create React App offers a more streamlined setup for JavaScript projects and benefits from direct Facebook maintenance.

Both tools serve similar purposes but cater to different preferences in terms of language and configuration needs.

microsoft logo

TypeScript-React-Starter

11,084

A starter template for TypeScript and React with a detailed README describing how to use the two together.

Pros of TypeScript-React-Starter

  • Official Microsoft repository, potentially offering better long-term support and updates
  • Includes additional tools like TSLint for code quality enforcement
  • Provides a more comprehensive setup with Redux integration out of the box

Cons of TypeScript-React-Starter

  • Less frequently updated compared to create-react-app-typescript
  • May include more dependencies and complexity than necessary for simpler projects
  • Potentially steeper learning curve for developers new to TypeScript or Redux

Code Comparison

TypeScript-React-Starter:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

create-react-app-typescript:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

The main differences in the code snippets are the import syntax and the service worker implementation. TypeScript-React-Starter uses the import * as syntax, while create-react-app-typescript uses the more modern ES6 import syntax. Additionally, the service worker implementation differs slightly between the two projects.

microsoft logo

TypeScript-React-Conversion-Guide

1,428

A guide for converting a simple JavaScript/React project to TypeScript. Contains both before an after code with the step-by-step process in the README below.

Pros of TypeScript-React-Conversion-Guide

  • Provides a comprehensive guide for converting existing React projects to TypeScript
  • Offers detailed explanations and best practices for TypeScript integration
  • Maintained by Microsoft, ensuring high-quality and up-to-date information

Cons of TypeScript-React-Conversion-Guide

  • Not a ready-to-use boilerplate or template for new projects
  • Requires more manual setup and configuration compared to create-react-app-typescript
  • May be overwhelming for beginners due to its in-depth nature

Code Comparison

TypeScript-React-Conversion-Guide example:

interface Props {
  name: string;
  age: number;
}

const Person: React.FC<Props> = ({ name, age }) => {
  return <div>{name} is {age} years old</div>;
};

create-react-app-typescript example:

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <p>Edit <code>src/App.tsx</code> and save to reload.</p>
      </header>
    </div>
  );
};

The TypeScript-React-Conversion-Guide focuses on explaining TypeScript concepts and integration, while create-react-app-typescript provides a ready-to-use template with TypeScript support out of the box. The former is better for learning and converting existing projects, while the latter is ideal for quickly starting new TypeScript React projects.

react-boilerplate logo

react-boilerplate

29,448

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Pros of react-boilerplate

  • More comprehensive and feature-rich, offering a complete development environment
  • Includes advanced features like Redux, reselect, and ImmutableJS out of the box
  • Provides a scalable architecture suitable for large applications

Cons of react-boilerplate

  • Steeper learning curve due to its complexity and additional libraries
  • May be overkill for smaller projects or beginners
  • Less flexibility in choosing state management solutions

Code Comparison

react-boilerplate:

import { createSelector } from 'reselect';
import { initialState } from './reducer';

const selectHome = state => state.home || initialState;

const makeSelectUsername = () =>
  createSelector(
    selectHome,
    homeState => homeState.username
  );

create-react-app-typescript:

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;

The code comparison shows that react-boilerplate uses more advanced concepts like selectors and state management, while create-react-app-typescript provides a simpler, TypeScript-enabled starting point for React applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

⛔ DEPRECATED ⛔

create-react-app now supports typescript natively - read the guide for adding typescript to existing projects.

For existing react-scripts-ts users who would like to upgrade, follow this guide.

I have chosen to archive this repository, if you need to contact me, i'm on twitter @willmonk.

react-scripts-ts npm version Build Status

Create React apps (with Typescript) with no build configuration.

Do you know react and want to try out typescript? Or do you know typescript and want to try out react? Get all the benefits from create-react-app but you use typescript! 🚀

Quick Overview

npx create-react-app my-app --scripts-version=react-scripts-ts
cd my-app
npm start

# or with yarn
yarn create react-app my-app --scripts-version=react-scripts-ts
cd my-app
yarn start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Migration

In general, most upgrades won't require any migration steps to work, but if you experience problems after an upgrade, please file an issue, and we'll add it to the list of migration steps below.

From <2.16.0 to >=2.16.0

Since 2.16.0, the template uses different tsconfig files for both development and production mode. For the latter, unfortunately, the path resolver is not smart enough to fall back to the basic tsconfig.json in case the expected tsconfig.prod.json is not present, so you have to create this file manually like shown here.

From <2.13.0 to >=2.13.0

Since 2.13.0, typescript is listed as a peer dependency of react-scripts-ts. For projects generated with at least this version, the init script takes care of properly installing it as dev dependency to the generated projects. Older projects require manual installation, in case you have not already done that.

Using npm:

npm i -D typescript

Using yarn:

yarn add -D typescript

From <2.5.0 to >=2.5.0

Version 2.5.0 introduces a new config file for jest, that is necessary for the tests to run. If you were previously running a version older than v2.5.0 and upgraded to v2.5.0 or newer, you need to manually add the new file, or else you'll get an error similar to this when trying to run your tests:

Test suite failed to run

{
    "messageText": "Cannot read file 'C:\\[project]\\tsconfig.test.json': ENOENT: no such file or directory, open 'C:\\[project]\\tsconfig.test.json'.",
    "category": 1,
    "code": 5012
}

To fix this, create a new file in the root of the project called tsconfig.test.json, and paste the content of this file into it. Everything should work now. For more info, please see this issue.

Changelog

2.17.0

  • Update migration instructions - @DorianGrey
  • tslint updates - @alexandrudanpop
  • Stop eslint includes - @aurerua
  • Resolve commited merge conflig - @AndrewKvalheim

2.16.0

  • Allow moduleNameMapper config override - @sebald
  • Fix travis build - @DorianGrey
  • Allow using different tsconfig file for dev and build - @DorianGrey

2.15.1

  • Fix duplicated mjs entry in Jest config - @StevenLangbroek
  • Allow --watchAll to be set - @DorianGrey

2.15.0

  • Replace TSLint rules with presets - @nielsdB97
  • Update file-loader exclusion rules - @winstonewert
  • Fix Uglifyjs settings - @meandmax
  • Merge react-script 1.1.x - @wmonk

2.14.0

  • README fixes - @kaminskypavel
  • README fixes - @adambowles
  • Remove unused JS files - @DorianGrey
  • README fixes - @stephtr
  • Added the abillity to import js and jsx files with ts-loader - @GeeWee
  • Uglifyjs update for es6 support - @thetric

2.13.0

  • Remove tslint-loader from prod builds - @DorianGrey
  • Include typescript as devDependency in boilerplate - @ianschmitz
  • Document custom module formats - @joshtynjala
  • Fix tsconfig.json - @diabelb

2.12.0

  • Update typescript to 2.6.2

2.11.0

2.10.0

  • README updates - StefanSchoof
  • README updates - DorianGrey
  • Add support for fork-ts-checker-webpack-plugin - johnnyreilly

2.9.0 - UNPUBLISHED

This included changes that were not published by the facebook upstream, so was unpublished.

2.8.0

  • Update typescript to 2.5.3 - @nicolaserny

2.7.0

  • Merge react-scripts@1.0.13 - @JohnNilsson
  • Fix git tempalte - @hktonylee
  • Provide migration docs - @JReinhold
  • Updated dependencies - @swengorschewski
  • Fix tslint config - @comerc

2.6.0

  • Merge react-scripts@1.0.10 - @wmonk
  • Update component template - @pelotom

2.5.0

  • Support dynamic imports - thanks @nicolaserny, @DorianGrey
  • Fix up tsconfig - thanks @js-n
  • Fix readme typo - thanks @adambowles
  • Move to ts-jest - thanks @DorianGrey

2.4.0

  • Upgrade typescript to 2.4 and ts-loader to 2.2.1 - thanks @frederickfogerty
  • Fix readme typo - thanks @wrongway4you

2.3.2

  • Fix typescript version to 2.3.x until 2.4 @types are fixed

2.3.1

  • All tsc to parse config (for extend) - Thanks to @DorianGrey
  • Fix various jest issues - thanks to @zinserjan
  • Fix code coverage - thanks to @zinserjan

2.2.0

2.1.0

  • Update to tslint@5.2.0 - thanks to @mindjuice
  • Fix test setup issue - thanks to @jonmpqts
  • Add source-map-loader - thanks to @Place1
  • Update to typescript@2.3.3 - thanks to @sjdweb

2.0.1

  • Fix issue with jest finding test files

2.0.0

1.4.0

  • Upgrade to typescript@2.3.2 - thanks to @patrick91
  • Add tests around react-scripts-ts - thanks to @migerh

1.3.0

  • Upgrade to typescript@2.2.2 - thanks to @jeremistadler

1.1.8

  • Fix regression where no @types were being installed on init

1.1.7

  • Merge facebookincubator/create-react-app@0.9.5 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.4 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.3 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.2 into react-scripts-ts
  • Merge facebookincubator/create-react-app@0.9.1 into react-scripts-ts

1.1.6

  • Merge facebookincubator/create-react-app@0.9.0 into react-scripts-ts

1.0.6

  • Add missing cli-highlight dependency

1.0.5

  • Print file names when running npm run build
  • Add support for setupTest.ts
  • Highlight source code when erroring in npm run build

1.0.4

  • Change mentions of eslint to tslint

1.0.3

  • Remove hidden character from tsconfig.json

1.0.2

  • Copy typescriptTransform.js when running npm run eject