In this post I started looking into ReactJS. Following getting the sample project running, I decided that I’ve try adding a new screen. Since it didn’t go as smoothly as I expected, I’ve documented my adventures.
The target of this post is to create a new screen, using the sample project inside Visual Studio.
Step 1
Create a brand new project for React:
If you run this out of the box (if you can’t because of missing packages then see this article), you’ll get a screen that looks like this:
Step 2
Add a new tsx file to the components:
Here’s some code to add into this new file:
import * as React from 'react'; import { RouteComponentProps } from 'react-router'; export class NewScreen extends React.Component<RouteComponentProps<{}>, {}> { public render() { return <div> <h1>New Screen Test</h1> </div>; } }
The Javascript as HTML above is one of the things that makes ReactJS an appealing framework. Combine that with Typescript, and you get a very XAML feel to the whole web application.
Step 3
Add a link to the Navigation Screen (NavMenu.tsx):
<div className='navbar-collapse collapse'> <ul className='nav navbar-nav'> <li> <NavLink to={ '/' } exact activeClassName='active'> <span className='glyphicon glyphicon-home'></span> Home </NavLink> </li> <li> <NavLink to={ '/counter' } activeClassName='active'> <span className='glyphicon glyphicon-education'></span> Counter </NavLink> </li> <li> <NavLink to={ '/fetchdata' } activeClassName='active'> <span className='glyphicon glyphicon-th-list'></span> Fetch data </NavLink> </li> <li> <NavLink to={'/newscreen'} activeClassName='active'> <span className='glyphicon glyphicon-th-list'></span> New screen </NavLink> </li> </ul> </div>
If you run this now, you’ll see the navigation entry, but clicking on it will give you a blank screen. It is just that scenario that motivated this post!
Step 4
Finally, the routes.tsx file needs updating so that it knows which screen to load when:
import * as React from 'react'; import { Route } from 'react-router-dom'; import { Layout } from './components/Layout'; import { Home } from './components/Home'; import { FetchData } from './components/FetchData'; import { Counter } from './components/Counter'; import { NewScreen } from './components/NewScreen'; export const routes = <Layout> <Route exact path='/' component={ Home } /> <Route path='/counter' component={ Counter } /> <Route path='/fetchdata' component={FetchData} /> <Route path='/newscreen' component={NewScreen} /> </Layout>;