Tutorial - Create a mini-app with UI Framework - UI Framework Developer Guide

Search…

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!

Styling - Previous

Custom Templates

Next - Tutorial - Create your mini app

Tutorial - Create a Home Page with Navigation Bar

Last modified 2mo ago

Export as PDF

Copy link

Contents

Overview

Prerequisite

Create a dependency to UI Demo