Understanding Litho
This section aims to give you a brief overview of core Litho fundamentals, after which you'll build a small Instagram clone. The content doesn't assume any existing Litho knowledge
Litho fundamentals
- Understanding Components: The fundamental building blocks of UIs in Litho.
- Placing components in Litho's layout system: Understanding how Litho uses the Yoga to measure and layout on-screen components.
- Hooks and States: To persist component states across renders.
Building your first Litho app
Now you'll build an Instagram clone using some core APIs that were already mentioned such as props and states. You'll also get to build a list UI in Litho
The tutorial's content is divided into the following sections:
- Setting up the Project - helps you set up the environment for the rest of the tutorial.
- Components and Props - learn the basic Litho building blocks, write a simple Component, extend it to accept props, and become familiar with building layouts with Flexbox in Litho.
- Introducing Layout - helps you to become familiar with building layouts with Flexbox.
- Adding State - teaches you how to make your Components interactive.
- Building Lists - gives an overview of how to build lists in Litho.
Getting the most from the tutorial
The way to get the most out of this tutorial is to 'learn by coding'. So, rather than just reading through the text, it's a good idea to 'try out' the code and experiment with your ideas.
You don’t have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can, even if it’s just one or two sections per session.
Note: Before you dive into the tutorial, it's highly recommended you watch this short video on how Litho functions and how a Litho component gets turned into a View on the screen: