DEV Community: Ahmed Mansour

4 React Refs Examples

Ahmed Mansour — Mon, 25 Nov 2019 17:44:50 +0000

Need to access native DOM nodes in React? Ref is here to help you 👌🏽

In this tutorial we will cover some of the common Ref use-cases:

Managing Focus
Text Selection
Media playback
Triggering Imperative Animations

Originally posted on Nordschool.

Using useRef hook, we can use the Ref API in function components.

All the code snippets will be using React Hooks & function components. But, you can easily write the same logic in Class components.

Are you ready? Let's start with managing focus! 😎

Managing Focus

Use-case: We would like to use React to put the focus on an HTML element.

Here is a simple version of how we can focus an input field.. 👇🏽

import React, { useRef } from 'react';

const RefFocus = () => {
  const inputRef = useRef(null);

  function focusTitle() {
    inputRef.current.focus();
  }

  return (
    <div>
      <label>You have 3 wishes...</label>
      <input ref={inputRef} />
      <button onClick={focusTitle}>Focus & Wish</button>
    </div>
  );
};

export default RefFocus;

By calling the function focusTitle we can call the native DOM's focus() function. 🔥

Next in line is highlighting text... 🖋

Text Selection

Use-case: We would like to use React to select a textarea's value.

Here is a minimal example of how you could do that:

import React, { useRef } from 'react';

const RefSelectAll = () => {
  const inputRef = useRef(null);

  function selectAll() {
    const hasText = inputRef.current.value.length > 0;

    if (hasText) {
      inputRef.current.select();
    }
  }

  return (
    <div>
      <label>What is the meaning of life?</label>
      <textarea ref={inputRef} />
      <button onClick={selectAll}>Select All</button>
    </div>
  );
};

export default RefSelectAll;

We can extend this technique further! Let's do a bit more fancy things like auto-copy some text.

function copyMeaningOfLife() {
  const hasText = inputRef.current.value.length > 0;

  if (hasText) {
    inputRef.current.select();
    document.execCommand('copy');
    // ... Let user that their meaning of life answer is copied
  }
}

So now you can do something like this...✨

Do you feel like you already have super-powers? 😁

Let's see what else you can do...what about media players? 🎵

Media playback

Use-case: We would like to use React to control HTML's native video element.

Here is how a minimal media player may look like:

import React, { useRef } from 'react';

const VideoPlayer = () => {
  const videoRef = useRef(null);

  function playVideo() {
    videoRef.current.play();
  }

  function pauseVideo() {
    videoRef.current.pause();
  }

  return (
    <div>
      <video ref={this.myVideo} width="400">
        {/* Of course it's the big buck bunny! */}
        <source src="big-buck-bunny.mp4" type="video/mp4" />
      </video>
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
    </div>
  );
};

export default VideoPlayer;

Now you can play & pause your video using React.

If you read the React Docs, you will notice they mention one more use-case. It is about triggering animations.

Let's have a look...

Triggering Imperative Animations

Use-case: We would like to use React to listen to DOM's events & trigger some animations.

Here is a simple version of you can achieve this:

P.S: The code snippet itself doesn't have any animations! 😅

With that said, you can pretty much add all the animations you want following the same technique.

import React, { useEffect, useState, useRef } from 'react';

function ImperativeAnimations() {
  const [background, setBackground] = useState('white');

  const divRef = useRef();

  function onScroll(params) {
    const div = divRef.current;
    const { y } = div.getBoundingClientRect();
    const backgroundColor = y <= 0 ? 'white' : 'pink';
    setBackground(backgroundColor);
  }

  useEffect(() => {
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll');
    };
  }, []);

  return (
    <div ref={divRef} style={{ height: '120vh', background: background }}>
      Scroll to turn background white.
    </div>
  );
}

export default ImperativeAnimations;

Here is how our sophisticated animations look like: 😁

Now you know your way around the basic use-cases of Refs, rock on... 🙏🏽

Support

Enjoyed the article? Share the summary thread on twitter.

// Detect dark theme var iframe = document.getElementById('tweet-1199016507772166146-687'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1199016507772166146&theme=dark" }

Better Code Monday Newsletter

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the previous newsletter issues and subscribe.

5 React Data-Fetching Patterns

Ahmed Mansour — Wed, 20 Nov 2019 08:36:11 +0000

Sooner or later you will need to fetch data from an API, let's have a look at how we can handle data in React!👌

In this tutorial, we will cover the most common data fetching patterns in React.

Originally posted on Nordschool.

Are you read? Let's do this! 💪

Overview

Let's have a look at the bigger picture first and then dig deeper.

The patterns we will cover:

Standalone
HOC
With Hooks
Render Props
Redux Custom Middleware

Project structure

I have created a small react project to show different data fetching patterns. The project was initialized create-react-app has a standard structure. 👇

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── actions
│   │   ├── api.js
│   │   ├── index.js
│   │   └── types.js
│   ├── hooks
│   │   ├── UseDataApi.js
│   ├── components
│   │   ├── HOC.js
│   │   ├── Standalone.js
│   │   ├── PostsList.js
│   │   ├── RenderProps.js
│   │   ├── WithCustomMiddleware.js
│   │   ├── WithCustomHook.js
│   │   └── WithHooks.js
│   ├── index.css
│   ├── index.js
│   ├── middleware
│   │   └── api.js
│   ├── reducers
│   │   └── index.js
│   ├── serviceWorker.js
│   └── store
│       └── index.js
└── yarn.lock

We will be dealing with components.

Here is how the main root component looks like:

// App.js
import React from 'react';
import './App.css';

import Standalone from './components/Standalone';
import HOC from './components/HOC';
import WithHooks from './components/WithHooks';
import WithCustomHook from './components/WithCustomHook';
import RenderProps from './components/RenderProps';
import WithCustomMiddleware from './components/WithCustomMiddleware';
import PostsList from './components/PostsList';

function App() {
  return (
    <div className="App">
      <h3>Standalone</h3>
      <Standalone />
      <h3>HOC</h3>
      <HOC />
      <h3>WithHooks</h3>
      <WithHooks />
      <h3>With Custom Hook</h3>
      <WithCustomHook />
      <h3>Render Props</h3>
      <RenderProps children={PostsList} />
      <h3>With Custom Middleware</h3>
      <WithCustomMiddleware />
    </div>
  );
}

