In this tutorial, we will be exploring in more depth how Cx framework works, and learn about its many rich features. Most of the design principles used in Cx are also broadly applicable to many other JavaScript frameworks.
As Cx is built on top of React, it is assumed for this tutorial that you are familiar with some of the latest JavaScript features and the JSX syntax used in React. If this is not the case, we highly recommend you go through this amazing introductory tutorial for React first, and come back here once you're ready.
If you get stuck, our CxJS slack channel is a great way to get quick help. Also, you can file any issues via GitHub, and we’ll do our best to help you out.
-
- What are we going to build
- Data model
- Fake data
-
- Setting up a new Cx project
- Examine project folder structure
- Install Material design theme
-
- Application state (Store)
- Data-binding
- Controllers
-
- Layout intro
- App layout
- Routes
- Links
-
- Fake data generator
- Loading data to the Store
- Using Grid to display data
- Adding Edit and Remove actions
-
- Route parameters + Sandbox (edit entry example)
- Build the form (buttons, text fields, number fields, date fields, lookup fields...)
- Form validation
- Data loading
- Saving data to the store
- Explain other common Store manipulations
-
- add entry
- remove entry
- localStorage
- add basic filtering and search functionality to the Entry log page
-
- Add charts and graphs to visually represent the data
- Explain triggers and computables