https://github.com/josh-mchugh/fullstack-react

Coding Examples from the book FullStack React - The Complete Guide to React
https://github.com/josh-mchugh/fullstack-react

css javascript jsx reactjs

Last synced: about 1 month ago
JSON representation

Coding Examples from the book FullStack React - The Complete Guide to React

• Host: GitHub
• URL: https://github.com/josh-mchugh/fullstack-react
• Owner: josh-mchugh
• Created: 2023-04-29T03:01:58.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-04T22:56:18.000Z (over 1 year ago)
• Last Synced: 2024-11-11T21:33:17.667Z (3 months ago)
• Topics: css, javascript, jsx, reactjs
• Language: JavaScript
• Homepage:
• Size: 3.64 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fullstack React

## Voting App

ReactJS Application which allows for voting of products similarly to ProductHunt.

![Demonstration GIF of Voting App](./voting_app/images/demonstration.gif)

## Time Tracking App

ReactJS Application for creating, updating, and deleting timers with a small Node server. Timers can be stop, started, edited and deleted.

![Demonstration GIF of Time Tracking App](./time_tracking_app/images/demonstration.gif)

## Forms App

A simple React application demonstrating the use of form and input elements within React. This example starts off with a simple demonstration of buttons and onClick to using input and select elements with Redux and creating components for form validation.

![Demonstration GIF of Forms App](./forms/images/demonstration.gif)

## React Basics Testing

A simple React appplication with a list of text elements which are added from an input field and button. This small application was build to apply simple unit tests with behavior driven testing. Unit tests were created with Jest and Enzyme testing frameworks.

![Demonstration GIF of React Basic Testing](./testing/react-basics/images/demonstration.gif)

## Routing - Basic

In this example we explore creating a simple routing component and then mirgrating those components to React Routes. This small example display three links. Two of the links display some information while the third link displays a count down timer and navigates the user back to the root page.

![Demonstration of the React Routes application](./routing/basic/images/demonstration.gif)

## Chat App

This small chat application uses ReactJS and Redux to maintain application state. Within this example there are two chat converstations with two seperate list of messages. Redux handles the application state and the React components recieve the application state changes as props. This allows the React Components to focus on rendering HTML and minimal component state.

![Demonstration of the React and Redux](./chat/images/demonstration.gif)