React Actions Lab

Overview

In this lab, you'll react to user input in action and pass components as context for actions.

React Spreadsheet

In this lesson we are going to write a simple spreadsheet application. Our goal isn't feature-parity with Microsoft Excel, but it's definitely going to be a lot fun and there are going to be lots of actions.

This is what we're going to build in this lab:

Screenshot

Looks complicated? — Don't worry! All our actions are already there, we just need to implement them!

At the end of this lab, our spreadsheet application is going to have the following functionality:

  • Users will be able to select cells, the currently selected cell is shown in the bottom left hand corner (5 — 1 in the screenshot).
  • The table is dynamic: We can add and remove columns from the able, but there will always be a minimum of one cell.
  • For obvious reasons, our users are going to be able to select a cell and fill it with content.

Components

Our app consists of the following components:

components/
├── Cell.js
├── Row.js
├── Spreadsheet.js
└── Table.js

<Cell />

Each cell represents an individual value in the spreadsheet app / table (e.g. "San Francisco" or "Weather").

<Row />

A single horizontal row that has one or more <Cell />s within it.

<Spreadsheet />

The main entry point of our application. A spreadsheet component contains a single <Table />, binds all actions and encapsulates the application state.

<Table />

A table contains one or more <Row /> components.

Actions

Our actions can be found in actions/index.js. Each action will be bound in the <Spreadsheet /> component.

Resources

bind() Partial function application JavaScript

View React Actions Lab on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us