export default App;

Let's start with the most compact pattern...

Standalone

This standalone component handles both fetching and rendering the data.

// components/Standalone.js
import React, { Component } from 'react';
import axios from 'axios';

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

// API END POINT
const POSTS_SERVICE_URL = 'https://jsonplaceholder.typicode.com/posts';

class Standalone extends Component {
  state = {
    // Initial state.
    isFetching: false,
    posts: []
  };

  render() {
    return (
      <Paper>
        <Table aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Id </TableCell>
              <TableCell>Title</TableCell>
              <TableCell>Body</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.state.posts.map(row => (
              <TableRow key={row.id}>
                <TableCell component="th" scope="row">
                  {row.id}
                </TableCell>
                <TableCell>{row.title}</TableCell>
                <TableCell>{row.body}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <p>{this.state.isFetching ? 'Fetching posts...' : ''}</p>
      </Paper>
    );
  }

  componentDidMount() {
    this.fetchPosts();
  }

  async fetchPostsAsync() {
    try {
      this.setState({ ...this.state, isFetching: true }); // Sets loading state.
      const response = await axios.get(POSTS_SERVICE_URL);
      this.setState({
        ...this.state,
        isFetching: false,
        posts: response.data.slice(0, 5) // Take first 5 posts only
      });
    } catch (e) {
      console.log(e);
      this.setState({ ...this.state, isFetching: false });
    }
  }

  fetchPosts = this.fetchPostsAsync;
}

export default Standalone;

Let's see if we can separate the view from the data fetching 🤓...

HOC

The Higher-Order Component (HOC) pattern is common in React. Components like this sometimes referred to as container components.

The idea is straight forward, data-fetching gets separated from data-presentation.

// HOC.js
import React, { Component } from 'react';
import Simple from './Simple';

import axios from 'axios';

const POSTS_SERVICE_URL = 'https://jsonplaceholder.typicode.com/posts';

class HOC extends Component {
  state = {
    isFetching: false,
    posts: []
  };

  render = () => (
    <Simple data={this.state.posts} isFetching={this.state.isFetching}></Simple>
  );

  componentDidMount() {
    this.fetchPosts();
  }

  async fetchPostsAsync() {
    try {
      this.setState({ ...this.state, isFetching: true });
      const response = await axios.get(POSTS_SERVICE_URL);
      this.setState({
        ...this.state,
        isFetching: false,
        posts: response.data.slice(0, 5)
      }); // Take first 5 posts only
    } catch (e) {
      console.log(e);
      this.setState({ ...this.state, isFetching: false });
    }
  }

  fetchPosts = this.fetchPostsAsync;
}

export default HOC;

The presentation component would look something like this:

// PostsList.js
import React from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const PostsList = props => {
  return (
    <Paper>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Id </TableCell>
            <TableCell>Title</TableCell>
            <TableCell>Body</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.data.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.id}
              </TableCell>
              <TableCell>{row.title}</TableCell>
              <TableCell>{row.body}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <p>{props.isFetching ? 'Fetching posts...' : ''}</p>
    </Paper>
  );
};

export default PostsList;

But what if I told you that there might be even a better way of doing things? 😁

Let's have a look at how that would work with Hooks.

With Hooks

This pattern is similar to HOC but it uses a functional component together with hooks.

// WithHooks.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Simple from './Simple';

const POSTS_SERVICE_URL = 'https://jsonplaceholder.typicode.com/posts';

function WithHooks() {
  const [data, setData] = useState({ posts: [], isFetching: false });

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setData({ ...data, isFetching: true });
        const response = await axios.get(POSTS_SERVICE_URL);
        setData({
          ...data,
          posts: response.data.slice(0, 5),
          isFetching: false
        });
      } catch (e) {
        console.log(e);
        setData({ ...data, isFetching: false });
      }
    };
    fetchUsers();
  }, []); // Runs once

  return <Simple data={data.posts} isFetching={data.isFetching} />;
}

export default WithHooks;

We can take this a step further and even create a generic hook to fetch data from any API.

A simple version of that generic data fetching hook:

// hooks/UseDataApi.js
import { useEffect, useState } from 'react';
import axios from 'axios';

const useDataApi = url => {
  // This is just for demo purposes, you probably want to separate the data from loading state and potentially add other states such as failures, etc..
  const [dataState, setDataState] = useState({ data: [], isFetching: false }); 
  const [endpointUrl] = useState(url);

  useEffect(() => {
    const fetchDataFromApi = async () => {
      try {
        setDataState({ ...dataState, isFetching: true });
        const response = await axios.get(endpointUrl);
        setDataState({
          ...dataState,
          data: response.data,
          isFetching: false
        });
      } catch (e) {
        console.log(e);
        setDataState({ ...dataState, isFetching: false });
      }
    };
    fetchDataFromApi();
  }, []); // Runs once

  return [dataState];
};

export default useDataApi;

Once you have your hook ready, it can be used like this...

// components/WithCustomHook.js
import React from 'react';
import UseDataApi from '../hooks/UseDataApi';
import PostsList from './PostsList';

const POSTS_SERVICE_URL = 'https://jsonplaceholder.typicode.com/posts';

function WithHooks() {
  const [dataState] = UseDataApi(POSTS_SERVICE_URL);

  return (
    <PostsList
      data={dataState.data.slice(0, 5)}
      isFetching={dataState.isFetching}
    />
  );
}

export default WithHooks;

We recommend this pattern for most cases! This pattern is reusable and does separation of concern well.

Ok, so far so good.

But, what if you have many presentation components that display the same data?

Generally speaking, Hooks can be cover most of your logic-encapsulation cases. But, it may have a few limitations.

Render Props

You could use hooks instead of render props for this use case but render props is another viable option.

Render props act as a reusable wrapper for different presentation components.

// RenderProps.js
import { Component } from 'react';
import axios from 'axios';

const POSTS_SERVICE_URL = 'https://jsonplaceholder.typicode.com/posts';

class RenderProps extends Component {
  state = {
    isFetching: false,
    data: []
  };

  render = () => this.props.children(this.state);

  componentDidMount() {
    this.fetchPosts();
  }

