Carbon | Create and share beautiful images of your source code

PHOTO EMBED

Wed Aug 30 2023 11:29:50 GMT+0000 (Coordinated Universal Time)

Saved by @GeraldStar #undefined 

Create a new React project using a tool like Create React App:
​
npx create-react-app my-app
cd my-app
​
Install React Router:
npm install react-router-dom
​
​
Create some components to represent different pages in your application. For example, let's create a Home component and a About component:
​
import React from 'react';
​
const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to the Home page</p>
    </div>
  );
};
​
const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the About page</p>
    </div>
  );
};
​
​
Use React Router to define the routes for your application and render the corresponding component based on the current URL:
  
  import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
​
const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};
​
export default App;
​
​
​
Finally, render the App component in your index.js file:
​
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
​
ReactDOM.render(<App />, document.getElementById('root'));
​
​
And that's it! Now you have a basic single page application in React. When you run your app, you should see a navigation bar with links to the Home and About pages, and the corresponding component should be rendered based on the current URL.
content_copyCOPY

https://carbon.now.sh/k4Zs19w10CiMdqgUhNTc