React TypeScript Template, and Simple Routing

To create a React project with TypeScript, you can use the create-react-app command-line tool

npx create-react-app my-app — template typescript.

Structure of my-app project

tsconfig.json: This file contains TypeScript configuration options for your project.

package.json: This file contains metadata about your project and lists the dependencies and scripts used in your app.

Some way to style css on react

Directly import css (not recommended)

Basically we can directly import css files to our tsx file, yet not recommended. For small projects, importing css directly is still ok, but not for big projects. Here is example of importing css to tsx file:

Import directly the css file by syntax import and relative path of css file. On className put css class name as a value.

Css Module:

CSS modules is an approach to modular CSS styling in which styles are scoped locally to a specific component. It helps to prevent naming collisions and provides a more modular and maintainable way to manage styles in React applications (or other frameworks that support CSS modules).

With CSS modules, each CSS file is transformed during the build process to generate unique class names for each selector. These class names are then imported as objects in the JavaScript code, allowing you to access the class names as properties.

To use CSS modules, you typically create CSS files with the .module.css extension, which indicates that they should be processed as CSS modules

module-landing-page.module.css

.blueBold {
    color: rgb(68, 11, 173);
    font-weight: bold;
  }

How to import css module

Styled-components

Styled-components is a popular CSS-in-JS library that allows you to write CSS directly in your JavaScript or TypeScript files using tagged template literals. It provides a powerful and convenient way to style React components with dynamic and reusable styles. Here’s an example of using styled-components with React and TypeScript:

npm install styled-components


import React from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';

const LoginFormContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const LoginForm = styled.form`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
`;

const Input = styled.input`
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const Button = styled.button`
  padding: 8px 16px;
  background-color: #f1f1f1;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #ddd;
  }
`;

const LoginFormComponent = () => {
    const navigate = useNavigate();

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>)  => {
        e.preventDefault();
        // Handle form submission
        localStorage.setItem('token', `yes`);
        navigate('/admin');
    };

  return (
    <LoginFormContainer>
      <h2>Login</h2>
      <LoginForm onSubmit={handleSubmit}>
        <Input type="text" placeholder="Username" />
        <Input type="password" placeholder="Password" />
        <Button type="submit">Login</Button>
      </LoginForm>
    </LoginFormContainer>
  );
};

export default LoginFormComponent;

Styled-components automatically generates unique class names and injects the corresponding CSS styles into the component. It also supports dynamic styles based on component props or global theme settings.

With TypeScript, styled-components provides excellent type safety. It offers auto-completion and type checking for CSS properties and props, ensuring that your styles and components are correctly typed.

Styled-components allows you to write expressive and reusable styles directly in your React components, making it easier to manage and maintain styles in your application.

Routing

React routing is a technique used to handle navigation and routing in React applications. It allows you to create multiple pages or views within a single-page application (SPA) and define how different URLs should render different components.

UnauthenticRoutes is for non login routing, and AuthenticateRoute is for already login routes.

BeforeLoginLayout and AfterLoginLayout both of them are layout.

Sourcecode : https://github.com/wahyueko22/learn-react/tree/master/my-typescript-one