Sample react app github

Sample react app github DEFAULT

Getting Started

We provide a sample app using React that you can deploy on App Platform. These steps will get this sample application running for you using App Platform.

Note: Following these steps may result in charges for the use of DigitalOcean services.


Deploying the App

Click this button to deploy the app to the DigitalOcean App Platform. If you are not logged in, you will be prompted to log in with your DigitalOcean account.

Deploy to DigitalOcean

Using this button disables the ability to automatically re-deploy your app when pushing to a branch or tag in your repository as you are using this repo directly.

If you want to automatically re-deploy your app, fork the GitHub repository to your account so that you have a copy of it stored to the cloud. Click the Fork button in the GitHub repository and follow the on-screen instructions.

After forking the repo, you should now be viewing this README in your own GitHub org (e.g. ). To deploy the new repo, visit and click Create App. Then, click GitHub, select the repository you created and select the branch. App Platform will inspect the code, automatically detect the kind of component to create, and use the correct buildpack to create and deploy a container.

After clicking the Deploy to DigitalOcean button or completing the instructions above to fork the repo, follow these steps:

  1. Configure the app such as specifying HTTP routes, environment variables or adding a database.
  2. Provide a name for your app and select which region you want to deploy your app to and click Next. The closest region to you should be selected by default. All App Platform apps are routed through a global CDN. So this will not affect your app performance, unless it needs to talk to external services.
  3. On the following screen, leave all the fields as they are and click Next.
  4. Confirm your Plan settings and how many containers you want to launch and click Launch Basic/Pro App.
  5. You should see a "Building..." progress indicator. You can click View Logs to see more details of the build.
  6. It can take a few minutes for the build to finish, but you can follow the progress in the Deployments tab.
  7. Once the build completes successfully, click the Live App link in the header and you should see your running application in a new tab, displaying the home page.

Making Changes to Your App

If you followed the steps to fork the repo and used your own copy when deploying the app, you can push changes to your fork and see App Platform automatically re-deploy the update to your app. During these automatic deployments, your application will never pause or stop serving request because App Platform offers zero-downtime deployments.

Here's an example code change you can make for this app:

  1. Edit and replace "Welcome to Your New React App" with a different greeting
  2. Commit the change to the branch. Normally it's a better practice to create a new branch for your change and then merge that branch to after review, but for this demo you can commit to the branch directly.
  3. Visit and navigate to your sample app.
  4. You should see a "Building..." progress indicator, just like when you first created the app.
  5. Once the build completes successfully, click the Live App link in the header and you should see your updated application running. You may need to force refresh the page in your browser (e.g. using Shift+Reload).

Learn More

You can learn more about the App Platform and how to manage and update your application at

Deleting the App

When you no longer need this sample application running live, you can delete it by following these steps:

  1. Visit the Apps control panel at
  2. Navigate to the sample app.
  3. In the Settings tab, click Destroy.

Note: If you do not delete your app, charges for using DigitalOcean services will continue to accrue.


Kentico Kontent sample React single-page application

Netlify StatusLive DemoStack Overflow

This is a sample website written in JavaScript utilizing the Kentico Kontent Delivery API to manage and retrieve content. You can register your account for free at For a brief walkthrough, read Running the React sample app on our Developer Hub.

Application setup

  1. Install the latest version of NodeJS and npm. You can download both at
  2. Clone the sample application repository.
  3. Navigate to the root folder of the application in the command line.
  4. Type to install required npm packages.
  5. Type to start a development server.
  6. The application opens in your browser at http://localhost:3000.

After starting, the sample application retrieves content from the default Kentico Kontent sample project.

Connecting to your sample project

At the first run of the app, you'll be presented with a configuration page. It will allow you to connect the app to your Kentico Kontent project or create a new one. You'll also be able to start a trial and convert to a free plan when the trial expires.

Alternatively, you can connect your project manually as per the chapter below.

Connecting to your project manually

If you want to change the source Kentico Kontent project, follow these steps:

  1. In Kentico Kontent, choose Project settings from the app menu.
  2. Under Development, choose API keys.
  3. Copy your Project ID.
  4. Open in the root directory.
  5. Replace with your Project ID and remove entry.
  6. Save and rename the file .