  async fetchPostsAsync() {
    try {
      this.setState({ ...this.state, isFetching: true });
      const response = await axios.get(POSTS_SERVICE_URL);
      this.setState({
        ...this.state,
        isFetching: false,
        data: response.data.slice(0, 5)
      }); // Take first 5 posts only
    } catch (e) {
      console.log(e);
      this.setState({ ...this.state, isFetching: false });
    }
  }

  fetchPosts = this.fetchPostsAsync;
}

export default RenderProps;

That is all for Vanilla React patterns! 🙌

Ok what about Redux, how would this look like? Let me give you a sneak peek.

Redux Custom Middleware

Here is a simple example using a custom middleware.

// components/WithCustomMiddleware.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PostsList from './PostsList';
import { fetchPosts } from '../actions';

class WithCustomMiddleware extends Component {
  state = {};

  componentDidMount() {
    this.props.fetchPosts();
  }

  render = () => (
    <PostsList
      data={this.props.data}
      isFetching={this.props.isFetching}
    ></PostsList>
  );
}

const mapStateToProps = ({ data = [], isFetching = false }) => ({
  data,
  isFetching
});

export default connect(
  mapStateToProps,
  { fetchPosts }
)(WithCustomMiddleware);

Not sure how does the Redux middleware work? check out this short tutorial about how to create a custom redux middleware.

That is it, now you know how to handle data fetching in React! ✋

Support

Enjoyed the article? Share the summary thread on twitter.

Nordschool

@nordschool

Most common API data fetching patterns in @reactjs 👌

- Standalone
- HOC
- With Hooks
- Render Props
- Redux Custom Middleware

THREAD... 👇

08:38 AM - 23 Oct 2019

1 2

Better Code Monday Newsletter

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the previous newsletter issues and subscribe.

Pain-Free Forms with React Hook Form

Ahmed Mansour — Mon, 18 Nov 2019 14:02:31 +0000

Originally posted on Nordschool.

Sooner or later you will need to deal with forms in React! Let's check how to deal with things like form data-validations! 👀

In this tutorial, we will cover how to do work with forms and do data-validation in React. Using a library called react-hook-form.

If you are not sure how to use forms with React, check out these 2 basic React forms patterns.

react-hook-form is a library to make dealing with data in forms easy. Data validation is especially easy when using react-hook-form.

Overview:

With Basic validation
Validation For Nested Fields
Validation Schemas with Yup
Custom Input Field
Validation with Material-UI

Let's get into it right away! 💪

With Basic validation

Let's start with how the basic validation may look like. 👇

import React from 'react';

import useForm from 'react-hook-form';

const LoginFormWithValidation = () => {
  const { 
    handleSubmit, // Submit handler wrapper
     register,  // Register form fields
     errors  // Errors object including error messages
     } = useForm();

  const onSubmit = values => {
    console.log(values); // email & password input's values in an object.
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email:</label>
      <input
        name="email"
        type="email"
        aria-describedby="emailError"
        ref={register({
          required: 'Email Message Required Message', // Error message when field is left empty.
          pattern: { // Validation pattern
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
            message: 'invalid email address' // Error message when validation fails.
          }
        })}
      />
      {errors.email ? (
        //
        <span id="emailError">{errors.email.message}</span>
      ) : (
        ''
      )}

      <label htmlFor="password">Password:</label>
      <input
        name="password"
        type="password"
        ref={register({
          validate: value => value !== 'test123' || 'Too common password, you can do better!' // Validation error message
        })}
        aria-describedby="passwordError"
      />
      {errors.password ? (
        <span id="passwordError">{errors.password.message}</span>
      ) : (
        ''
      )}

      <input type="submit" value="Submit" />
    </form>
  );
};

export default LoginFormWithValidation;

At this point, the main focus is the validation. For now, we will be using regular HTML inputs here. 😇

Let see next how we can share the state & validation rules across nested form elements.

Validation For Nested Fields

react-hook-form takes advantage of React Context. It allows you to provide a form context using FormContext. And read the context using a hook called useFormContext.

Since we are talking about the Context API! Check out how to do state management in React using React hooks and the Context API. 🤓

import React from 'react';

import useForm, { FormContext } from 'react-hook-form';
import EmailInput from './EmailInput';

