Latest Tutorials

In this post, I'm going to show you how to build Minecraft in React . What? A 3D Game, in React?? Yes. It's been said that React is more of a mindset than a DOM library and I'm going to show you an example that is both surprising and beautiful: a voxel Minecraft clone - with 3D rendering - in React. Below I'm going to walk you through how to recreate the smash hit game Minecraft , but if you prefer to watch a video, Maksim - Fullstack React with TypeScript author -- gives a walkthrough tutorial here on Youtube .

Before React.js and Vue.js came along, building large, maintainable web applications was still pretty hard. JavaScript files were hard to organize and deploy to production, and manipulating the DOM was painful. React and Vue turned front end developers into productive rock-stars, but utilizing a Virtual DOM in the browser incurs performance penalties. What if we could know how things would change in an app at build time, rather than waiting until run time to do the work? Enter Svelte.js. Svelte.js has many similarities to React and Vue but offers benefits that improve performance while being easy to learn and truly reactive.

Modern applications involve many DOM manipulations. Components (and elements) are constantly being removed, added, updated, etc. to deliver incredible user experiences and/or to optimize performance. Sometimes, you may need to execute code when a component is added (such as automatically focusing an input field when a form is loaded like the G-Mail login page) or when a component is removed (such as removing all event listeners associated with that element to prevent memory leaks). Frameworks/libraries such as React.js and Svelte provide component lifecycle methods that allow developers to predictably execute code at these very moments/situations. Having such access into each stage a component undergoes provides more control over how and when the component should be rendered. Commonly, functions can be scheduled to be invoked when these events occur in the lifecycle of a component instance:

In this article, we will learn how to render a simple React app using an express server.

Hooks are small snippets of React power that allow you ‘hook’ into various parts of the React system, inside of function-based components. Hooks can target React features like state, element refs, or, in this case, context . Hooks were introduced into the React library in version 16.8 and they're designed to give developers access to parts of the React library that were traditionally reserved for class-based components. One such Hook that we're going to explore in this article is useContext , which gives our components the ability to access shared data from higher up parent components, without that data being passed through multiple layers of other components.