When you now run the sample application, the application retrieves content from your project.

Get creative

Deploy, explore and change the app directly in the browser.

Remix on Glitch

Previewing content from your project

If you already have a Kentico Kontent account and you want to connect the sample application to a project of your own, you need to provide your Project ID and your Preview API key to authorize requests to the Delivery Preview API. For example, you can connect the application to your modified version of the sample project.

To preview content in the sample application, follow these steps:

  1. In Kentico Kontent, choose Project settings from the app menu.
  2. Under Development, choose API keys.
  3. Copy your Project ID and Preview API key.
  4. Open in the root directory .
  5. Replace and with your Project ID and Preview API key.
  6. Save and rename the file .

When you now run the application, you will see all project content including the unpublished version of content items.

Content administration

  1. Navigate to in your browser.
  2. Sign in with your credentials.
  3. Manage content in the content administration interface of your sample project.

You can learn more about content editing with Kentico Kontent in the documentation.

Content delivery

You can retrieve content either through the Kentico Kontent Delivery SDKs or the Kentico Kontent Delivery API:

  • For published content, use .
  • For unpublished content, use .

For more info about the API, see the API reference.

You can find the Delivery and other SDKs at


You can use eg. surge to deploy your app live. Check out the step-by-step guide on our blog.

Wall of Fame

We would like to express our thanks to the following people who contributed and made the project possible:

Would you like to become a hero too? Pick an issue and send us a pull request!

  1. Printable caution signs
  2. Medical technician salary
  3. Guinea pigs colorado springs
  4. Etp stock quote
  5. 15 cadillac cts v

edoko / react-js-sample Public

dependencies StatusdevDependencies Statusnpm versionBuild Status


Live Demo

This app is built using React.js Boilerplate project.

  • React.js (create-react-app)
  • React Router v4
  • Server: Node.js (Express)
  • Support 404 Not found page
  • Support Server-side rendering


Clone repository:

git clone [email protected]:edoko/react-js-sample.git

Before running:


Local test

Local+Server test

Server only test

Production build


This project was bootstrapped with Create React App.

Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide here.

Table of Contents

Updating to New Releases

Create React App is divided into two packages:

  • is a global command-line utility that you use to create new projects.
  • is a development dependency in the generated projects (including this one).

You almost never need to update itself: it delegates all the setup to .

When you run , it always creates the project with the latest version of so you’ll get all the new features and improvements in newly created apps automatically.

To update an existing project to a new version of , open the changelog, find the version you’re currently on (check in this folder if you’re not sure), and apply the migration instructions for the newer versions.

In most cases bumping the version in and running in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.

We commit to keeping the breaking changes minimal so you can upgrade painlessly.

Sending Feedback

We are always open to your feedback.

Folder Structure

After creation, your project should look like this:

For the project to build, these files must exist with exact filenames:

  • is the page template;
  • is the JavaScript entry point.

You can delete or rename the other files.

You may create subdirectories inside . For faster rebuilds, only files inside are processed by Webpack.
You need to put any JS and CSS files inside , otherwise Webpack won’t see them.

Only files inside can be used from .
Read instructions below for using assets from JavaScript and HTML.

You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.

Available Scripts

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Builds the app for production to the folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Note: this is a one-way operation. Once you , you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use . The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Supported Browsers

By default, the generated project uses the latest version of React.

You can refer to the React documentation for more information about supported browsers.


React github sample app

React + Redux Example App

RealWorld Frontend

React + Redux codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.


Originally created for this GH issue. The codebase is now feature complete; please submit bug fixes via pull requests & feedback via issues.

We also have notes in our wiki about how the various patterns used in this codebase and how they work (thanks @thejmazz!)

Getting started

You can view a live demo over at

To get the frontend running locally:

  • Clone this repo
  • to install all req'd dependencies
  • to start the local server (this project uses create-react-app)

