First, you need a place to draw. Usually, the starter code includes a start function.
: Nested views often require a specific height , width , or flex: 1 property to be visible.
Create a rectangle that acts as the main container. Give it a neutral background, like light gray, and a border so you can see its boundaries.
: Aligns items along the primary axis (vertical for columns, horizontal for rows).
Before you write a single line of code, ensure your solution meets these hidden criteria: 2.3.9 nested views codehs
The exercise will provide you with a basic App.js file. Your task will be to modify the code within the render() function to create a specific nested View structure. You will probably need to:
export default function App() return ( <View style=styles.container> <View style=styles.viewOne> <View style=styles.viewTwo> <View style=styles.viewThree> </View> </View> </View> </View> );
function start() // All your code goes here
function RowView(item, onSelect) const el = createDiv('row'); el.textContent = item.title; el.addEventListener('click', () => onSelect(item)); return el; First, you need a place to draw
A review of generally highlights this exercise as a pivotal moment in the Introduction to Computer Science course. It is the point where students move from writing simple, linear HTML to building complex, professional-looking layouts.
To successfully complete the 2.3.9 exercise, you must be familiar with a few essential React Native components and style properties:
Exercise 2.3.9 forces you to practice this relative positioning.
Assume we are using the CodeHS JavaScript Graphics library. Create a rectangle that acts as the main container
: Build UI chunks (like custom headers or cards) that can be easily moved or duplicated.
: Always ensure every opening has a corresponding closing . Forgetting one will crash the React Native environment.
import React from 'react';