A React static site generator lets you use the React JavaScript library to incorporate dynamic elements into an otherwise static website.
The advantages of using a React static site generator include:
-
Having the power to create dynamic websites that are served more quickly to the end user.
-
Having the ability to easily edit and rebuild a website when you want to update it.
Here’s how to use the React static site generator on Glitch:
-
Click the New Project button and then select glitch-hello-react from the drop-down menu.
-
This will remix a copy of the template and save it to your account.
-
You will be able to find your project in the future by going to your dashboard.
Here’s how to edit your glitch-hello-react project:
In your new React project, you will see a few folders in the project editor file view. When you’re ready to begin editing the JavaScript elements of your project, you will work out of the src folder (/src).
Using /src:
When you want to edit the dynamic elements and styling for your site, you will work out of /src
-
In our template you will find the following pages already set up and ready for you to edit:
src/App.jsx - This is your React project. Here you can see the example language strings and click events currently used by the template.
src/index.jsx - This is the root of your React project where you can add JavaScript libraries.
src/index.css - Here’s where you’ll go to customize the layout, look and feel of your site.
Important notes about using the Glitch React template:
The template, ~glitch-hello-react is new on Glitch which means that there are a few limitations to keep in mind. While these limitations exist today, we plan to provide more options for generated static sites in the future. If there is a feature that you would like to see, you can post your request in our Community Forum.
Current limitations:
-
In order to generate a static site that uses React, you will need to be working out of a project that is a remix of ~glitch-hello-react. This means that you cannot take an existing project and turn it into a generated static site that uses React.
-
Git import will only work if the project is detected by our system to be generated_static when importing.
-
The project editor will use npm start and npm build to generate the site. This means that it’s not possible to configure the project so that it uses different start or build commands.
-
When you are editing your project you are editing the live glitch.me site. When you stop editing, the site is served statically which means that you can not manually trigger a build in the project editor. Instead, npm build will automatically run once the project goes to sleep. If you need to debug your build you can manually run npm run build in the project editor terminal.
If you’d like to learn more about React, check out the official documentation.