const LoginFormWithNestedInput = () => {
  const methods = useForm();

  const onSubmit = values => {
    console.log(values);
  };

  return (
    // Initialise context with all form hook methods
    <FormContext {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        {/* EmailInput is a nested input field. */} 
        <EmailInput name="email"></EmailInput>
        <label htmlFor="password">Password:</label>
        <input
          name="password"
          type="password"
          ref={methods.register({
            validate: value => value !== 'test123' || 'You can do better'
          })}
          aria-describedby="passwordError"
        />
        {methods.errors.password ? (
          <span id="passwordError">{methods.errors.password.message}</span>
        ) : (
          ''
        )}

        <input type="submit" value="Submit" />
      </form>
    </FormContext>
  );
};

export default LoginFormWithNestedInput;

So far so good, what about the EmailInput component you wonder? 🧐

Here is how it looks like...

import React, { Fragment } from 'react';
import { useFormContext } from 'react-hook-form';

const EmailInput = props => {
  const { register, errors } = useFormContext(); // Regular form methods such as register is available from form context.
  return (
    <Fragment>
      <label htmlFor={props.name}>Email:</label>
      <input
        name={props.name}
        type="email"
        aria-describedby={`${props.name}-emailError`}
        ref={register({
          required: 'Required',
          pattern: {
            // Allows only nordschool.com emails
            value: /^[A-Z0-9._%+-]+@nordschool.com/i,
            message: 'Invalid email address - Only Nordschool domain is allowed'
          }
        })}
      />
      {errors[props.name] ? (
        <span id={`${props.name}-emailError`}>
          {errors[props.name].message}
        </span>
      ) : (
        ''
      )}
    </Fragment>
  );
};

export default EmailInput;

A common use-case for form validations is to use validation schemas.

Validation Schemas

react-hook-form allows declaring validation schemas. Using another validation library called yup we can define validation rules.

Yup is a JS object schema validator and object parser. The API is similar to Joi but smaller and more performant which makes it a good-fit for client-apps.

Using this setup, here is how a simple sign-up form may look like 🙌....

import React from 'react';

import useForm, { FormContext } from 'react-hook-form';
import EmailInput from './EmailInput';
import AddressInputs, { AddressSchema } from './AddressInputs';

import { string as yupstring, object as yupobject } from 'yup';

const SignupFormSchema = yupobject().shape({
  email: yupstring()
    .required('Email is unfortunately required')
    .email('Please add a real email'),
  name: yupstring().required('Name is important, what should we call you?'),
  ...AddressSchema // Custom schema imported from address inputs.
});

const SignupForm = () => {
  const methods = useForm({ validationSchema: SignupFormSchema });

  const onSubmit = values => {
    console.log(values);
  };

  return (
    <FormContext {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <label htmlFor="name"> Name:</label>
        <input
          name="name"
          type="text"
          aria-describedby="nameError"
          ref={methods.register()}
        />
        {methods.errors.name ? (
          <span id="nameError">{methods.errors.name.message}</span>
        ) : (
          ''
        )}
        <EmailInput name="email"></EmailInput>
        <AddressInputs name="email"></AddressInputs>
        <input type="submit" value="Search" />
      </form>
    </FormContext>
  );
};

export default SignupForm;

And the AddressInputs with their custom schema...

import React, { Fragment } from 'react';
import { useFormContext } from 'react-hook-form';

import { string as yupstring } from 'yup';

export const AddressSchema = {
  streetAddress: yupstring().required('Street address is required!'),
  postalCode: yupstring()
    .length(4)
    .required('required!'),
  city: yupstring().required('City is required!')
};

const AddressInputs = props => {
  const { register, errors } = useFormContext();
  return (
    <Fragment>
      <label htmlFor="stressAddress">Street Address:</label>
      <input
        name="streetAddress"
        type="text"
        aria-describedby="streetAddressError"
        ref={register()}
      />
      {errors.streetAddress ? (
        <span id="streetAddressError">{errors.streetAddress.message}</span>
      ) : (
        ''
      )}
      <label htmlFor="postalCode">Postal Code:</label>
      <input
        name="postalCode"
        type="text"
        aria-describedby="postalCodeError"
        ref={register()}
      />
      {errors.postalCode ? (
        <span id="postalCodeError">{errors.postalCode.message}</span>
      ) : (
        ''
      )}

      <label htmlFor="city">City:</label>
      <input
        name="city"
        type="text"
        aria-describedby="cityError"
        ref={register()}
      />
      {errors.city ? <span id="cityError">{errors.city.message}</span> : ''}
    </Fragment>
  );
};

export default AddressInputs;

If you noticed we are repeating that input field pattern all over the place! Let's encapsulate the input field elements in an own component. 😎

Custom Input Field

import React, { Fragment } from 'react';

const InputField = props => {
  return (
    <Fragment>
      <label htmlFor={props.name}>{props.label}</label>
      <input
        name={props.name}
        type={props.type || 'text'}
        aria-describedby={`${props.name}Error`}
        ref={props.registerFn}
      />
      {props.error ? (
        <span id={`${props.name}Error`}>{props.error.message}</span>
      ) : (
        ''
      )}
    </Fragment>
  );
};

export default InputField;

Now our AddressInputs could be refactored to look more like this...

import React, { Fragment } from 'react';
import { useFormContext } from 'react-hook-form';
import InputField from './InputField';
import { string as yupstring } from 'yup';

export const AddressSchema = {
  streetAddress: yupstring().required('Street address is required!'),
  postalCode: yupstring()
    .length(4)
    .required('required!'),
  city: yupstring().required('City is required!')
};

const AddressInputs = props => {
  const { register, errors } = useFormContext();
  return (
    <Fragment>
      <InputField
        label="Street Address:"
        name="stressAddress"
        error={errors.streetAddress}
        registerFn={register()}
      ></InputField>
      <InputField
        label="Postal Code:"
        name="postalCode"
        error={errors.postalCode}
        registerFn={register()}
      ></InputField>
      <InputField
        label="City:"
        name="stressAddress"
        error={errors.city}
        registerFn={register()}
      ></InputField>
    </Fragment>
  );
};

export default AddressInputs;

Much nicer! 👌

Ok so far so good, now you know enough to get you pretty far!

What about using a component library?

Let have a quick peek on how we can use react-hook-form and material-ui together.

Validation with Material-UI

import React from 'react';
import useForm from 'react-hook-form';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

import { string as yupstring, object as yupobject } from 'yup';

const ContactFormSchema = yupobject().shape({
  email: yupstring()
    .required('Email is required')
    .email('Please enter a valid email'),
  message: yupstring().required('Please tell us how we can help you'),
  name: yupstring().required('Name is important, what should we call?')
});

const ContactForm = () => {
  const { register, errors, handleSubmit } = useForm({
    validationSchema: ContactFormSchema
  });

  const onSubmit = values => console.log(values);
  return (
    <form autoComplete="off" onSubmit={handleSubmit(onSubmit)} noValidate>
      <TextField
        id="name"
        label="Name"
        name="name"
        inputRef={register}
        placeholder="Joe"
        margin="normal"
        variant="outlined"
        error={errors.name ? true : false}
        helperText={errors.name ? errors.name.message : ''}
      />
      <TextField
        id="email"
        label="Email"
        name="email"
        inputRef={register}
        placeholder="example@nordschool.com"
        margin="normal"
        variant="outlined"
        error={errors.email ? true : false}
        helperText={errors.email ? errors.email.message : ''}
      />
      <TextField
        required
        id="message"
        multiline
        rows="4"
        name="message"
        inputRef={register}
        label="How can we help you today?"
        placeholder="Some pizza please!"
        margin="normal"
        variant="outlined"
        error={errors.message ? true : false}
        helperText={errors.message ? errors.message.message : ''}
      />
      <Button variant="contained" type="submit">
        Submit
      </Button>
    </form>
  );
};

export default ContactForm;

That is it, now your basic form-validation training is complete! 🎖️

Support

Enjoyed the article? Share the summary thread on twitter.

Nordschool

@nordschool

Let's check how to do work with forms and do data-validation in React. Using @HookForm. 👀

- With Basic validation
- Validation For Nested Fields
- Validation Schemas with Yup
- Validation with @MaterialUI

#NordschoolTutorial

THREAD… 👇

13:04 PM - 07 Nov 2019

0 0

Better Code Monday Newsletter

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the previous newsletter issues and subscribe.

State Management with React Hooks

Ahmed Mansour — Mon, 04 Nov 2019 18:55:17 +0000

Originally posted on Nordschool.

State management in React without 3rd party libraries? React hooks can help you do just that! 👌

In this tutorial, we will cover how you can do global state management with React only. No need for other external libraries. We will use React hooks and the context API.

The context API allows you to share your state across a tree of React components.

We will take advantage of the useContext and useReducer hooks to manage the global state. The pattern described here is like the Redux pattern. You create reducers and dispatch actions to update the state.

Ready? Let's do this! 🔥

Overview

Let's have a look at the bigger picture first and then dig deeper.

Project structure

I have created a small react project to show different data fetching patterns. The project has a standard create-react-app structure. 👇

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── actions
│   │   ├── index.js
│   │   └── types.js
│   ├── components
│   │   ├── PostsList.js
│   │   ├── PostListFromContext.js
│   │   └── WithContext.js
│   ├── contexts
│   │   ├── index.js
│   │   └── PostsContexts.js
│   ├── index.css
│   ├── index.js
│   ├── reducers
│   │   ├── posts.js
│   │   └── index.js
│   ├── serviceWorker.js
└── yarn.lock

Let's dig in! 🤓

We will start by looking into the contexts.

Contexts

You can think of contexts in this case as a replacement to Redux's store.

We first need to create a StateProvider (like a store provider). Also, we need a useStateFromContext hook. The useStateFromContext hook returns the global state and a dispatch function.

// contexts/index.js
import React, { createContext, useContext, useReducer } from 'react';
import PropTypes from 'prop-types';

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => {

  return (
  <StateContext.Provider value={useReducer(reducer, initialState)}> {/* useReducer returns the state and a dispatch function to update state */}
    {children}
  </StateContext.Provider>
  )
};

StateProvider.propTypes = {
  /**
   * @return {React.Node}
   */
  children: PropTypes.node.isRequired,

  /**
   * @desc Initial state value.
   */
  initialState: PropTypes.shape({}).isRequired,

  /**
   * @desc The reducer's state & actions update to context's data. 
   * @param {object} state
   * @param {object} action
   */
  reducer: PropTypes.func.isRequired
};

export const useStateFromContext = () => useContext(StateContext);

To initialize a reducer, we will use the useReducer hook. We will call useReducer with the reducer function and an initial state.
We will pass the results of useReducer as a value to the context.

Next, let's provide this context to the root App component. 👇

Provide Context

We will use the StateProvider function we have just created earlier like this:

// App.js
import React
 from 'react';
import './App.css';

import { StateProvider } from './contexts'
import reducer, { initialState } from './reducers'
import WithContext from './components/WithContext';

function App() {
  return (
    <StateProvider initialState={initialState} reducer={reducer}>
      <div className="App">
        <h3>Posts List coming from reducer</h3>
        <WithContext></WithContext>
      </div>
    </StateProvider>
  );
}

export default App;

Now that we have our global state initialized, let's have a look at the reducers...

Reducers

Let's assume we will be dealing with a list of blog posts.

Here is a simple version of how the posts reducer may look like:

// reducers/posts
import { SET_POSTS } from '../actions/types';

export const postsReducer = (state = postsInitialState, action) => {
  switch (action.type) {
    case SET_POSTS:
      return { 
        ...state,
        posts: action.payload 
      };
    default:
      return state;
  }
}

export const postsInitialState = {
  posts: []
}

export default postsReducer

Keep in mind: This is an example. For more complex scenarios you may need things like loading and error states. 😇

Now let's create a global reducer where all other reducers are glued together....

// reducers/index
import postsReducer , { postsInitialState } from './posts'

export const initialState = {
  postsState: postsInitialState
}

const mainReducer = ({ posts }, action) => ({
    postsState: postsReducer(posts, action)
})

export default mainReducer

So far so good, we have our reducers in place! Next step, we will need actions to describe to update our state. 💪🏼

Actions

Again a very simple action could look something like this:

// actions/index
import { SET_POSTS } from './types';

export function setPosts(data) {
  return {
    type: SET_POSTS,
    payload: data
  };
}

And we can define our action types in a separate file like this:

// actions/types
export const SET_POSTS = 'SET_POSTS';

Now you have all your building blocks in place and your global state is ready! 🎉

Let's see how we can read and update the global state.

Read Global State

Remember that custom hook we created earlier? useStateFromContext? Now we can use it! 😁

Here is an example of how we would read the blog posts from the global state and pass it to a child component...

// components/PostListFromContext
import React from 'react';

import PostsList from './PostsList';
import { useStateFromContext } from '../contexts'

function PostListFromContext() {
  const [ { postsState }] = useStateFromContext()

  return <PostsList data={postsState.posts} />;
}

export default PostListFromContext;

All good, but what about adding more blog posts?

You dispatch an action...👇

Dispatch actions

Our custom hook useStateFromContext returns the dispatch function as a second value!

The assumption: we will be fetching some data from an API. Once we get the data, we would like to update the global state with the API results.

Here is how this may look like using axios.

// components/WithContext
import React from 'react';
import Button from '@material-ui/core/Button';

import PostListFromContext from './PostListFromContext';
import { useStateFromContext } from '../contexts'
import { setPosts } from '../actions'
import axios from 'axios';

const POSTS_SERVICE_URL = 'https://jsonplaceholder.typicode.com/posts';

function WithContext() {
  const [ _, dispatch] = useStateFromContext()

  const fetchPosts = async () => {
    try {
      const response = await axios.get(POSTS_SERVICE_URL);
      const posts = response.data
      dispatch(setPosts(posts))
    } catch (e) {
      console.log(e);
    }
  }

  return ( 
    <div>
      <Button variant="contained" onClick={fetchPosts}>Fetch posts</Button>
      <PostListFromContext  />
    </div>
  );
}

export default WithContext;

Once the user clicks the button, an API call happens and the global state gets updated with the new blog posts.

Now you have an easy way to manage a global state without relying on any 3rd party libraries. 🙌

This state management pattern is great for mid-sizes apps. Depending on your use-case, it might be a better choice. In comparison with introducing Redux with its overhead.

But.... what about middlewares? 🤔

Middlewares

At the end of the day, middlewares are just functions that are called with every action. In case you would like to create your own custom middleware. You can simply add your middleware functions inside the StateProvider

// contexts/index.js

export const StateProvider = ({ reducer, initialState, children }) => {
  /*
   Add here your middleware logic....
  */
  return (
  <StateContext.Provider value={useReducer(reducer, initialState)}> {/* useReducer returns the state and a dispatch function to update state */}
    {children}
  </StateContext.Provider>
  )
};

Limitations

Of course, this pattern has its limitations.

Two main problems that come to mind are:

DevTool support
Middleware

You don't get the same great developer experience When debugging your global state. In comparison to Redux.

Also, more complex middlewares might be problematic to use.

With that said, this pattern is a simpler choice over Redux.

As always consider your own specific use-case first before making any decisions! 😁

Support

Enjoyed the article? Share the summary thread on twitter.

Nordschool

@nordschool

Global state management in React without 3rd party libraries? React hooks can help you do just that! 👌

No need for other external libraries. We will use React hooks and the context API.

THREAD... 👇

13:59 PM - 30 Oct 2019

1 1

Better Code Monday Newsletter

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the previous newsletter issues and subscribe.

5 Ways to Write CSS Styles in React

Ahmed Mansour — Fri, 01 Nov 2019 09:18:11 +0000

Originally posted on nordschool.

There are many ways to style your React components. 🤓

In this guide, we will cover ways to style React components. We will show you 5 different ways and you decide which one you prefer best! 😁

Style your component your way

These are the component-styling ways we will discuss:

Regular CSS
Inline Styling
CSS Modules
Preprocessors
CSS in JS

We are going to replace the same styles below using different component-styling ways.

/* BeautifulButton.css */

.button {
  color: #494949;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;
  padding: 20px;
  font-size: 20px;
  border: 4px solid #494949;
  display: inline-block;
  transition: all 0.4s ease 0s;
}

.button:hover {
  color: #ffffff;
  background: #f6b93b;
  border-color: #f6b93b;
  transition: all 0.4s ease 0s;
}

.button--primary {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  background: #f6b93b;
  padding: 20px;
  font-size: 20px;
  border: 4px solid #f6b93b;
  display: inline-block;
  transition: all 0.4s ease 0s;
}

.button--primary:hover {
  color: #494949;
  background: #ffffff;
  border-color: #494949;
  transition: all 0.4s ease 0s;
}

Regular CSS

This is the easiest and most straight forward way to add styles to a React component.

import React from 'react';
import './BeautifulButton.css';

const MyBeautifulButton = props => {
  return (
    <div>
      <button className={props.primary ? 'button--primary' : 'button'}>
        Button
      </button>
    </div>
  );
};

export default MyBeautifulButton;

Inline Styling

import React from 'react';

const MyBeautifulButton = props => {
  const button = {
    color: '#494949',
    textTransform: 'uppercase',
    textDecoration: 'none',
    background: '#ffffff',
    padding: '20px',
    fontSize: '20px',
    border: '4px solid #494949',
    display: 'inline-block',
    transition: 'all 0.4s ease 0s'
  };

  const primaryButton = {
    ...button,
    color: '#ffffff',
    background: '#f6b93b',
    borderColor: '#f6b93b'
  };

  return (
    <div>
      <button style={props.primary ? primaryButton : button}>Button</button>
    </div>
  );
};

export default MyBeautifulButton;

Note: The camel-case is necessary for the inline-styling to work! For example, borderColor.

Inline-styling is simple and works out of the box but has many limitations.

For example, there is no straight froward way to add hover effect.

Recommendation: Use the inline-styling paradigm only with small simple components. 😇

CSS Modules

import React from 'react';

import styles from './my-beautiful-button.module.css'; // must have extension .module.css.
// my-beautiful-button.module.css has the same styles as Button.css.

const MyBeautifulButton = props => {
  return (
    <div>
      <button
        className={props.primary ? styles['button--primary'] : styles.button}
      >
        Button
      </button>
    </div>
  );
};

export default MyBeautifulButton;

All styles from a CSS module get scoped within that component that imported it. That means you don't have to worry about global name-conflicts. 😌

Note: You must include the sub-extension .module in the name. Otherwise the styles will load as regular CSS and you may have name-conflicts.

Preprocessors

Using preprocessors such as SCSS, LESS or Stylus is straight forward in React.

You need to add the preprocessor loader and then in the same way as regular CSS you can import the files.

import React from 'react';
import './button.scss'; // <-- Once webpack configs have the right loader this should work like regular scss.

const MyBeautifulButton = props => {
  return (
    <div>
      <button className={props.primary ? 'button--primary' : 'button'}>
        Button
      </button>
    </div>
  );
};

export default MyBeautifulButton;

CSS in JS

CSS in JS is a pattern where you would define all your styles inside the component. Like inline-styling but a lot more powerful.

Let's have a look at how we would write the same button styles using Styled Components and Emotion.

Styled Components

import React from 'react';

import styled from 'styled-components';

const MyBeautifulButton = props => {
  const BeautifulButton = styled.button`
    color: #494949;
    text-transform: uppercase;
    text-decoration: none;
    background: #ffffff;
    padding: 20px;
    font-size: 20px;
    border: 4px solid #494949;
    display: inline-block;
    transition: all 0.4s ease 0s;
    &:hover {
      color: #ffffff;
      background: #f6b93b;
      border-color: #f6b93b;
      transition: all 0.4s ease 0s;
    }
  `;

  const BeautifulPrimaryButton = styled(Button)`
    color: #ffffff;
    background: #f6b93b;
    border-color: #f6b93b;
    &:hover {
      color: #494949;
      background: #ffffff;
      border-color: #494949;
    }
  `;

  return (
    <div>
      {props.primary ? (
        <BeautifulPrimaryButton>Button </BeautifulPrimaryButton>
      ) : (
        <BeautifulButton>Button</BeautifulButton>
      )}
    </div>
  );
};

export default MyBeautifulButton;

Emotion

Emotion has two ways of adding styles, the css API and the styled API.

Here is an example of how using the css API looks like:

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/* @jsx jsx */
import React from 'react';
import { jsx, css } from '@emotion/core';

const BeautifulButton = css`
  color: #494949;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;
  padding: 20px;
  font-size: 20px;
  border: 4px solid #494949;
  display: inline-block;
  transition: all 0.4s ease 0s;
  &:hover {
    color: #ffffff;
    background: #f6b93b;
    border-color: #f6b93b;
    transition: all 0.4s ease 0s;
  }
`;

const BeautifulPrimaryButton = css`
  ${Button};
  color: #ffffff;
  background: #f6b93b;
  border-color: #f6b93b;
  &:hover {
    color: #494949;
    background: #ffffff;
    border-color: #494949;
  }
`;

const MyBeautifulButton = props => {
  return (
    <div>
      <button css={props.primary ? BeautifulPrimaryButton : BeautifulButton}>Button</button>
    </div>
  );
};

export default MyBeautifulButton;

Emotion's styled API is very similar to Styled Components. Here is an example:

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/* @jsx jsx */
import React from 'react';
import { jsx, css } from '@emotion/core';

import styled from '@emotion/styled';

const BeautifulButton = styled.button`
color: #494949;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 20px;
font-size: 20px;
border: 4px solid #494949;
display: inline-block;
transition: all 0.4s ease 0s;
&:hover {
  color: #ffffff;
  background: #f6b93b;
  border-color: #f6b93b;
  transition: all 0.4s ease 0s;
}
`

const BeautifulPrimaryButton = styled(BeautifulButton)`
color: #ffffff;
background: #f6b93b;
border-color: #f6b93b;
&:hover {
  color: #494949;
  background: #ffffff;
  border-color: #494949;
}
`

const MyBeautifulButton = (props) => {
  return (
    <div>
      {props.primary ? <BeautifulPrimaryButton>Button </BeautifulPrimaryButton> : <BeautifulButton>Button</BeautifulButton>}
    </div>
  );
};

export default MyBeautifulButton;

Note: You can add a babel plugin to avoid writing the required file's top line.
/** @jsx jsx */

CSS in JS is a powerful pattern. It makes a lot of things easier when building large complex web applications.

There is one main difference between Styled Components and Emotion.

Styled Component offers only the styled API. But, Emotion offers two ways to add the styles: the css and the styled APIs.

Recommendation: For large applications, we would recommend using Emotion. 👌

Here are other CSS in JS libraries worth checking out:

Now you know your options when it comes to styling components! Which one do you prefer? 🤔

Support

Enjoyed the article? Share the summary thread on twitter.

Nordschool

@nordschool

There are many ways to style your React components. Which one do you prefer? 🤔

- Regular CSS
- Inline Styling
- CSS Modules
- Preprocessors
- CSS in JS

THREAD... 👇

12:17 PM - 18 Oct 2019

2 2

Better Code Monday Newsletter

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the previous newsletter issues and subscribe.

Vue Router - The Complete Guide

Ahmed Mansour — Thu, 31 Oct 2019 12:34:33 +0000

Originally posted on nordschool.

If you are using Vue, the odds are you will need to deal with the Vue router. Let's go through all the common use-cases you will need! 👌

In this tutorial, we will cover the most essential router concepts as well as more advanced patterns such as guarded routes & animated routes.

Are you ready? Let's do this! 💪

Overview

Let's have a look at the bigger picture first and then dig deeper.

Project structure

I have created a small vue project to demonstrate different functionalities of the Vue Router. The project has a standard setup using the vue-cli.

├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router.js
│   └── views
│       ├── Animated.vue
│       ├── Dynamic.vue
│       ├── Guarded.vue
│       ├── Home.vue
│       ├── LazyLoaded.vue
│       ├── Login.vue
│       ├── Nested.vue
│       └── WithProps.vue
└── yarn.lock

We will be dealing mostly with the router.js but also different views.

Here is how the main router configurations look like:

import Vue from 'vue';
import Router from 'vue-router';

// All the views
import Home from './views/Home.vue';
import Nested from './views/Nested.vue';
import Animated from './views/Animated.vue';
import Dynamic from './views/Dynamic.vue';
import Guarded from './views/Guarded.vue';
import Login from './views/Login.vue';
import WithProps from './views/WithProps.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          name: 'nested-home',
          path: 'nested',
          component: Nested
        }
      ]
    },
    {
      path: '/animated',
      component: Animated
    },
    {
      path: '/dynamic/:id',
      component: Dynamic
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/very-secure',
      component: Guarded,
      beforeEnter: (to, from, next) => {
        let isAuthenticated;
        try {
          isAuthenticated = sessionStorage.getItem('authenticated');
        } catch (error) {
          return next({ path: '/login' });
        }

        return isAuthenticated ? next() : next({ path: '/login' });
      }
    },
    {
      path: '/with-props',
      component: WithProps,
      props: { newsletterPopup: true }
    },
    {
      path: '/lazy-loaded',
      name: 'lazyLoaded',
      // route level code-splitting
      // this generates a separate chunk (lazyLoaded.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "lazyLoaded" */ './views/LazyLoaded.vue')
    }
  ]
});

