Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Adding a New Screen to the React Template Project

DZone's Guide to

Adding a New Screen to the React Template Project

If you're new to React.js, you might find adding a new screen to be a bit more challenging than you'd otherwise expect. Learn from this post as one developer documents his journey.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

In this post, I started looking into React.js. Following getting the sample project running, I decided that I'd 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.

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:

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 React.js an appealing framework. Combine that with TypeScript, and you get a very XAML feel to the whole web application.

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!

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>;

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
javascript ,web dev ,react.js ,react.js template ,javascript frameworks

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}