 Resources from Tomasz Łakomy in 2021

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

Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of physical dimensions. Currently there are two different shapes of Surfaces supported by React 360: Cylinder and Flat. 

A Cylinder Surface takes your 2D content and projects it onto the inside of a cylinder with a 4 meter radius. A cylinder is great for displaying 2D content, because no matter which way you turn, you are always looking at the content straight-on.

In this lesson we are going to learn how to create a Cylinder Surface spanning the 360 degree view and how to attach a React 360 component to it.


Create a Cylinder Surface and attach a component to it in React 360

Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of physical dimensions. Currently there are two different shapes of Surfaces supported by React 360: Cylinder and Flat.

A Flat Surface places your 2D interface on a flat plane in space, like a virtual screen. Though a Cylinder Surface is always positioned in front of the user, a Flat Surface can be moved around in space – this is useful for scenarios where you want to have multiple panels arranged around the user, like a multi-monitor setup in virtual space.

In this lesson we are going to learn how to create a Flat Surface with a `<Flag/>` component attached to it.

Create a Flat Surface and attach a component to it in React 360

React 360 applications are not restricted to 2D panels in space – you can also bring in 3D elements. In this lesson we are going to learn how to import 3D objects using Entity component and how to use Locations to display them in a React 360 application.

Add 3D objects to a React 360 application

Most web apps are interactive and React 360 apps are no exception. 

In this lesson we are going to learn how to add interactivity to VR apps using a `<VrButton/>` component to react to `onClick`, `onEnter` and `onExit` events to build an interactive UI in VR.

Capture user interaction in React 360 with VrButton component 

React 360 is optimized for the presentation of 360 photos and videos. These are essential for creating an immersive environment, and allow you to seemingly transport your user to a virtual location.

In this lesson we're going to learn how to change the default panorama background displayed around the user, as well as how to change the image dynamically using the `Environment.setBackgroundImage()` method.

Change 360 panorama background in React 360 app

360/VR applications tend to have large images such as 360 panoramas. 

It might take a while to load them so the best approach might be to load all necessary images in the background so they are available as soon as user needs them. 

In this lesson we are going to learn how to use `<Prefetch />` component to prefetch static assets.

Use Prefetch component to fetch images before they are needed in React 360

Animations are an important part of modern UX. 

Using the [Animated](https://facebook.github.io/react-native/docs/animated) library which is supported both in React Native and React 360 we're able to make our app much more alive by adding animations to it.

In this lesson we're going to learn how to use `createAnimatedComponent` to create an `AnimatedEntity` which we're going to use to animate a 3D model of the Earth.

Add animations to React 360 components

Native Modules provide the ability for React 360 app code to call back into your runtime, and provide functionality that's only available in the main browser environment. 

In this lesson we're going to learn how to create a `TitleChanger` module that will allow us to change the document title whenever we travel to a different place in our app

Create Native Modules to extend React 360 app functionality

After creating a successful React 360 app we would like to build it for production environment so that we can release it to the world. In this lesson we are going to learn how to package a React 360 application for production deployment. 

When running the server for `build`, if you don’t have `http-server` downloaded, instead of running the command `http-serve build`, run it with npx with the command `npx http-server build`.

Build a React 360 app for production

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event _modifiers_ to alter DOM event behaviour (such as `once` and `preventDefault`)

Use DOM events and event modifiers in Svelte 3

Every Svelte component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.

The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. 

In this lesson we're going to learn how to use `onMount` to fetch and render data from Star Wars API.

Use an onMount lifecycle method to fetch and render data in Svelte 3

Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

In Svelte, we do this with _stores_. In this lesson we're going to learn how to create a `writable` store and how to use it to allow `Incrementer` and `Decrementer` components modify the value of the store

Use Svelte 3 stores to share data between multiple unrelated components

Sometimes we don't want to have a complicated `update` function to change a value of our store. We know exactly what we want to change the value to - we can just use the `store.set` function to do that.

In this lesson we're going to learn how to set a value to a Svelte 3 store by using the `store.set` function to set the value of a counter without having to increment/decrement it one by one.

Set a value to a Svelte 3 store

It's important to avoid memory leaks, and Svelte 3 is no exception. When we're using the `subscribe` method from Svelte store in a component, it's important to clean ofter ourselves (especially if we're going to instantiate and destroy this component many times over).

In this lesson we're going to learn how to use `unsubscribe` to stop subscribing to the store change in a component's `onDestroy` call, as well how to use auto-subscriptions to refer to the store value and let Svelte take care of cleaning after us to avoid memory leaks.

Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores

If our app needs to display values that are dynamically changing, it's better to animate that to deliver a more engaging user experience.

In this lesson we're going to learn how to use a `tweened` value to dynamically update the value of a progress bar in Svelte 3.

Tween a value and dynamically update the DOM with Svelte 3

Svelte is a tool for building fast web applications.

In this lesson we're going to learn what is Svelte and what's the difference between Svelte and other frameworks such as React or Vue.

WTF is Svelte?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Ever since React Hooks were announced, many web developers wanted to use them to fetch data in their apps with GraphQL backend.

An `@apollo/react-hooks` package has been released recently with allows developers to use Apollo Client to fetch data from GraphQL endpoint using a `useQuery` hook. The new API has exactly the same possibilities as the previous, render-props based one but the resulting code is much simpler and easier to follow.

In this lesson we're going to learn how to fetch data with `useQuery` hook to get data about currency rates using both static and variable-based GraphQL query.

Fetch data with Apollo GraphQL useQuery hook

Developers love to automate things.

For instance, we'd like to be able to send a request to an endpoint every X milliseconds because something interesting might have happened. Or we want to get a new picture of a cute dog.

In this lesson, we're going to use `useQuery` hook to display a random image of a dog every 500 milliseconds using the `pollInterval` option as well as using the `startPolling` and `stopPolling` methods from Apollo Client to manually start and stop the polling process.

Automatically poll data from GraphQL API with Apollo Client useQuery hook

When using `useQuery` from Apollo React Hooks, the request will be sent automatically after the component has been mounted. This might not be the desired behaviour as we might want to send the request in response to user action (for instance, after a button click).

In this lesson we're going to learn how to use `useLazyQuery` hook to execute a query manually in order to fetch dog pictures.

Use useLazyQuery to manually execute a query with Apollo React Hooks

GraphQL is fantastic not only for querying data, but also for mutating it and with Apollo React Hooks we're able to do both.

In this lesson we're going to learn how to use `useMutation` [hook](https://www.apollographql.com/docs/react/essentials/mutations/) in order to add an item to a todo list with hooks instead of using the render props pattern based `Mutation` component 

Use useMutation hook to trigger GraphQL mutations with Apollo React Hooks

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

As developers, we strive to be quick and productive. We love to automate things so we spend less time on daunting, manual work and more time on solving interesting problems.

In this lesson we're going to learn how to use emmet (which is built into VSCode) to quickly write HTML/JSX and how to use prettier (which we're going to install from extensions tab) to automatically format it so we may work faster and be more productive.

Topics

Instructors

Content Type

Free or Pro