Here is how we add the router when we are bootstraping our Vue app:

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Now let's start to dig deeper and find out what does each part of these router configurations actually do. 🧐

Essentials

Using props

Example route-config:

// src/router.js
{
  path: "/with-props",
  component: WithProps,
  props: { newsletterPopup: true }
}

A simple view that gets props from the router:

// src/views/WithProps.vue
<template>
  <div class="home">
    <h1>This is a view with props coming from the router!</h1>
    <h2>Look at that - {{ $props.newsletterPopup }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    newsletterPopup: Boolean
  }
};
</script>

You might have noticed that some of these routes have names defined. So how do these work you wonder?

Named routes

A route name provides an alternative way to navigate to routes without relying on its path.

Example route-config:

// src/router.js
{
  path: "/",
  component: Home,
  children: [
    {
      name: "nested-home",
      path: "nested",
      component: Nested
    }
  ]
}

Here is how you can use it in a router-link

<router-link :to="{ name: 'nested-home' }">Nested</router-link> |

You might be thinking to yourself..."huh, router-link? 😕"

router-link

The router-link helps you with navigation, its like anchor links but with super powers.

Under the hood, it renders an anchor tag with correct href. Also, the router-link component gets automatically CSS classes when the target route is active.

It is considered a best-practice to stick to router-link over regular anchor links.