Local web server will use port 4100 instead of standard React's port 3000 to prevent conflicts with some backends like Node or Rails. You can configure port in scripts section of : we use cross-env to set environment variable PORT for React scripts, this is Windows-compatible way of setting environment variables.

Alternatively, you can add file in the root folder of project to set environment variables (use PORT to change webserver's port). This file will be ignored by git, so it is suitable for API keys and other sensitive stuff. Refer to dotenv and React documentation for more details. Also, please remove setting variable via script section of - never override variables if they are already set.

Making requests to the backend API

For convenience, we have a live API server running at for the application to make requests against. You can view the API spec here which contains all routes & responses for the server.

The source code for the backend server (available for Node, Rails and Django) can be found in the main RealWorld repo.

If you want to change the API URL to a local server, simply edit and change to the local server's URL (i.e. )

Functionality overview

The example application is a social blogging site (i.e. a clone) called "Conduit". It uses a custom API for all requests, including authentication. You can view a live demo over at

General functionality:

  • Authenticate users via JWT (login/signup pages + logout button on settings page)
  • CRU* users (sign up & settings page - no deleting required)
  • CRUD Articles
  • CR*D Comments on articles (no updating required)
  • GET and display paginated lists of articles
  • Favorite articles
  • Follow other users

The general page breakdown looks like this:

  • Home page (URL: /#/ )
    • List of tags
    • List of articles pulled from either Feed, Global, or by Tag
    • Pagination for list of articles
  • Sign in/Sign up pages (URL: /#/login, /#/register )
    • Use JWT (store the token in localStorage)
  • Settings page (URL: /#/settings )
  • Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
  • Article page (URL: /#/article/article-slug-here )
    • Delete article button (only shown to article's author)
    • Render markdown from server client side
    • Comments section at bottom of page
    • Delete comment button (only shown to comment's author)
  • Profile page (URL: /#/@username, /#/@username/favorites )
    • Show basic user info
    • List of articles populated from author's created articles or author's favorited articles

Brought to you by Thinkster

ReactJS Automatic Deployments w/ Github Actions


This application was generated using JHipster 7.3.0, you can find documentation and help at


Before you can build this project, you must install and configure the following dependencies on your machine:

  1. Node.js: We use Node to run a development web server and build the project. Depending on your system, you can install Node either from source or as a pre-packaged bundle.

After installing Node, you should be able to run the following command to install development tools. You will only need to run this command when dependencies change in package.json.

We use npm scripts and Webpack as our build system.

Run the following commands in two separate terminals to create a blissful development experience where your browser auto-refreshes when files change on your hard drive.

Npm is also used to manage CSS and JavaScript dependencies used in this application. You can upgrade dependencies by specifying a newer version in package.json. You can also run and to manage dependencies. Add the flag on any command to see how you can use it. For example, .

The command will list all of the scripts available to run for this project.

PWA Support

JHipster ships with PWA (Progressive Web App) support, and it's turned off by default. One of the main components of a PWA is a service worker.

The service worker initialization code is commented out by default. To enable it, uncomment the following code in :

<script>if('serviceWorker'innavigator){navigator.serviceWorker.register('./service-worker.js').then(function(){console.log('Service Worker Registered');});}</script>

Note: Workbox powers JHipster's service worker. It dynamically generates the file.

Managing dependencies

For example, to add Leaflet library as a runtime dependency of your application, you would run following command:

To benefit from TypeScript type definitions from DefinitelyTyped repository in development, you would run following command:

Then you would import the JS and CSS files specified in library's installation instructions so that Webpack knows about them: Note: There are still a few other things remaining to do for Leaflet that we won't detail here.

For further instructions on how to develop with JHipster, have a look at Using JHipster in development.

JHipster Control Center

JHipster Control Center can help you manage and control your application(s). You can start a local control center server (accessible on http://localhost:7419) with:

Building for production

Packaging as jar

To build the final jar and optimize the jhipsterSampleApplicationReact application for production, run:

This will concatenate and minify the client CSS and JavaScript files. It will also modify so it references these new files. To ensure everything worked, run:

Then navigate to http://localhost:8080 in your browser.

Refer to Using JHipster in production for more details.

Packaging as war

To package your application as a war in order to deploy it to an application server, run:


To launch your application's tests, run:

Client tests

Unit tests are run by Jest. They're located in src/test/javascript/ and can be run with:

UI end-to-end tests are powered by Protractor, which is built on top of WebDriverJS. They're located in src/test/javascript/e2e and can be run by starting Spring Boot in one terminal () and running the tests () in a second one.

Other tests

Performance tests are run by Gatling and written in Scala. They're located in src/test/gatling.

To use those tests, you must install Gatling from

For more information, refer to the Running tests page.

Code quality

Sonar is used to analyse code quality. You can start a local Sonar server (accessible on http://localhost:9001) with:

Note: we have turned off authentication in src/main/docker/sonar.yml for out of the box experience while trying out SonarQube, for real use cases turn it back on.

You can run a Sonar analysis with using the sonar-scanner or by using the maven plugin.

Then, run a Sonar analysis:

If you need to re-run the Sonar phase, please be sure to specify at least the phase since Sonar properties are loaded from the file.

For more information, refer to the Code quality page.

Using Docker to simplify development (optional)

You can use Docker to improve your JHipster development experience. A number of docker-compose configuration are available in the src/main/docker folder to launch required third party services.

For example, to start a mysql database in a docker container, run:

To stop it and remove the container, run:

You can also fully dockerize your application and all the services that it depends on. To achieve this, first build a docker image of your app by running:

Then run:

For more information refer to Using Docker and Docker-Compose, this page also contains information on the docker-compose sub-generator (), which is able to generate docker configurations for one or several JHipster applications.

Continuous Integration (optional)

To configure CI for your project, run the ci-cd sub-generator (), this will let you generate configuration files for a number of Continuous Integration systems. Consult the Setting up Continuous Integration page for more information.


Now discussing:

UI-Router 1.0 React Sample Application

Travis badgeGreenkeeper badge

This sample app is intended to demonstrate a non-trivial ui-router react application.

  • Multiple sub-modules
  • Managed state lifecycle
  • Application data lifecycle
  • Authentication (simulated)
  • Authenticated and unauthenticated states
  • REST data retrieval (simulated)


We're using the State and Transition Visualizer to visually represent the current state tree, as well as the transitions between states. Explore how transitions work by hovering over them, and clicking to expand details (params and resolves).

Note how states are entered when they were previously not active, exited and re-entered when parameters change, and how parent states whose parameters did not change are retained. Each of these (exited, entered, retained) correspond to a Transition Hook.


The application is written in ES6, and utilizes ES6 modules. We are loading the modules using SystemJS and es6-module-loader in the browser (note: currently, we are also transpiling in the browser, but will be transpiling at build-time in the future for better performance/smaller payload).

There are many ways to structure a ui-router app. We aren't super opinionated on application structure. Use what works for you. We organized ours in the following way:

  • Sub-module (feature) organization
    • Each feature gets its own directory.
    • Features contain states and all its components.
    • Router/state components live in the feature directory.
    • "Dumb" components used only within a feature live in a subdirectory
  • Leveraging ES6 modules
    • Each state is defined in its own file
    • Each component is defined in its own file
    • Components export themselves
    • Components are then imported into states where they are composed into the state definition.
    • States export themselves
    • The imports all states and registers them with the

UI-Router Patterns

  • Defining custom, app-specific global behaviors
    • Add metadata to a state, or state tree
    • Check for metadata in transition hooks
    • Example:
      • If a transition directly to a state with a property is started, the transition will be redirected to the state which the property names.
    • Example:
      • If a transition to a state with a truthy property is started and the user is not currently authenticated
  • Defining a default substate for a top-level state
    • Example: declaring in ( state)
  • Defining a default parameter for a state
    • Example: parameter defaults to 'inbox' in ( state)
  • Application data lifecycle
    • Data loading is managed by the state declaration, via the block
    • Data is fetched before the state is entered
    • Data is fetched according to state parameters
    • The state is entered when the data is ready
    • The resolved data is injected into the components via props
    • The resolve data remains loaded until the state is exited

2369 2370 2371 2372 2373