Module 4: Advanced React Concepts

Lesson 13: React Forms

 

 

Forms are the backbone of user interaction in web applications. Lesson 13 dives deep into handling forms in React, providing you with the knowledge to create interactive and user-friendly interfaces.


 Key Takeaways:

 Controlled vs. Uncontrolled Components:

  Understand the difference between controlled and uncontrolled components when working with form elements.


    Controlled Components:

    Components where React controls the form elements' state.

    

    ```jsx

    class ControlledForm extends React.Component {

      constructor(props) {

        super(props);

        this.state = { value: '' };

      }


      handleChange = (event) => {

        this.setState({ value: event.target.value });

      }


      render() {

        return (

          <input type="text" value={this.state.value} onChange={this.handleChange} />

        );

      }

    }

    ```

    Uncontrolled Components:

    Components where the form elements' state is managed by the DOM.


    ```jsx

    function UncontrolledForm() {

      const inputRef = React.createRef();


      const handleSubmit = () => {

        alert('Input Value: ' + inputRef.current.value);

      };


      return (

        <>

          <input type="text" ref={inputRef} />

          <button onClick={handleSubmit}>Submit</button>

        </>

      );

    }

    ```


- Form Submission:

  Learn how to handle form submission in React and prevent the default behavior.


  ```jsx

  class SubmissionForm extends React.Component {

    handleSubmit = (event) => {

      event.preventDefault();

      // Process form data

    }


    render() {

      return (

        <form onSubmit={this.handleSubmit}>

          {/* Form fields */}

          <button type="submit">Submit</button>

        </form>

      );

    }

  }

  ```


 Lesson 14: React Form with Multiple Form Fields

 

 

Building upon Lesson 13, Lesson 14 explores handling forms with multiple input fields. Managing complex forms efficiently is crucial for creating seamless user experiences.


 Advanced Form Handling:

- State Management:

  Explore techniques for managing the state of multiple form fields.


  ```jsx

  class MultiFieldForm extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        username: '',

        email: '',

        password: '',

      };

    }


    handleChange = (event) => {

      this.setState({ [event.target.name]: event.target.value });

    }


    render() {

      return (

        <form>

          <input type="text" name="username" value={this.state.username} onChange={this.handleChange} />

          <input type="email" name="email" value={this.state.email} onChange={this.handleChange} />

          <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />

        </form>

      );

    }

  }

  ```


- Form Validation:

  Implement form validation to ensure data integrity and user-friendly error handling.


  ```jsx

  class ValidationForm extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        email: '',

        isValid: true,

      };

    }


    handleChange = (event) => {

      // Validate email format

      const isValid = /\S+@\S+\.\S+/.test(event.target.value);

      this.setState({ email: event.target.value, isValid });

    }


    render() {

      return (

        <form>

          <input type="email" value={this.state.email} onChange={this.handleChange} />

          {this.state.isValid ? null : <span style=>Invalid email format</span>}

        </form>

      );

    }

  }

  ```


 Lesson 15: React Form using Libraries

 

 

Lesson 15 introduces the use of libraries to streamline form development in React. Leveraging third-party libraries can significantly enhance productivity and maintainability.


 Popular Form Libraries:

- Formik:

  A powerful library for building forms in React, Formik simplifies form handling, validation, and submission.


  ```jsx

  import { Formik, Form, Field, ErrorMessage } from 'formik';


  const MyForm = () => (

    <Formik

      initialValues=

      onSubmit={(values) => {

        // Handle form submission

      }}

    >

      <Form>

        <Field type="text" name="username" />

        <ErrorMessage name="username" component="div" />

        <Field type="email" name="email" />

        <ErrorMessage name="email" component="div" />

        <button type="submit">Submit</button>

      </Form>

    </Formik>

  );

  ```


- React Hook Form:

  A minimalistic library that focuses on providing a great developer experience with React hooks.


  ```jsx

  import { useForm } from 'react-hook-form';


  const MyForm = () => {

    const { register, handleSubmit, errors } = useForm();


    const onSubmit = (data) => {

      // Handle form submission

    };


    return (

      <form onSubmit={handleSubmit(onSubmit)}>

        <input name="username" ref={register({ required: true })} />

        {errors.username && <span>This field is required</span>}

        <input name="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} />

        {errors.email && <span>Invalid email format</span>}

        <button type="submit">Submit</button>

      </form>

    );

  };

  ```


 Benefits of Using Libraries:


Code Reusability:

  Libraries provide reusable components and utilities, reducing the amount of boilerplate code.


Community Support:

  Benefit from community-driven solutions, updates, and bug fixes when using popular form libraries.

 

 

 Lesson 16: React Routing

 

 

Lesson 16 explores React Routing, a crucial aspect of building single-page applications. Efficient navigation is essential for creating a seamless user experience.


 Getting Started with React Router:

- Installation:

  Install React Router in your project.


  ```

  npm install react-router-dom

  ```


- Basic Usage:

  Set up routes using `BrowserRouter` and `Route` components.


  ```jsx

  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';


  const App = () => (

    <Router>

      <Switch>

        <Route exact path="/" component={Home} />

        <Route path="/about" component={About} />

        <Route path="/contact" component={Contact} />

      </Switch>

    </Router>

  );

  ```


 Advanced Routing Concepts:


- Nested Routes:

  Nest routes to create complex navigation structures.


  ```jsx

  const App = () => (

    <Router>

      <Switch>

        <Route exact path="/" component={Home} />

        <Route path="/products" component={Products} />

        <Route path="/products/:id" component={ProductDetails} />

      </Switch>

    </Router>

  );

  ```


- Programmatic Navigation:

  Use the `history` object or `useHistory` hook for programmatic navigation.


Modules