Want to know more? You can dig deeper here.

You have have noticed this router-view thing!

router-view

In simple terms, this the placeholder that gets replaced dynamically with the component that matches your route.

<router-view></router-view>

Here the official description from the Vue docs:

The router-view component is a functional component that renders the matched component for the given path.

Components rendered in router-view can also contain its own router-view, which will render components for nested paths.

Any non-name props will be passed along to the rendered component, however most of the time the per-route data is contained in the route's params.

Next, lets talk about nested routes...

Nested routes

Got a use-case where you need to nest routes? Easy!

You can define children for the route.

Example route-config:

// src/router.js
{
  path: "/",
  component: Home,
  children: [
    {
      name: "nested-home",
      path: "nested",
      component: Nested
    }
  ]
}

Here is a view that has another nested route, hence the router-view

// src/views/Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <router-view />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  }
};
</script>

And the Nested view itself:

// src/views/Nested.vue
<template>
  <div class="about">
    <h1>This is a nested view, Helloww!</h1>
  </div>
</template>

What about dynamic URL segments? If I have for example user IDs or a dynamic field of some sort?

Dynamic routing & Router param

Example of a route-config with dynamic segment :id

// src/router.js
{
  path: "/dynamic/:id",
  component: Dynamic
}

You can access the dynamic param in your component like this:

