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.
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
-[Material-UI]
-[Babel/core]
-[Reactjs -16]
-[Webpack -4]
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.
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
-
Software Utilized