You can write an application in React and adjust it a little bit to use it on Xbox like almost native. But we need to remember that Xbox offer us only 25% of his power to use this app and that’s why we really should take care on optimization of code. It’s possible because Microsoft give us tools to create hosted universal web application (UWA) which in fact runs in Microsoft edge webview. That’s mean for us as developers that we can use all features which are compatible with latest version of Microsoft Edge.
To creating React application I personally recommend to use Create React App boilerplate created by Facebook team and React community. Basically we need to install it globally using npm and then create application with a single command.
Installation of CRA
npm install --global create-react-app # On OSX or Linux it requires higher write access sudo npm install --global create-react-app
Creating Your project
create-react-app my-xbox-app # and run it cd my-app npm start
After `npm start` the app should running on address localhost:3000 and can open it in browser or use later during creation of Universal Windows App (UWA)
We need to add additional library called DirectionalNavigation to allow user to navigate on XBOX app using game controller. Unfortunately this package isn’t available on npm and we must download it to our project and import inside `index.js` file and that’s it. After import the code from a library will be executed and you will be able to use game controller or just a computer keyboard.
As I mentioned before to create Xbox app we must have Windows 10 and Visual Studio, moreover we must enable developer mode on our machine to be able to do it. I’m not going to describe it step by step because it’s well described here.
It’s very important to check Universal Windows Platform during installation of Visual Studio.
Now you can start building you Xbox applications, but you may ask: “Why I should do that”?. The answer is pretty simple. Microsoft Xbox have currently 57 millions of active users around the globe. By creating applications for more platforms you can extend your current group of user or give current users an opportunity to use your product in more ways. This is common approach in many companies to build applications for many platform to reach their consumers and the best examples of that approach are companies like Netflix or Spotify which give users Xbox applications to watch movies or listen music. Another very important thing worth highlighting is that people tend to use their consoles more often that personal computers because they’re cheaper and more efficient to use.
Building React app is all about creating components and wiring them together. We can have a stateful or stateless component. React API gives us a couple of ways how we can declare them. There is a functional component, Class Component, and PureComponent. Today I want to share my experience and knowledge about working with PureComponent […]
The version 16.6 of React was released on 24th October 2018. We can divide features and changes from this release into two groups. The first one contains functionalities created to prevent unnecessary re-rendering of components, which increases the efficiency of the app. And the other group is about lazy-loading of our components without a need […]