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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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