Some time ago I created a profile page using react for my AltSchool Second Semester Examination and in this article, I go through the steps I took to accomplish it. We were to set up a react-router and implement a nested route, 404 page and Error boundary. we were also to set up a fake UserAuth context using the context API to always carry out a fake authentication. I also implemented SEO and Navigation menu that will always show on each page.
what is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components” -beta.react.js.org.
Firstly make sure you have npx and Node.js installed and you can do this by simply typing ⬇️ in your terminal,
npm -v
node -v
Once you confirm you have what is required you can create your react app and you can do this using create-react-app on your terminal..
npx create-react-app app-name
npm start
After runninng the create react app on your pc, you are going to see this or something similar;
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd app-name
npm start
Happy hacking!
But before then it is important to create the app in the file/place you want it to be in because that is where your app will be located. After creating the app it comes with some in-built modules, it has and some major files like the app.jsx and the index.jsx file.
Then you can type in the next command as show below to run it locally so you can test how the project will appear on the server.
cd app-name
Now you can run the project using the npm start script
npm start
when the command runs successfully, you'll receive an output with the url for the local development server
ompiled successfully!
You can now view digital-ocean-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.110:3000
Note that the development build is not optimized.
To create a production build, use npm build.
Now you can open a browser to http://localhost:3000 and you’ll find your project:
Now we have created our react app, the above is what it should look like, we can now develope the app to our preference. Based on the question I decided to go for a simple profile page that has a Sign-in page, a home page, an about me page, a users page, and of course an error page, from the app.js file showed below I created a components folder that contains my different pages. I also implented react router that enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.
App.js
import './App.css'
import Home from './components/Home'
import About from './components/About'
import Users from './components/Users'
import LogIn from './components/LogIn'
import SignInRedirect from './components/RedirectPage'
import NotFound from './components/NotFound'
import React from 'react'
// import Navbar from './components/Navbar'
import {HelmetProvider} from 'react-helmet-async'
import BasicExample from './components/Navbar'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error, errorInfo) {
this.setState({
error: error,
errorInfo: errorInfo
})
}
render() {
if (this.state.errorInfo) {
return (
<div>
<h2>Something went wrong.</h2>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</div>
);
}
return this.props.children;
}
}
function App() {
return (
<HelmetProvider>
<main>
<BrowserRouter>
<BasicExample/>
<Routes>
<Route exact path="/" element={<LogIn />} />
<Route path="/redirectionpage" element={<SignInRedirect />} />
<Route exact path="/Home" element={<Home />} />
<Route path="/Users" element={<Users />} />
<Route path="/About" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
<ErrorBoundary />
</BrowserRouter>
</main>
</HelmetProvider>
)
}
export default App;
and then we also have my index.jsx file,That typically handles your app startup, other functions of your application and does require other modules to add functionality. If you're running a website or web app it would also handle become a basic HTTP web server replacing the role of something more traditional like Apache
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import FakeUserAuthContextProvider from "./components/FakeUserAuthClearance"
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<FakeUserAuthContextProvider>
<App /></FakeUserAuthContextProvider>
)
As stated earlier I decided based on the question to go for a simple profile page that has a Sign-in page, a home page, an about me page, a users page, and of course an error page.
The home page is the welcome page that is linked to all the other pages, but before you can get to the home page you have the sign in (which is optional), you can sign-in first and this is where I decided to put the userAuth function, that is if you are not signed in with your email or your username is less than four letters it would be flagged as a fake user and an error message will pop up,
Upon your signing in correctly, I created a custom hook that will get your name and welcome you as the signed-in user. I also implemented SEO-search engine optimization (SEO) is the art and science of getting pages to rank higher in search engines such as Google. Because search is one of the main ways in which people discover content online, ranking higher in search engines can lead to an increase in traffic to a website. and this is simply done by wrapping your head tag with <Helmet> as shown below, I did this for all my component files.
function About() {
return (
<>
<Helmet>
<title>Homepage</title>
<meta
name="description"
content="This page describe's my "
/>
</Helmet>
<div className="Aboutcontainer">
But if you click on a page that does not exist or an invalid link a 404 message will show on screen and direct you back to the welcome(Sign-In) Screen.
please click on this link to go to a live demo, and see the full code, also please check out the app.