Developing with React

React is one of today’s most used web-based frameworks (Angular is great, too!), written in JavaScript. Developing with React can be quite a useful framework when it comes to single-page applications. Though in my opinion, React is not always the solution — depending on the project scope React may not be the best option.

So what is a suitable application for using React? For me, any type of a social media style application, web-based admin panel, or a simple web page with not too much static material would be a good candidate. If you or your team has experienced JavaScript web developers, React can be a great framework to use as well.

Starting Out

Before you begin developing with React you will need to have NodeJS and NPM in order to build the project, get dependancies, and run the development environment.

Dependancies

Application	Website URL
NodeJS	https://nodejs.org/en/
npm	https://www.npmjs.com/

create-react-app

React’s create-react-app tool is a great way to kick off your development environment. This will give your application a bare-bones environment for developing your react app. In your project directory using either a nodejs shell / powershell (windows) or a *nix shell issue the following commands:

npx create-react-app APPFOLDER
cd APPFOLDER
npm start

Replace APPFOLDER with a name suitable for your app (used to identify the name of your app as well as the project folder).

This set of commands will make use of the create-react-app which will build the required project files/dependancies into the APPFOLDER directory.

We then change directory to the new folder, and issue npm start which will start the React webpack development server. If you CTRL+C the terminal that is running npm start it will terminate the development server.

By default your applicaiton is made available at the machine’s localhost, on port 3000. In your browser you should be able to navigate to http://localhost:3000

Default React App landing page

Code structure

Utilzing the create-react-app script, the default environment is quite simple. You are free to lay out the structure however you want, but following the example app and then adding onto it would be my recommendation.

Let’s have a look at the basic file structure.

src/index.js

The main file that we are interested in is the src/index.js file. This is the entry point for the application — you can see in the image below that it will load our only component so far called App.

Default index.js code

We can make use of the index.js to include some components that we’ll need to be available to all pages/sub-components. For now, we don’t need to make any modifications to this file.

src/App.js

You can consider the App.js component file as the home-page view. It can also be useful to include things like the header/footer of the application here versus the index.js file. You may also want to perform your "Routes" definitions here as well.

Keep in mind that any authentication or sensitive views inside a react app should not be explicitly coded inside react. You will likely want to write a back-end application which can handle secure authentication and return data based on those methods rather than relying on React.

Default App.js code

As you can see there is very minimal code used with the default App, thus makes a great start to building your project.

When you are developing with React it can be overwhelming on how to proceed with your application. For example, if you want to be able to navigate to different pages or URLs of your application you will likely need to add additional dependancies to the app.

Routing

My recommendation for routing within a react app would be to use the react-router-dom component. They have some great resources available on their website here: https://reactrouter.com/web/guides/quick-start

Essentially, you will use npm to install it, and then include the component in your App.js.

npm install react-router-dom

Note: to include this in your package.json file use the --save flag at the end of the command.

Once installed, open up your App.js file and first include the router components like so:

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

Now you can replace the default App function using the code example from react-router-dom:

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

This should give you a basic starting point for your application’s routing and concludes our blog post for React basics. As with anyhting, the more you tinker, research, and try things the better the coding experience will be.

Need React development? Contact Us today to see if Nexix Inc. can help you with your development requirements!