How to export and use a React Component

Click on the ellipsis and select the export option and save the file locally. We will be using CrewLead.jsx for our example.

To run this React component locally, you'll need to set up a React development environment and integrate this component into a React project. Here's a step-by-step guide to get you started:

1. Install Node.js:
   • Download and install Node.js from the official website: https://nodejs.org/
   • Choose the LTS (Long Term Support) version for stability.
2. Create a new React project:
   • Open Command Prompt or PowerShell
   • Navigate to the directory where you want to create your project
   • Run the following command to create a new React project:
      

     npx create-react-app my-crew-app
   • Change into the project directory:
      

     cd my-crew-app
3. Install necessary dependencies:
   • In your project directory, run:
      

     npm install react-dom
4. Create the CrewLead component:
   •  move the downloaded file CrewLead.jsx  into the src folder of your project,
     
     
5. Modify your App.js to use the CrewLead component:
   • Open src/App.js
   • Replace its contents with something like this:
     jsx

     Copy

     import React from 'react';
import CrewLead from './CrewLead';

function App() {
return (
<div className="App">
<CrewLead
baseUrl="YOUR_API_BASE_URL"
bearerToken="YOUR_BEARER_TOKEN"
/>
</div>
);
}

export default App;
   • Replace YOUR_API_BASE_URL and YOUR_BEARER_TOKEN with the actual values for your API.
6. Start the development server:
   • In your project directory, run:
      

     npm start

This will start the development server, and your default web browser should open automatically to http://localhost:3000, where you'll see your React app running.

You can then customise the CrewLead.jsx to add color, title etc