DEPRECATED: this repo is no longer actively maintained. It can still be used as reference, but may contain outdated or unpatched code. If you are looking to build React UIs following IBM's design guidelines, please refer to the Carbon Design System.
A collection of React components to write web applications using the Watson APIs.
Documentation: https://watson-developer-cloud.github.io/react-components/
-
Install the library
npm install --save watson-react-components -
Add components to your React file where needed:
Example:
import { Header, Footer, /*...*/} from 'watson-react-components';
-
Make the assets public. For a Node.js/Express server, the following code should work:
app.use(express.static('./node_modules/watson-react-components/dist/'));
For other environments, check out the code and run
npm install; npm run buildand then copy the contents of thedist/directory into your static folder. -
Add a reference to the stylesheet.
<link rel="stylesheet" type="text/css" href="/css/watson-react-components.min.css">
Adjust the
hrefas necessary if a different location was chosen in step 3
-
Install Dependencies
npm install -
Start the development server
npm run dev
Changes will refresh the page thanks to browsersync.
-
Run the build command before pushing merge request:
npm run build
.
├── README.md
├── dist
│ ├── components // ES5 react components
│ ├── css
│ ├── images
│ ├── js
│ └── scss
├── example
│ ├── build
│ ├── index.html
│ └── src
├── gh-pages
│ ├── build
│ ├── images
│ ├── index.html
│ └── src
├── gulpfile.js
├── package.json
├── src
│ ├── components // React components
│ └── stylesheets // Sass files
└── static // static files
└── images // images
This sample code is licensed under Apache 2.0.
See CONTRIBUTING.
Find more open source projects on the IBM Github Page