https://github.com/marco-rosner/handson-react

A project to practices ReactJS using React Router, Hooks, Context API, Jest (Testing) and Typescript. Also apply Server Side Rendering (SSR) using Express server
https://github.com/marco-rosner/handson-react

context-api expressjs hooks-api-react jest reactjs ssr typescript

Last synced: 5 days ago
JSON representation

A project to practices ReactJS using React Router, Hooks, Context API, Jest (Testing) and Typescript. Also apply Server Side Rendering (SSR) using Express server

• Host: GitHub
• URL: https://github.com/marco-rosner/handson-react
• Owner: marco-rosner
• Created: 2023-07-26T21:23:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-25T19:48:46.000Z (about 2 years ago)
• Last Synced: 2024-12-30T20:48:42.161Z (over 1 year ago)
• Topics: context-api, expressjs, hooks-api-react, jest, reactjs, ssr, typescript
• Language: TypeScript
• Homepage:
• Size: 587 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Test workflow](https://github.com/marco-rosner/handson-react/actions/workflows/test-client.yml/badge.svg)](https://github.com/marco-rosner/handson-react/actions/workflows/test-client.yml)  [![Build workflow](https://github.com/marco-rosner/handson-react/actions/workflows/build-server.yml/badge.svg)](https://github.com/marco-rosner/handson-react/actions/workflows/build-server.yml)

# Hands on ReactJS

On client side, this is a project to practices ReactJS using ReactRouter, Hooks, Context API, Jest (Testing), Typescript based on react create app using typescript template

On server side, the goal is to apply ServerSide Rendering (SSR) using Vite and Express

## Print

HomeView 

![Home View](./client/handon-react.png?raw=true "Home View")

## Client project scripts

### `yarn start`

Runs the app in the development mode.\

Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\

You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.

### `yarn test:covarage`

Checks the test coverage in the project.

### `yarn build`

Builds the app for production to the `build` folder.

## Server project scripts (Server Side Rendering)

### `yarn dev`

Runs the app in the development mode.  

Open [http://localhost:4000](http://localhost:4000) to view it in the browser.

The page will reload if you make edits.  

You will also see any lint errors in the console.

### `yarn start`

Runs the app in the production mode. 

### `yarn build`

Builds the app for production to the `dist` folder.