Class Component with React Typescript

samira saad — Sun, 06 Mar 2022 14:45:46 +0000

What is a Component?

A component is an independent, reusable code block which divides the UI into smaller pieces.

What are Class Components?

Class components are ES6 classes that return JSX

Using TypeScript together with React has proven to be a powerful combination.

The “older way” of doing components is with class components. And they can keep state per class. State is like props, but private and only controlled by the component itself.

How to create class component using TypeScript

Class components need to be extended from the base React.Component class.

import React, { Component } from 'react';

import React, { Component } from 'react';

type CounterProps = {
  header: string;
};

type CounterState = {
  value: number;
};

class Counter extends React.Component<CounterProps, CounterState> {

  state: CounterState = {
    value: 0,
  };

  render() {
    const { header } = this.props;
    const { value } = this.state;

    return (
      <div>
        <h1>{header}</h1>
        <p>{value}</p>
      </div>
    );
  }
}

1- The CounterProps type is used to declare what type the properties of this component support.

2- This is similar to declaring types with prop-types but without any additional packages and the result of type checking is available at design time. You won't need to run the project to figure out that some types are not correctly passed.

3- Class properties are useful for storing some data that should not affect re-render of a component.

In
the example below, it is a helloMessage that changes when a component is mounted. Its update won't trigger re-rendering.

import React, {Component} from "react";

type CounterProps = {
  value: number;
};

class Counter extends Component<CounterProps> {

   // It won't be possible to assign a value 
  // with a different type to this property.

  helloMessage: string;

  componentDidMount() {
    helloMessage = "Hi! I'm mounted.";
  }

  render() {
    return <p>{this.props.value}</p>;
  }
}

pass a React component down as a prop to a child component

Within TypeScript, React.Component is a generic type (React.Component), so you want to provide it with (optional) prop and state type parameters:

class Test extends Component<PropsType,StateType> {
  constructor(props : PropsType){
        super(props)
  }

  render(){
    console.log(this.props) 
    return (
        <p>this.props.whatever</p> 
    )
  }

};

*And here how to get props of component
*

type ViewProps = React.ComponentProps<typeof View>
// or
type InputProps = React.ComponentProps<'input'>

Environment files in React.js app

samira saad — Fri, 12 Feb 2021 19:34:24 +0000

What is an environment file ?

environment file or just env is a file holds variables and some sensitive data about your app

Why we need env files in our app?

1- according to create react app documentation

WARNING: Do not store any secrets (such as private API keys) in your React app!

avoid storing any sensitive data in your js files, instead use env files to store them

sensitive data mean any data you shouldn't share with any one such as api keys, secret-ids, firebase config keys,etc....

2- To declare different variables for each environment

variables such as API url’s,
env files allow defining the values depending on the environment

How to setup env files inside react app ?

so, how can we define the values depending on the environment

Note: this feature is available with react-scripts@0.2.3 and higher.

1- install env-cmd package from npm

2- make a file called .env.envName in your project root
sush as .env.staging, .env.production, ... to differentiate between variables in each environment

3- inside the env file add your variables in key/value representation with prefix of REACT_APP
EX:
REACT_APP_BASE_URL = "https://....."

your file should look like this after adding your variables

REACT_APP_API_KEY = "****"
REACT_APP_AUTHDOMAIN =  "****"
REACT_APP_BASEURL = "****"
REACT_APP_PROJECT_ID = "****"
REACT_APP_STORAGEBUCKET = "****"

make a file with the previous 3 steps for each environment and each file with its environment values

4- inside your package.json
change the scripts builds ,..

"scripts": {
    "start": "env-cmd -f .env.staging react-scripts start",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

-f flag is for custom env file paths as the default is in the project root otherwise you should specify the actual path

"start": "env-cmd -f ../../.env.staging react-scripts start",

your build command in each environment is not npm run build any more its npm run build:staging , npm run build:production

How to read variables values in js files ?

to use a value of a particular variable located in env file inside a js file all u need to do is to use the global process.env.variableName
Ex:

console.log(process.env.REACT_APP_API_KEY)

Important Notes
1- Dont forget to add your all env files to git-ignore file to prevent tracking them after any modification
2- After each time u modify in env file stop the project serve and start it over again, otherwise its wont listen to your new changes
3- stick to your company/team for env files naming convention
as not all deployments processes accepts the .env.envName convention
for example vercel doesn't accept '.' in the env file name at all

References

1- https://medium.com/swlh/keeping-env-variables-private-in-react-app-fa44a9b33c31

2- https://create-react-app.dev/docs/adding-custom-environment-variables/

DEV Community: samira saad