devmeetings-react-ts-fork
  • Devmeeting React + Typescript
  • Speed dating
  • Typescript
    • It's just JavaScript
    • Basic types
    • Typing objects
    • Typing functions
    • Modules
    • Generics
    • Tasks
  • Hello React
    • Quick look around
    • The first component
    • JSX
    • Tasks
  • Components & Props
    • Small components
    • Passing data to a component
    • Loops in JSX
    • Tasks
  • Stateful components
    • Handling events
    • Components with internal state
    • Talking to a parent component
    • Smart and dumb components
    • Before the break
    • Tasks
  • Side-effects and context
    • Side-effects
    • Prop drilling
    • Using context
    • Tasks
  • What's next
    • Styling
    • Learning component's lifecycle
    • State Management
Powered by GitBook
On this page
  • tsconfig.json
  • src/App.css
  • src/App.test.tsx
  • src/App.tsx
  • src/index.tsx
  • src/index.css
  • src/logo.svg
  • src/react-app-env.d.ts
  • src/serviceWorker.ts
  • Resources

Was this helpful?

  1. Hello React

Quick look around

PreviousHello ReactNextThe first component

Last updated 5 years ago

Was this helpful?

We are going to be looking at the src directory, but first:

tsconfig.json

This file contains the config for the TypeScript compiler; here's couple of interesting lines to check out:

"target": "es5"

Version of JavaScript standard to compile to. ES5 is fine for semi-modern browsers, ES6 can be used for controlled environments (like node).

"strict": true

Enables 4 flags:

  • alwaysStrict - enables JavaScript strict mode for every emitted file

  • strictNullChecks - forces better checks for null/undefined

  • noImplicitAny - forces typing for variables/arguments

  • noImplicitThis - forces typing for this,

:warning: Personal opinion: should be turned on for ALL new projects, but it's probably a good idea to turn this option to false for existing codebases.

src/App.css

Styles for the App component.

src/App.test.tsx

Unit tests for the component.

src/App.tsx

Finally, the component file itself. There's some code written already that we'll replace.

  • capital "A" - all component names (and filenames) should be written in upper camel case, without any pre- or suffixes. ( :warning: according to AirBnB style-guide )

  • export default App; - default exports are a standard practice for React.

  • return ( ... - allows for better formatting

By the way, .tsx stands for TypeScript + JSX.

src/index.tsx

Entry point of the whole operation, starts our React app with the ReactDOM.render line. This is where most of the global stuff, like global styles, should go.

src/index.css

Global styles

src/logo.svg

Not interesting in itself, but why here and not in /public directory? /public contains only truly static assets, while importing them into the component file allows for easier usage and webpack transformations.

src/react-app-env.d.ts

Typings for the React environment internals. Not interesting from the app development standpoint, but removing it will break the project.

src/serviceWorker.ts

Contains the code for a default service worker enabling PWA style app. Also, all files that don't contain components should be named using the lower camel-case style.

Resources

preventing
context
sheningans
Strict mode
strictNullChecks
noImplicitAny
noImplicitThis
AirBnB Style Guide