You are viewing the docs for v6 of React Static. You can browse all historical versions via Github branches!
React Static
A progressive static-site generator for React.
React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites. It's been carefully designed to meet the highest standards of static-site performance, and user/developer experience.
Features
- โ๏ธ 100% React (and friends!)
- ๐ Blazing fast builds and performance.
- ๐ Data Agnostic. Supply your site with data from anywhere, however you want.
- โ๏ธ Automatic code and data splitting!
- ๐ฅ Instant page views via PRPL pattern.
- โ๏ธ Progressive Enhancement + Graceful Fallbacks
- ๐ฏ SEO Friendly.
- ๐ฅ React-first developer experience.
- ๐ Painless project setup & migration.
- ๐ฏ Supports 100% of the React ecosystem. Including CSS-in-JS libraries, custom Query layers like GraphQL, and even Redux.
- ๐ฅ Hot Reloadable out-of-the-box. Edit React components & styles in real-time.
- ๐ฒ LAN accessible dev environment for testing on other devices like phones and tablets.
Articles, Videos & Tutorials
- Articles
- Videos & Tutorials
Sites Built with React-Static
- HeadlessCMS.org (source)
- StaticGen.com (source)
- Starbucks: Careers Hub(source)
- Intuit Turbo
- Nozzle.io (source)
- Timber.io
- TannerLinsley.com (source)
- Manta.life (source)
- Manticore Games
- BlackSandSolutions.co
- David York - Personal Blog
- Cryptagon - Crypto Portfolio Tracker
- Typetalk - Chat App for Businesses and Teams
- Lam Hieu - Personal Website
- Elsa Salonen - Artist Portfolio
- PSD Wizard: On-demand Front-End Coding Service
- NYC Vintage Map
- Eldar Labs - Utilities and Productivity Tools
- Dan Webb - Personal Website (source)
- Messenger Corp. client asset ordering
- Digital Neighborhood watch service
- Carmen Marcos Art - Artist Portfolio (source)
- BlockAce - Blockchain Jobs Board
- Luke Haas - Personal Website
- KleineKoning.nl - Webshop
- blue-frontend.com - Company Website
- mmxp.com.br - MadeiraMadeira Experience
- Fullstack HQ: Web Design & Development Team in the Philippines
- Be Clever: Games for kids and parents
- Stoplight: Best in class API Design, Docs, Mocking, and Testing (source)
- WordFlow: Copywriting service (source)
- Amplify Credit Union
Quick Start
- Install the CLI:
$ yarn global add react-static
# or
$ npm install -g react-static
- Create a new project:
$ react-static create
Or use npx
to create an app without global installing the CLI
npx react-static create --name=my-app
- Pick a template! See the full list of templates
- Navigate to your new project:
$ cd my-static-site
- Start the dev server and edit some code!
$ yarn start # or react-static start
- Test a production build
$ yarn stage # or react-static build --staging
$ yarn serve
- Build for production!
$ yarn build # or react-static build
Once you've installed and test driven, you may want to:
- Read about the core concepts of React Static
- Join the React Static Spectrum community!
- Familiarize yourself with the API!
Documentation
- Overview
- Core Concepts
- Guides
- Configuration
- CLI
- Components
- Browser
- Node API
- Plugins
- Changelog
- Contributing Guide
Plugins
For a list of supported plugins, view the Plugin documentation.
Templates and Guides
React Static ships with a few basic templates to you get you started quickly with react-static create
, then provides in-depth guides for further enhancement. You can check them out here!
Can't find an guide? You should write one! Here's how to get started.
Support, Community & Chat
Need some help? Have a quick question? Click here to sign up for the React-Tools spectrum community! We are constantly answering questions, discussing features and helping each other out!
Contributing, Issues & Bugs
We are always looking for people to help us grow react-static
's capabilities and examples. If you have found a bug, or have a feature request let us know!
License
React Static uses the MIT license. For more information on this license, click here.