Sample Project

The WireBootstrap for React solution includes a sample project that demonstrates how to use WireBootstrap in React applications.

The following sections detail the main parts of the sample project.

Public Directory

The public directory contains the run-time elements of the React application. This directory is the root directory serving the application to a web browser.

index.html

index.html is the page that contains the root React element and, once rendered, the hierarchy of child elements within.

Sample Data

The sample data used in the project is in a JSON file located at \public\data\sample-data.json. The objects that expose this data to components is located in the source code directory.

lib

The \public\lib directory contains the third party libraries used in the sample project including the WireBootstrap Core and Bootstrap component libraries. These assets are installed to the \node_modules directory and then copied to \public\lib when the project is started.

theme

The sample project uses a simple Bootstrap theme from Colorlib. These assets are located in the public\theme directory.

Source Code

The entry point for the React application is at \src\index.tsx.

There are several data functions that serve the sample data to components. These functions are located at \src\sample-data.js.

Components

The \components directory contains the source code for the WireBootstrap for React component in a file called wire-component.js.

Other React components are also stored in this directory. These components are used to demonstration the different ways in which the WireBootstrap component can be used within React applications.