Roland Guijt: React - Roland Guijt


A 2-post collection

Using React's new context API

Why context? A component tree can quickly grow. The root component has many children, the children have many children and so on. What if you want to pass information that is considered global to a tree or subtree of components? For example what language these components should use. Or what the username is. You could use props of course, but it seems unnessary to pass on the same information over and over again to each component. This is where the context comes in. Pre context In this example from the React website no context is used. The theme with value dark is passed with a prop to the child toolbar component which passes it on to it's child ThemedButton also...

Setting Up a React Development Environment

Preparation First make sure that you have the latest version of node.js installed. The easiest way to do that is to download the installer package from npm is the node package manager. It is updated more frequently than node itself. To make sure your have the latest version, at the prompt type npm install npm@latest -g. Create-react-app Now change to the root folder where you want the app to live and type npx create-react-app [yourapp] to create the initial app. npx was installed when we installed npm. It executes an npm package directly. It downloads a starting point for an application using the latest version of React. Besides that it configures a complete environment to develop...