> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt > Use this file to discover all available pages before exploring further. --- id: 21cd004a-9929-4358-b4dc-91aacaddcdd6 --- # CMS React overview > Learn how to build modules using React. Rather than using HubL to build modules, you can use JavaScript and React instead. JavaScript modules stitch server-rendered React components into the HTML generated by HubL, and also support client-side interactivity with [islands](/cms/reference/react/islands). This enables you to have more precise control over where and when JavaScript is shipped and run in the browser. Just like HubL-based modules, CMS React modules include a set of [HubSpot-provided fields](/cms/start-building/introduction/react-plus-hubl/modules#module-fields) that you'll use to configure and customize your modules. These are the same types of fields as HubL-based module fields, but with the added benefit of TypeScript definitions for autocompletion and validation. Get started by following the [CMS React module quickstart guide](/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart), or check out the [fields reference documentation](/cms/reference/fields/module-theme-fields) for the full list of available fields. ## Benefits of building with React vs. HubL At a high level, building with React comes with benefits including component composability, code reuse, broader community resources, and real access to JavaScript on the server at render time. Rendering React on the server means that there's less of a divide between your code that serves the initial page HTML and your interactive browser code. In contrast, creating complex and interactive pages with HubL can lead to: * An increase of client-side JavaScript that slows down the page until it's all been downloaded and executed. * Needing to replicate or maintain UI logic across HubL and JavaScript in order to have HTML that is immediately visible and interactive. But by building with JavaScript, you can code complex interactive components that either share code or are directly rendered on the server. When paired with the [islands](https://www.patterns.dev/posts/islands-architecture/) model, you can code web experiences that have good Core Web Vital scores (LCP, FID, CLS) even as complexity increases. Additionally, by building on top of JavaScript and the open source framework of React, you can use the wealth of tooling, third-party libraries via npm, example code, and more that are available in the broader ecosystem. For example, since JavaScript modules and partials are built on top of Vite, you'll get things like ESM, TypeScript, JSX, CSS modules, and tree-shaking out of the box. ## Local development When developing a CMS React project, you can start a Express + Vite local development server to view your local changes in the browser. This includes being able to view local changes on live HubSpot pages and page previews. Additionally, the local development server includes a Storybook integration so that you can start a Storybook instance alongside local development. Learn more about [local development for CMS React projects](/cms/reference/react/local-development). ## Building and deploying CMS React is built on the [developer projects framework](/cms/start-building/introduction/react-plus-hubl/project-structure), which uses a local build and deploy process. A project can be uploaded for build and deploy using the `hs project upload` command. This command can be run in the root of your project, or you can include a directory path in the command. ```shell theme={null} // In root directory hs project upload // Specified path hs project upload path/to/project ``` The upload command will kick off the project build. During the build process, CMS React projects go through [build health checks](/cms/reference/react/build-health-checks) to validate the project and prevent unexpected production behavior. By default, projects are configured to [auto-deploy](/cms/start-building/introduction/react-plus-hubl/project-structure#building-and-deploying) after a successful build. You can turn this setting off in HubSpot after your first successful deploy. If you turn off auto-deploy, you can manually deploy your project after a successful build by running `hs project deploy`. For more information about `hs project` CLI commands, check out the [documentation](/developer-tooling/local-development/hubspot-cli/project-commands) or run `hs project --help`. ## Fetching data There are multiple methods of fetching data into React modules depending on your use case and HubSpot account subscription. * On the server-side, you can fetch data using GraphQL, HubL, and the `getServerSideProps` function. * On the client-side, you can use [serverless functions](/cms/start-building/features/serverless-functions/overview#serverless-functions-for-the-cms) to execute server-side code without exposing credentials on the front-end. Because CMS React uses the projects framework, you can package a private app in the project to authenticate serverless function requests, or use secrets as needed. Learn more about [fetching data](/cms/start-building/introduction/react-plus-hubl/data-fetching). ## Styling HubSpot CMS React projects support a number of [styling methods](/cms/reference/react/styling), including the following libraries: * Tailwind * styled-components * styled-jsx * CSS Modules Beyond these libraries, you can use any CSS-in-JS library that provides a server-side rendering API and doesn't depend on a Babel plugin. ## Limitations The following features are not currently available for React-based modules: * Importing JavaScript modules into JavaScript partials. * Online code editing within the design manager. * Some HubL features, such as certain tags and filters, may not be supported in JavaScript components.