Skip to content

01 Setup

Jump to bottom
JP Barbosa edited this page Oct 15, 2022 · 2 revisions

Setup

Create new React app with TypeScript

npx create-react-app typescript-crud --template typescript

Enter into the app directory

cd typescript-crud

Remove unnecessary files

rm ./src/App.css
#rm ./src/App.test.tsx
#rm ./src/reportWebVitals.ts

Create directories

mkdir ./src/components
mkdir ./src/contexts
mkdir ./src/hooks
mkdir ./src/interfaces
mkdir ./src/pages

Add axios

yarn add axios class-validator

Cleanup index.html

code ./public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="A guide to build a TypeScript CRUD"
    />
    <title>TypeScript CRUD</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Cleanup App.tsx

code ./src/App.tsx
const App: React.FC = () => {
  return (
    <div className="App">
      <header>
        <h1>
          <div className="title">TypeScript CRUD</div>
          <div className="subtitle">With React and TypeORM</div>
        </h1>
      </header>
    </div>
  );
};

export default App;

Start React app

yarn start

Commit

git add .
git commit -m "Setup"

Next step: Styles

Clone this wiki locally