Learn Microsoft, React-router and Webstorm

React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the concept of declarative programming and a component based development process. In practice, this turns out to be very nice and gives you a routing solution that is less configuration heavy than many previous solutions.

In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Add routing to React apps using React Router v4

React Router is the defacto router for any React application and it allows us to extract the state of our application from the browser's address bar.

In this course we'll explore the core features of React Router in common examples.  From routing with individual components to more complex routing consisting of multiple components, query-strings, route parameters,  and redirects.  

Getting Started with React Router v3

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

Create a Query Parameter Modal Route with React Router

Microsoft Windows is a group of several graphical operating system families, all of which are developed, marketed, and sold by Microsoft. Each family caters to a certain sector of the computing industry.

microsoft

Learn the various ways to access and enable High Contrast Mode on Windows.

Enable High Contrast Mode on Windows

We should not use color alone as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.  Users may not be able to see/understand the differences in color and require additional indicators.

Along with color, use additional indicators such as:
* typography
* shapes
* grids
* spaces
* and/or allocate more weight to important elements

## References:
* http://www.particletree.com/features/interfaces-and-color-blindness/
* https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/

Use More than Color Alone to Convey Information in a Web Page

Just about every tool in our accessibility auditing toolkit can help us identify any issues with sufficient color contrast ratio on a web page.  The react-axe library and axe browser extension both report findings on all elements with insufficient contrast ratios.  The tota11y browser extension will annotate any elements with their contrast ratios and color those that are insufficient in red.  

Additionally, we need to use our experience tools to see what some of our users out there may we seeing.  We need to test with high contrast browser extensions as well as the display settings in Windows and Mac.  If our users with visual impairments are using these tools we need to see what our application looks like using them because we may find that under a certain mode some things may suddenly be harder to read or virtually invisible.

## Resources
* https://www.scottohara.me/blog/2019/02/12/high-contrast-aria-and-images.html

Test for Insufficient Color Contrast Accessibility Issues

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Restricting access to content that is delivered client-side in a Gatsby site takes a few steps. We use Netlify Identity to handle user authentication and reach router to build our auth-restricted client-side application.

Using Netlify Identity to control access to a Gatsby client-side dashboard route

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

_**note**: in this video `react-router-dom` is installed with the `--save-dev` flag. This is **not required and may cause issues if used**. Simply install it with `npm install react-router-dom` and it will function as expected._

Run the React Router v4 Examples with Create React App

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

Create Basic Routes with the React Router v4 BrowserRouter

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

React Router: setRouteWillLeaveHook

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

Integrate react-router with Preact

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

React Router: IndexRoute

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

Use Regular Expressions with Routes with React Router v4

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

React Router: hashHistory vs browserHistory

Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX.  In this lesson we'll explore nesting routes and accessing the children of parent routes.

React Router: Nested Routes

A router library is no good if we have to hardcode every single route in our application.  In this lesson we look at how to access variables in our routes and pass them into our components.

React Router: Route Parameters

In this lesson we'll learn how to render multiple component children from a single route.

React Router: Named Components

The Redirect component in react-router does exactly what it sounds like.  It allows us to redirect from from one route to another.

React Router: Redirect

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

Use the React Router v4 Link Component for Navigation Between Routes

URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

Topics

Instructors

Content Type