Creating Stylish and Validated Forms in React Applications with Reactstrap

🎯 What Will You Learn in This Guide?

This guide teaches you step by step how to create a professional sign-in form in your React app using the Reactstrap library.
Thanks to Reactstrap, you can integrate Bootstrap 4 components into the React ecosystem and add instant validation and user feedback (FormFeedback).

⚙️ 1. Project Setup

🧱 Create new React app

npx create-react-app genixnode-form-ornek
cd genixnode-form-ornek
npm start

📦 Install Reactstrap and Bootstrap 4

npm install reactstrap@8.9.0
npm install bootstrap@4

💡 Reactstrap is not fully compatible with Bootstrap 5. That's why it's important to use Bootstrap 4.x version.

🎨 Add Bootstrap styles to the project Add the following line to the src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Now Bootstrap 4 styles are automatically enabled in all Reactstrap components.

---

🧩 2. Using Form Components

Let's create the basic form structure in the App.js file.

import { Component } from 'react';
import { Button, Form, FormGroup, Input, Label } from 'reactstrap';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Kullanıcı Girişi</h2>
        <Form className="form">
          <FormGroup>
            <Label for="kullaniciMail">E-posta</Label>
            <Input type="email" name="email" id="kullaniciMail" placeholder="ornek@ornek.com" />
          </FormGroup>
          <FormGroup>
            <Label for="sifre">Şifre</Label>
            <Input type="password" name="password" id="sifre" placeholder="********" />
          </FormGroup>
          <Button color="primary">Giriş Yap</Button>
        </Form>
      </div>
    );
  }
}

export default App;

This component creates a simple login form with email and password fields.

---

🎨 3. Add Simple Styling

Center the form and give it a more modern look by editing the app.css file:

.App {
  border: 2px solid #d3d3d3;
  border-radius: .5em;
  margin: 100px auto;
  padding: 1em;
  width: 600px;
  text-align: left;
}

label {
  font-weight: 600;
}

---

✅ 4. Adding Instant Validation You can perform form validation with Reactstrap's FormFeedback and FormText components.

📧 Adding an email verification method

validateEmail(e) {
  const emailRex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const { validate } = this.state;
  validate.emailState = emailRex.test(e.target.value)
    ? 'has-success'
    : 'has-danger';
  this.setState({ validate });
}

This function checks the format of the entered e-mail address and reflects the result to the state.

💬 Adding feedback messages

<FormFeedback>
  Hata! E-posta adresiniz hatalı görünüyor. Lütfen düzeltin.
</FormFeedback>
<FormFeedback valid>
  Harika! E-posta adresi doğru formatta.
</FormFeedback>
<FormText>Kullanıcı adınız genellikle e-posta adresinizdir.</FormText>

If the user enters the wrong email, he/she will receive a red message, and if the user enters the correct email, he/she will receive a green message.

---

📨 5. Submitting the Form

Instead of sending the form data to an API, let's print it to the console as an example.

submitForm(e) {
  e.preventDefault();
  console.log(`Giriş Yapılmak İstendi. E-posta: ${this.state.email}`);
}

At this point in the real project, data is sent to the API with fetch() or axios.post().

---

💡 6. Additional Features

Color variations: <Button color="success" />, <Button color="danger" />

Inline form: Align fields horizontally using <Form inline>

Responsive structure: Provide mobile compatibility with Container, Row, Col components

---

💬 Frequently Asked Questions (FAQ)

1. What is the difference between Reactstrap and Bootstrap?

Reactstrap turns Bootstrap classes into React components. This makes state and prop management easier.

2. Why should I use Bootstrap 4?

Reactstrap v8.9.0 is compatible with Bootstrap 4 architecture. Errors may occur with Bootstrap 5.

3. Can it be used with hooks?

Yes, Reactstrap is fully compatible with useState and useEffect hooks.

4. How to add different input types?

You can create new input types with props such as type="radio", type="file".

---

🏁 Result

Thanks to Reactstrap, you can develop fast and impressive user interfaces by combining the aesthetic appearance of Bootstrap 4 with the React form structure. With this guide, you've easily integrated elements like validation, tooltips, and error handling into your React project.

🚀 Create your new React project on the GenixNode platform now and take the user experience to the next level by integrating this structure into your own application!

yaml