// src/views/Dynamic.vue
<template>
  <div>
    <h1>This is a very dynamic page, here is the id:</h1>
    <h2 class="highlight">{{ $route.params.id }}</h2>
    <span>Its almost like magic right?</span>
  </div>
</template>

<style lang="scss" scoped>
.highlight {
  font-weight: bold;
}
</style>

This is a good place to take a break! what about standing up & stretching ? Go for it! I will be here when you come back. 👍

Advanced

Ok now that you know all the basics, let's have a look into the more advanced stuff.

Route guards

Here is how you can create protected routes that only authenticated users are allowed to see:

// src/router.js
{
  path: "/login",
  component: Login
},
{
  path: "/very-secure",
  component: Guarded,
  beforeEnter: (to, from, next) => {
    let isAuthenticated;
    try {
      isAuthenticated = sessionStorage.getItem("authenticated");
    } catch (error) {
      return next({ path: "/login" });
    }

    return isAuthenticated ? next() : next({ path: "/login" });
  }
}

// src/views/Guarded.vue
<template>
  <div class="about">
    <h1>This is a nested view, Helloww!</h1>
  </div>
</template>

// src/App.vue
methods: {
  authenticate() {
    sessionStorage.setItem("authenticated", true);
  },
  logout() {
    sessionStorage.removeItem("authenticated");
  }
}

