Tutorial - Create a mini-app with UI Framework
Create a mini application using the C3 UI Framework.

Overview

This tutorial guide is meant to be completed within a day.
In the mini-app tutorial, we use UI Framework to create a front-end application that renders components, pages, and more. Because each tutorial builds off of the previous tutorial, it is important to follow the tutorial in order. The concepts and techniques you learn in this tutorial are the fundamentals and foundations in creating a front-end application in UI Framework.
We assume that you have familiarity with
  • the Redux cycle
  • how the state is managed in the UI Framework
For more information on how state is managed in the UI Framework, go to Manage Application State.

Prerequisite

  • Install Google Chrome + Redux DevTools Extension.
  • Install VS Code + C3 AI Extension.
  • Have a C3 AI environment ready to use.
  • Highly recommended: Install UI IDE (User Interface - Integrated Development Environment).

Create a dependency to UI Demo

The mini-app tutorial depends on UI Demo for seed data.
Create a dependency on UI Demo by changing the package.json file. In the dependencies field, we add uiDemo. The package.json should look similar to this:
package.json
1
{
2
"name": "exampleUI",
3
"description": "Example Exercises",
4
"author": "C3 Team",
5
"dependencies": ["uiDemo"]
6
}
Copied!