Learn D3, React-native and Screen-reader

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


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

Develop Accessible Web Apps with React

A skeleton loader is a popular UI pattern for loading screens: instead of a spinner, we show static or an animated placeholder for the information that is still loading. 

In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.

**Linear Gradient** [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) | [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient)

**Masked View** [Expo](https://docs.expo.dev/versions/latest/sdk/masked-view/) | [Pure React Native](https://github.com/react-native-masked-view/masked-view)

**Reanimated 2** [Expo](https://docs.expo.dev/versions/latest/sdk/reanimated/) | [Pure React Native](https://github.com/software-mansion/react-native-reanimated/)

This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).

The finished code for the skeleton loader (last 2 lessons) is available on [Expo Snack](https://snack.expo.dev/@kadikraman/animated-skeleton-loader).

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Building a Customizable Animated Skeleton Loader in React Native

How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

Button component is useful for quick prototyping.

TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

Creating Buttons in React Native with Three Levels of Customization

If you already know React, then React Native is a great way to build mobile apps for iOS and Android. Of course, web and mobile apps are very different to build — but this course serves as your guide.

In this course, we’ll build a mobile app from start to release with React Native for both iOS and Android. Prior React experience is required, but you don’t have to know anything about mobile development to participate.

Throughout the course, we’ll be building a “Restaurant Review” app. We’ll use all the standard mobile UI elements like text, images, form inputs, buttons, scroll views, and icons, and we’ll show several navigation techniques like push, modal, and tabs. The app will make HTTP API calls to a server and will store data on the device with AsyncStorage. Finally, we’ll specify a custom app icon and splash screen, deploy the app to a physical device, and prepare the app for release to the App Store and Play Store or for ad-hoc release.

Build a React Native Application for iOS and Android from Start to Finish

React makes it intuitive to build real-world web application. But in reality, you need to use a host of other services to get the app in front of real users. 

This course walks you through setup and implementation to get your cloud-based application up and running. 

You’ll learn to set up:
* a new project in AWS Amplify configured to your React app
* user authentication with Amazon Cognito 
* managed GraphQL with AWS AppSync
* image storage and retrieval with Amazon S3
* text translation via Lambda functions
* and finally, deployment of your application on AWS using Amazon S3

You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.

Building Serverless Web Applications with React & AWS Amplify

React Navigation makes the easy things easy and the hard things possible. This course will help you understand how to customize and use React Navigation for more complex navigation patterns.

You'll learn different ways to display content within the navigators, which demonstrates the built-in customizations within React Navigation. As well as learn how to interact with different UI components within React navigation, which will help you structure your application. 

Building off this, you'll learn how you can customize the default navigator behavior to provide a custom look and feel to your React Navigation application

To succeed in this course, you’ll want a basic understanding of the React Navigation API and how to use the default navigators.

Note: React Navigation has been updated to v2. This course was recorded on v1.x and the lesson code has been updated to reflect v2. The principles and patterns taught in the videos remain valid.

React Navigation for Native Mobile Applications

React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application.
Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

In this course we'll take a look at a basic setup. Then explore the different ways we can load and show videos. We'll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with `react-native-video` we'll show how to write custom video controls and animate them when the video has not been interacted with.

Finally we'll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

Fundamentals of React Native Video

D3, or Data Driven Documents, is the defacto standard for data visualization on the web. It's an incredibly powerful library that gives you all the tools you need to build just about visualization you can dream of.

D3 is not a collection of predefined charts. Instead, it's a robust set of utilities you can use to ingest and transform data, to map that data to screen values, and ultimately to manipulate the DOM to render your visuals.

When working with React, D3's desire to manipulate the DOM is at odds with React's goal of rendering the UI as a function of state. So how do we handle this? Simply put, we use D3 for everything up to the point where we want to render our output, and then we hand all that data to React for rendering.

In this course, we'll start from scratch and build out an SVG bar chart for some sample data. We'll lean on D3 for its tools and then hand that data off to React for rendering.

Create A Bar Chart with React and D3

In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. We'll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.


This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.


The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

Real World React Native Animations

In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Build Interactive JavaScript Charts with D3 v4

In this course, we will be building a React Native news app that is read-only when offline. 

The videos are recorded on a Mac with an iPhone 13 Simulator using plain React Native, but you can do this course using Android, Windows and even the Expo managed workflow. See the lesson description for platform-specific instructions. The solutions repo has been verified to work on a Pixel 3a Emulator on Mac.

The completed app for this course is available [here](https://github.com/kadikraman/news-flash) and each lesson will include a link to the commit that added the code so you can check your work.

After we build our news app, we're going to enhance it to make it read-only when offline using urql'g GraphCache.

This course will require you to run the api locally on your device. The api repo is available [here](https://github.com/kadikraman/news-flash-api).

**Resources:**
- urql: https://formidable.com/open-source/urql/docs/
- Insomnia: https://insomnia.rest/
- Async Storage: https://github.com/react-native-async-storage/async-storage
- React Native Netinfo: https://github.com/react-native-netinfo/react-native-netinfo

Build a News App with React Native, GraphQL and TypeScript

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

Animate React Native UI Elements

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.


We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

Build a React Native Todo Application

This course covers D3 v3. If you'd like to learn about v4 of D3 (the latest version) [click here for the course on that](https://egghead.io/courses/build-interactive-javascript-charts-with-d3-v4).

This series will gently guide you through the first steps in getting to know D3. The curve can be steep, but with a few simple tools, you'll be charting your buns off in no time flat.

Use D3 (v3) to Build Interactive Charts with JavaScript

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

Create a List of Items with a React Native ListView

Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. `selection.call()` will call any function reference you give it, providing the selection as the first parameter, and then it returns the selection for you to ensure chaining is supported.

Better Code Organization with selection.call() with D3 v4

Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the `viewBox` attribute, which is used to control how SVGs scale. We’ll also examine a reusable function that can be used to make nearly any visualization responsive.

Make D3 v4 Charts Responsive with the viewBox attribute

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

Animate with the General Update Pattern in D3 v4

We'll use the interpolate function from an `Animated.Value` to transition the background color of an `Animated.View`. We'll simultaneously translate the position with the same `Animated.Value`.

Animate Colors with React Native Interpolate

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

Animate Rotation with React Native Interpolate

In this lesson we'll learn to use `backfaceVisibility` style property and `rotateX` to create a vertical flip animation, and `rotateY` to create a horizontal flip animation.

Search

Search Results