React-Registration-Login Form

User Info

With This React Application

I Wanted to see how I could design a registration Login Form using React. I utilized React hooks and controlled components to put it together. React useState is used in order to read the current value of first name, lastname and email that would be saved to state.Then come the functions setContact, handleChange. These are used to save a new state of two variables, name and contact. After the new state is saved, our react component gets re-rendered.

---

I Incorporated state change listeners

to firstname and lastname fields and their new state is saved using the respective setContact function. This type of form component is called a controlled component. On click of submit button, validate function is called. This function checks if values of first name and lastname are valid or not. After performed validation function returns true, handleChange will be triggered. Rendered on the screen in an h1 as text while the user types their entery. Although event handlers and onclick appear to be rendered inline, they will be collected and implemented using event delegation.

Here's A Brief Look @ The Application(Gif of React Reg Login Form).

Building Encapsulated Components That 


Manage Their Own State, Then Composing 


Them To Make Complex UIs.

check out a live demo of the project here http://react-registration-login-form.surge.sh

Features

-[Material-UI]

-[Babel/core]

-[Reactjs -16]

-[Webpack -4]

---

Recommended Tools

The following tools are recommended for a React project. Also you will find included below some links for building some complex UI animations and conversion of SVG image into Data URL with the help of Webpack loader.

• Material-UI UI and components library.
• ESLint-loader, When using with transpiling loaders(like babel-loader),make sure they are in correct order(bottom to top). Otherwise files will be checked after being processed by babel-loader.
• CSS-Tricks, For building complex UI animations in React.
• Webpack CSS-loaders interprets @import and url() like import/require() and will resolve them.
• SVG-React-Webpack To utilize an SVG image in your React project, it will have to be transformed into a Data URL. We will need an appropriate webpack loader in our bundler.

Installation

git clone https://github.com/FernandoNunez-Dev/React-Reg-Login-Form

cd React-Reg-Login-Form

npm install

npm start

Runs the app in the development mode.
Open 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.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

• Author

  • FernandoNunez-Dev

• Github

  • https://github.com/FernandoNunez-Dev

• Software Utilized

  • Reactjs -16
  • Babel/core
  • Webpack -4
  • Material-UI
  • Nodejs -LTS
  • ESLint-loader
  • CSS-Tricks
  • Webpack CSS-loaders
  • SVG-React-Webpack