{"id":19581193,"url":"https://github.com/jmw5598/setup-react-with-typescript","last_synced_at":"2026-04-15T15:31:46.460Z","repository":{"id":92886139,"uuid":"526911288","full_name":"jmw5598/setup-react-with-typescript","owner":"jmw5598","description":"Instructions for setting up a React project with Typescript without the help of create-react-app","archived":false,"fork":false,"pushed_at":"2022-08-20T15:56:53.000Z","size":58,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T12:17:36.656Z","etag":null,"topics":["create-react-app","create-react-app-typescript","javascript","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmw5598.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-20T11:48:00.000Z","updated_at":"2022-08-20T15:47:41.000Z","dependencies_parsed_at":"2023-05-05T17:16:24.721Z","dependency_job_id":null,"html_url":"https://github.com/jmw5598/setup-react-with-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jmw5598/setup-react-with-typescript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmw5598%2Fsetup-react-with-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmw5598%2Fsetup-react-with-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmw5598%2Fsetup-react-with-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmw5598%2Fsetup-react-with-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmw5598","download_url":"https://codeload.github.com/jmw5598/setup-react-with-typescript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmw5598%2Fsetup-react-with-typescript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280683965,"owners_count":26372970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","create-react-app-typescript","javascript","react","reactjs","typescript"],"created_at":"2024-11-11T07:33:58.686Z","updated_at":"2025-10-23T19:56:21.698Z","avatar_url":"https://github.com/jmw5598.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Setting Up React With Typescript From Scratch\n\n1. Create project folder `mkdir \u003cproject-name\u003e \u0026\u0026 cd \u003cproject-name\u003e`.\n2. Initial npm project, `npm init` and follow the prompts.\n3. Install dev dependencies\n\n```bash\nnpm install --save-dev \\\n  @babel/core \\\n  @babel/preset-env \\\n  @babel/preset-react \\\n  @babel/preset-typescript \\\n  @types/node \\\n  @types/react \\\n  @types/react-dom \\\n  babel-loader \\\n  css-loader \\\n  html-webpack-plugin \\\n  react \\\n  react-dom \\\n  style-loader \\\n  ts-loader \\\n  typescript \\\n  webpack \\\n  webpack-cli \\\n  webpack-dev-server\n```\n\n4. Update scripts block in your `package.json` file.\n   \n```json\n\"scripts\": {\n  \"start\": \"webpack serve --hot --open\",\n  \"build\": \"webpack --mode production\"\n},\n```\n\n5. Create `webpack.config.js` with `touch webpack.config.js`.\n\n```javascript\nconst path = require('path');\nconst HTMLWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.tsx',\n  output: {\n    path: path.join(__dirname, '/dist'),\n    filename: 'index.bundle.js'\n  },\n  mode: process.env.NODE_ENV || \"development\",\n  resolve: {\n    extensions: [ '.tsx', '.ts', '.js' ],\n  },\n  devServer: {\n    port: 8080\n  },\n  plugins: [\n    new HTMLWebpackPlugin({\n      template: path.join(__dirname, 'src', 'index.html')\n    })\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/,\n        exclude: /node_modules/,\n        use: [\"babel-loader\"],\n      },\n      {\n        test: /\\.(ts|tsx)$/,\n        exclude: /node_modules/,\n        use: [\"ts-loader\"],\n      },\n      {\n        test: /\\.(css|scss)$/,\n        use: [\"style-loader\", \"css-loader\"],\n      },\n      {\n        test: /\\.(jpg|jpeg|png|gif|mp3|svg)$/,\n        use: [\"file-loader\"],\n      },\n    ]\n  },\n}\n```\n6. Create your `.babelrc` file\n\n```\n{\n  \"presets\": [\n    \"@babel/preset-env\",\n    \"@babel/preset-react\", \n    \"@babel/preset-typescript\" \n  ],\n  \"plugins\": [\n    \"@babel/plugin-proposal-class-properties\"\n  ]\n}\n```\n7. Create your `tsconfig.json` file.\n```\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": false,\n    \"jsx\": \"react-jsx\"\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n```\n8. Create `src` directory for your source code, `mkdir src`\n9. Create your `index.html`, `index.tsx`, and `App.tsx` files, `touch src/index.html src/index.ts src/App.tsx`.\n\n**src/index.html**\n```html\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE-edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eReact Without Create React App\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**src/index.tsx**\n```typescript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n//Import App\nimport App from \"./App\";\n\nReactDOM.render(\u003cApp /\u003e, document.querySelector(\"#root\"));\n```\n\n**src/App.tsx**\n```typescript\nimport React from 'react';\n\ninterface Props {\n\n}\n\nconst App: React.FC\u003cProps\u003e = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eHello World\u003c/h1\u003e\n      \u003cp\u003eReact Without create-react-app\u003c/p\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default App;\n```\n\n10. Start development server with `npm start`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmw5598%2Fsetup-react-with-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmw5598%2Fsetup-react-with-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmw5598%2Fsetup-react-with-typescript/lists"}