https://github.com/sethbergman/react-sign-up
React Sign Up Component
https://github.com/sethbergman/react-sign-up
progressive-web-app pushstate react service-worker webcomponents
Last synced: about 2 months ago
JSON representation
React Sign Up Component
- Host: GitHub
- URL: https://github.com/sethbergman/react-sign-up
- Owner: sethbergman
- Created: 2017-06-06T15:31:05.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-23T02:28:40.000Z (almost 8 years ago)
- Last Synced: 2025-05-16T12:14:21.752Z (about 1 year ago)
- Topics: progressive-web-app, pushstate, react, service-worker, webcomponents
- Language: JavaScript
- Homepage:
- Size: 493 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Overview
This sign up form has a few different features that are unique to React. The sign up form itself is a modal that uses CSS animations and slides down when the page loads and slides up after the user logs in. We are going to learn about the following features for this sign up form:
- Using `state` and `props`
- CSS animations
- Event handling
- Native browser validation for forms
## Mounting with `state`
React uses the concept of _components_ which, conceptually are containers for our data and UI. Each component has several properties and methods that we will take advantage of in this post and for the rest of the series.
Additionally, a React component can define it's own state using a `state` property for handling stateful components, such as our form element today.
Using the `state` property allows us to manipulate a React component's view and data associated with the view to keep track of the local state of the component.
## What is `state`?
When we refer to a component's `state`, we mean a snapshot of the instance of the component on the page.
In regular HTML (without React), when we have a text `