Create and Run a React Project

What is React?

React is an open-source JavaScript library for building user interfaces, maintained by Facebook. It focuses on building the view layer and enables developers to efficiently build complex user interfaces through a component-based approach. React's core philosophy is components and one-way data flow, making the code easier to understand and maintain.

Main Features and Advantages of React

• Component-based: Build user interfaces using components, making the code more modular and reusable.
• Virtual DOM: React uses a virtual DOM to optimize performance, updating the actual DOM only when necessary.
• One-way Data Flow: Data flows in one direction between components, making state management clearer and more predictable.
• Strong Community and Ecosystem: React has a large community and rich support of third-party libraries, making development more convenient.

Using React can help developers build modern, responsive web applications more efficiently.

Create and Run a React Project Using ServBay

In this article, we will create and run a React project using the Node.js environment provided by ServBay. We will use ServBay's "Host" feature to set up the web server and access the project through reverse proxy and static file services.

Create React Project

1. Initialize the Project

   First, ensure that you have installed the Node.js environment provided by ServBay. Then, initialize a new React project using the following command:

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. Install Dependencies

   Enter the project directory and install the dependencies:

   cd servbay-react-app
   npm install

Modify React Project Output

1. Modify src/App.js File

   Open the src/App.js file and modify the content to display "Hello ServBay!" on the webpage:

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <h1>Hello ServBay!</h1>
         </header>
       </div>
     );
   }
   
   export default App;

Enter Development Mode

1. Run Development Server

   Start the development server and specify the port (e.g., 8585):

   npm start -- --port 8585

   This will start a local development server and expose port 8585.

2. Configure ServBay Host Reverse Proxy

   Use ServBay's "Host" feature to access the development server through a reverse proxy. In ServBay's "Host" settings, add a new reverse proxy:

   • Name: My first React dev site
   • Domain: servbay-react-test.dev
   • Host Type: Reverse Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Refer to adding a Node.js development website for detailed setup steps.

3. Access Development Mode

   Open a browser and visit https://servbay-react-test.dev to see the project in real-time. With ServBay's support for custom domains and free SSL certificates, you will enjoy higher security.

Build Production Version

1. Build Production Version

   When development is complete, build the production version using the following command:

   npm run build

   After building, the generated static files will be located in the build directory.

2. Set Up Static File Service

   Use ServBay's "Host" feature to access the production version through a static file service. In ServBay's "Host" settings, add a new static website:

   • Name: My first React production site
   • Domain: servbay-react-test.prod
   • Host Type: Static
   • Root Directory: /Applications/ServBay/www/servbay-react-app/build

3. Access Production Mode

   Open a browser and visit https://servbay-react-test.prod to see the built production version. With ServBay's custom domains and free SSL certificates, your site will have higher security and credibility.

With these steps, you have successfully created and run a React project and used the features provided by ServBay to manage and access your project.