# DocumentViewer for React Prerelease > We just published a prerelease version of the TX Text Control DocumentViewer for React. This tutorial shows how to create your first React application using the DocumentViewer. - **Author:** Bjoern Meyer - **Published:** 2020-10-27 - **Modified:** 2025-11-16 - **Description:** We just published a prerelease version of the TX Text Control DocumentViewer for React. This tutorial shows how to create your first React application using the DocumentViewer. - **2 min read** (370 words) - **Tags:** - ASP.NET Core - DocumentViewer - React - Tutorial - **Web URL:** https://www.textcontrol.com/blog/2020/10/27/document-viewer-for-react-prerelease/ - **LLMs URL:** https://www.textcontrol.com/blog/2020/10/27/document-viewer-for-react-prerelease/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/10/27/document-viewer-for-react-prerelease/llms-full.txt --- We just published a prerelease version of the TX Text Control DocumentViewer for React on [npm](https://www.npmjs.com/package/@txtextcontrol/tx-react-document-viewer). Just like the DocumentViewer for Angular, it runs with the same [ASP.NET (Core) backend](https://www.textcontrol.com/blog/2020/07/16/building-an-aspnet-core-backend-for-angular-applications/llms-full.txt) powered by [TX Text Control .NET Server](https://www.textcontrol.com/product/tx-text-control-dotnet-server/). React is a declarative, efficient, and flexible JavaScript library for building user interfaces. To learn more about React and to learn how to get started, please visit the [React website](https://reactjs.org/tutorial/tutorial.html). ### Step 1: Trial Access Token The easiest way to evaluate TX Text Control for React (and Angular) without hosting your own backend server is by creating a trial access token valid for 30 days. [Request Token](https://www.textcontrol.com/product/client-package/token/ "Request Token") ### Step 2: Creating the React App 1. Install [Node.js® and npm](https://nodejs.org/en/download/), if not done before. 2. Open a Command Prompt and install create-react-app by running this command in your terminal: ``` npm install -g create-react-app ``` 3. Run the following command to create a React application named mydocviewerapp: ``` npx create-react-app mydocviewerapp ``` 4. Change into the created folder by typing in the following command: ``` cd mydocviewerapp ``` 5. Install the TX Text Control document viewer package by typing in the following command: ``` npm install --save @txtextcontrol/tx-react-document-viewer ``` 6. Open this folder in Visual Studio Code using this command: ``` code . ``` 7. In Visual Studio Code, open the file *src -> App.js*, replace the content with the following code and save it. Replace *yourtoken* with your actual access token you created at the beginning of this tutorial. ``` import React from 'react' import DocumentViewer from '@txtextcontrol/tx-react-document-viewer' const signatureProps = { showSignatureBar: true, signatureBoxName: 'txsign', redirectUrlAfterSignature: 'https://www.textcontrol.com', ownerName: 'Paul', signerName: "Jakob", signerInitials: "PK" }; const App = () => { return

DocumentViewer Sample

} export default App ``` ![Creating the React App](https://s1-www.textcontrol.com/assets/dist/blog/2020/10/27/a/assets/code.webp "Creating the React App") 8. Back in the command prompt, start the React application by typing in the following command: ``` npm start ``` Your default browser is opened with your created React app: ![Creating the React App](https://s1-www.textcontrol.com/assets/dist/blog/2020/10/27/a/assets/app.webp "Creating the React App") --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [How to Mail Merge MS Word DOCX Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/16/how-to-mail-merge-ms-word-docx-documents-in-aspnet-core-csharp/llms.txt) - [Electronic Signatures: Requesting Signatures from Multiple Signers using Custom Signature Workflows](https://www.textcontrol.com/blog/2023/01/02/electronic-signatures-requesting-signatures-from-multiple-signers-using-custom-signature-workflows/llms.txt) - [Adding SVG Watermarks to Documents](https://www.textcontrol.com/blog/2022/01/28/adding-svg-watermarks-to-documents/llms.txt) - [Using MailMerge in ASP.NET Core 6 Web Applications](https://www.textcontrol.com/blog/2022/01/27/using-mailmerge-in-aspnet-core-6-web-applications/llms.txt) - [DocumentViewer Mobile-Friendly View Released](https://www.textcontrol.com/blog/2022/01/20/document-viewer-mobile-friendly-view-released/llms.txt) - [Creating an ASP.NET MVC DocumentViewer Application With Razor](https://www.textcontrol.com/blog/2020/01/01/creating-an-aspnet-mvc-documentviewer-application-with-razor/llms.txt)