Keep in mind that this is just a simple example, you might want to add more layers of checks in real-world applications. 😁

Wild card routes

Here is how you can add a wild card route to catch unknown routes.

{
  // will match everything
  path: '*';
  component: NotFound;
}

You can use this technique to display a "Not Found 404" page. 💯

Watch route

What if you want to react to route changes? You can add a specific watcher to the $route object.

<script>
export default {
  watch: {
    $route(to, from) {
      console.log("to", to);
      console.log("from", from);
      // react to route changes...
    }
  }
};
</script>

Since we are at it, let's talk about the route object.

The route object

Here is how the route object looks like :


interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // for named routes
  components?: { [name: string]: Component }, // for named views
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // for nested routes
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  meta?: any,

  // 2.6.0+
  caseSensitive?: boolean, // use case sensitive match? (default: false)
  pathToRegexpOptions?: Object // path-to-regexp options for compiling regex
}

Want to know more? Check out the docs.

Do you happen to have a bit more special use-cases? Let's check how you can use the router options.

Router options

You can customize the router to your taste.

Here are some of the config options when initializing the router.

// src/router.js

new Router({
  mode: 'history', //  the router mode
  routes: [
      // Routes go here
  ],
  base: '/', // The base URL of the app
  linkActiveClass: 'router-link-active', // <router-link> default active class
  linkExactActiveClass: 'router-link-exact-active', // <router-link> default active class for exact matches
  scrollBehavior (to, from, savedPosition) {
    // native-like behavior when navigating with back/forward buttons
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }‚
  parseQuery: q => q, // custom query string parse
  fallback: true, // whether the router should fallback to hash mode
  });

You can dig deeper by reading the documentation:

I know this has been a long tutorial, stay with me we are almost done! 😌

Router transition

Want to add transitions effects to your routed component?

Adding simple transitions in Vue is easy, just wrap your components inside the transition component.

// src/views/Animated.vue
<template>
  <transition name="fade">
    <div>
      <h1>This is a animated page, it fades away slowly...</h1>
    </div>
  </transition>
</template>


<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}

.fade-enter,
.fade-leave-to {
  /* .fade-leave-active below version 2.1.8 */
  opacity: 0;
}
</style>

You can read more about Vue transitions & animations here.

Lazy-loading routes

Lazy-loading is a useful technique to increase the performance of your application. Here is an example:

// src/router.js
{
  path: "/lazy-loaded",
  name: "lazyLoaded",
  // route level code-splitting
  // this generates a separate chunk (lazyLoaded.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () =>
    import(/* webpackChunkName: "lazyLoaded" */ "./views/LazyLoaded.vue")
}

// src/views/LazyLoaded.vue
<template>
  <h1>This is a lazy-loaded view. Performance baby!</h1>
</template>

This way, you can lazy-load routes only when they are needed. Just use the dynamic import syntax (as you can see in the src/router.js snippet) and you are good to go.

Navigation Resolution Flow

The router has different hooks that are executed in a specific order.

Understanding the sequence of these hooks is helpful. This way you can ensure that your logic is at the right place at the right time.

Here is a, poorly drawn, diagram that explains the execution order of the router hooks:

A couple of use cases of the router hooks:

Want to have globally guarded routes? Hook number 2 beforeEach that runs globally might be your best option.
Want to add component-specific router logic? Have a look at the hook number 5 beforeRouteEnter.

That is it, now you are a Vue router guru! ✋

Support

Enjoyed the article? Share the summary thread on twitter.

Nordschool

@nordschool

Vue Router - The Complete Guide

THREAD…

- Routes Using props
- Nested routes
- Dynamic routing
- Route guards
- Wild card routes
- Router transitions
- Lazy-loading routes
- Navigation Resolution Flow

#vue #vueRouter #tutorial #javascript #js

13:50 PM - 27 Sep 2019

2 2

Better Code Monday Newsletter

You might also like my newsletter. The idea is to share 3 web dev tips every Monday.

My goal is to improve my writing skills and share knowledge as much as possible. So far, few hundreds of developers have subscribed and seem to like it.

To get a feeling of what kind of stuff I share, Check out the previous newsletter issues and subscribe.