December 20, 2018 - Cloud Web Designs

React login form example

By Karel Jordaan / On

Another React.js example is up on my site for you to look at and try. Its just a simple little user name and email login app.
Be aware though that I make it connect to a very simple mysqli database which I setup and connect to using PHP so the information you enter will be stored in the database and then displayed back to you on the right hand side of the page.

Not to worry though because no information you enter will be used for any reason at all and by just clicking the red delete button which you will notice at the left bottom of the table where the information gets displayed, it will delete all of the database content completely.

React is a javascript library that was developed by Facebook and the deal in a nutshell about React is that every single element that displays to the DOM/webpage is reffered to as a component.

A component in React represents a HTML5 tag,it can be a heading tag or a input tag or button tag ect. that gets returned to the DOM or web page via the render method and then gets displayed. Ideally best practice in React is to keep one element per component, that is what they suggest in their documentation because it makes any edits or updates or fixes easier to maintain in the long run especially if you are building a very large application. You can however put more than one element in a component if you wrap them all in div tags or in the case of a form you wrap all in a form tag.

In my form example I coded it using classes and all the functions contained within the class. There is also alot of vanilla javascript contained within those classes and it all runs fine seeing as though React is a javascript framework. Im not sure if it would be best practice but for now it works fine.

I used vanilla javascript AJAX calls to the back end to pass the input values to PHP in order to connect to Mysqli and store the information as well as recall it from the database to display and then also to delete it. Also used little bit of my own CSS with some media queries at certain break points and used bootstrap for a bit of styling.

If you would like to have a look at the code you can find it on my github page which you will be taken to if you click on the github icon at the right hand bottom of my website www.cloudwebdesigns.co.za
It was a simple application but really loved building it. More examples to follow.

Thanks for reading.