Creating the Login component
Let’s create a folder and name it “Login.” As stated above, this folder will contain all of our component’s code. Inside this folder, let’s create a JSX file and name it “Login.jsx”.
This Login.jsx
will act as a container and will do nothing but “contain” the child components. On this level, you can control the overall layout of the component. You want to keep UI layout separate from the child components. If it’s confusing now, don’t worry, it’ll make more sense soon.
Login.jsx
Remember, Bulma was added globally into the index.js
file earlier. So you don’t need to add it again, so let’s create the first React component with Bulma.
Creating the Login form container
First, create the user interface that contains the form. Remember, you should keep the actual form separate from the Login
component. That way you can reuse the form itself anywhere in the web application...