React Monorepo / Smart Monorepo / Share Code

Import Libraries into the React Applications

All libraries that we generate are automatically included in the workspaces defined in the root-level package.json.

{
  "name": "@react-monorepo/source",
51 collapsed lines
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-router-dom": "6.29.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@babel/preset-react": "^7.14.5",
    "@eslint/js": "^9.8.0",
    "@nx/cypress": "20.8.1",
    "@nx/eslint": "20.8.1",
    "@nx/eslint-plugin": "20.8.1",
    "@nx/js": "20.8.1",
    "@nx/react": "20.8.1",
    "@nx/vite": "20.8.1",
    "@nx/web": "20.8.1",
    "@nx/workspace": "20.8.1",
    "@swc-node/register": "~1.9.1",
    "@swc/cli": "~0.6.0",
    "@swc/core": "~1.5.7",
    "@swc/helpers": "~0.5.11",
    "@testing-library/dom": "10.4.0",
    "@testing-library/react": "16.1.0",
    "@types/node": "^20.0.0",
    "@types/react": "19.0.0",
    "@types/react-dom": "19.0.0",
    "@vitejs/plugin-react": "^4.2.0",
    "@vitest/coverage-v8": "^3.0.5",
    "@vitest/ui": "^3.0.0",
    "cypress": "^14.2.1",
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^10.0.0",
    "eslint-plugin-cypress": "^3.5.0",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-jsx-a11y": "6.10.1",
    "eslint-plugin-react": "7.35.0",
    "eslint-plugin-react-hooks": "5.0.0",
    "jiti": "2.4.2",
    "jsdom": "~22.1.0",
    "nx": "20.8.1",
    "prettier": "^2.6.2",
    "tslib": "^2.3.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.19.0",
    "vite": "^6.0.0",
    "vitest": "^3.0.0"
  },
  "workspaces": [
    "apps/*",
    "libs/*"
  ]
}

Hence we can easily import them into other libraries and our React application. As an example, let’s use the pre-generated ProductsComponent component from our libs/products library.

You can see that the Products component is exported via the index.ts file of our products library so that other projects in the repository can use it. This is our public API with the rest of the workspace. Only export what’s really necessary to be usable outside the library itself.

export * from './lib/products';

We’re ready to import it into our main application now. First (if you haven’t already), let’s set up React Router.

npm add react-router-dom

Configure it in the main.tsx.

import { StrictMode } from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';

import App from './app/app';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Then we can import the Products component into our app.tsx and render it via the routing mechanism whenever a user hits the /products route.

import { Route, Routes } from 'react-router-dom';

// importing the component from the library
import { Products } from '@react-monorepo/products';

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

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/products" element={<Products />}></Route>
    </Routes>
  );
}

export default App;

Serving your app (nx serve react-store) and then navigating to /products should give you the following result:

nx serve react-store

products route

Let’s apply the same for our orders library. Import the Orders component from libs/orders into the app.tsx and render it via the routing mechanism whenever a user hits the /orders route.

In the end, your app.tsx should look similar to this:

import { Route, Routes } from 'react-router-dom';
import { Products } from '@react-monorepo/products';
import { Orders } from '@react-monorepo/orders';

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

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/products" element={<Products />}></Route>
      <Route path="/orders" element={<Orders />}></Route>
    </Routes>
  );
}

export default App;

Let’s also show products in the inventory app.

import { Products } from '@react-monorepo/products';

export function App() {
  return <Products />;
}

export default App;

Create Local Libraries

Visualize Project Structure

Files

Preparing Environment

Stubbing git
Installing dependencies