Current look of my Home Dashboard

I decided to take the benefits of in-built Alexa and blend them with some basic understanding of React into a personalised Home Dashboard.

Ever since I got an Amazon Echo, I have enjoyed having the ability to kick off my mornings by asking about the weather, traffic and playing music to kick the day off. I liked the idea of having a ‘home dashboard’ that wasn’t around ‘turning on the lights’ etc, but more around what I typically want to know in my household and my daily routines.

The result was a fairly simple React app, running in the browser of an Amazon Fire Tablet. The code of which is accessible on Github here.

Pre-requisites:

Basic understanding of React

Node installed

Where to start

Firstly you need to create the React project barebones.

Essentially it’s three files. Two of which I put in a src folder.

src/index.html src/index.js & package.json

src/index.html

In the body of your src/index.html file, place in the following.

<div id="root"></div>

<script src="index.js"></script>

This will mean when the index.js file is executed, it will place the React container and all of the /widgets you have listed, into the #root div.

src/index.js

Next, you will need to add the index.js file. This is the ‘engine’ of your app. This is where a fundamental understanding of React is required.

The contents of your src/index.js file is the following:

import * as React from "react";

import { render } from "react-dom"; const App = () => (

<>

My Home Dashboard

</>

); render(<App />, document.getElementById("root"));

To run through this line by line:

import * as React from "react";

import { render } from "react-dom";

This is pulling in the react library & react-dom to enable your app to render(<App/>, document.getElementById("root"));

Next key portion is:

const App = () => (

<>

My Home Dashboard

</>

);

At this stage, everything that is added between the two <> & </> is going to be rendered in the browser after executing npm start

Currently shown in browser

package.json

This is where the ‘magic’ happens. This is where React and Parcel are all pulled into play and the node scripts are placed:

{

"name": "dhome",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"start": "parcel ./src/index.html"

}

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"parcel-bundler": "^ 1.12.3",

"react": "^ 16.9.0",

"react-dom": "^ 16.9.0"

}

"devDependencies": {

"parcel-bundler": "^ 1.12.3"

}

}