As I wait for my team to switch the VM back on so that I can get back to work, I decided to hack together a quick login page, for a coding challenge I accepted to do last week. (in the spirit of being apart of a coding community, never been apart of one before).
In my years of programming, there are a few good practices, I neglected, one of the most important ones was creating a repo. (I have lost many a code due to this neglect)
So here is the codebase of the "Identity Platform For The People" (I just had to build it for the people it's a thing now)
This is more of an intro and my official acceptance to the #CodingWithKamo challenge
I have been yearning to learn a new language, and I decided to to take on any new challenge I find on the internet with reasonml Who does not love a challenge
Let us begin
The challenge was to create a login page, here is how I went about it
"Identity Platform For The People"
After cloning the project below I run the modified script below from reasonML docs
replacing "-my-react-app" with "." so it can generate the project within the cloned project and not create a new folder
npm install --global bs-platform@6.2.1
bsb -init . -theme react-hooks
npm install && npm start
in another tab
npm run server
With that done I created a folder named components inside of /src
/src/components
Input.re
[@react.component]
let make = (~name) =>{
<input id={name} placeholder={name} type_="text"></input>;
};
/src/Login
Login.re
[@react.component]
let make = (~name) =>{
<div>
<Input name="username"/>
<Input name="password"/>
<button type_="submit">{ReasonReact.string(name)}</button>
</div>
};
/src
Index.re
// Entry point
[@bs.val] external document: Js.t({..}) = "document";
ReactDOMRe.renderToElementWithId(<Login name="Login" />, "login");
and for all those that have used react, are used to having a div element with a _login id within the index.html page
/
index.html
//
<body>
<div id="login"></div>
//
</body>
This is my submission to the first #CodingWithKamo
Learning Points
type is reserved withing reason, using type_="" allows the use of it within input elements
Coming Up
This is the first of many, there is still a lot that needs to be done, the first thing is styling.
Top comments (0)