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!