DejayJD / react-tutorial

A walkthrough of basic React concepts

React Tutorial

Learning some of the fundamentals of React.

In order to get started, go through the walkthrough files, numbered in the correct order, and move them into the src directory.

Once the files are there - run npm start and navigate to localhost:3000

Walkthrough Guide

1. Copy index.html file into public/
2. Copy App.js into src/
3. Copy index.js file into src/
4. Look at React Dev Tools
5. Play around with some changes to App.js - use some JSX using a template variable
6. Create a side nav bar component or copy component
7. Create Card component or copy component
8. Import the Card component into App.js
9. Make multiple Card components
10. Copy in spreadsheet component
11. Copy in Cell component
12. Show Cell props in Cell component
13. Show Cell props in Spreadsheet component
14. Try adding onClicks to spreadsheet (it wont work)
15. Add click “bubbling up” from the Cell component
16. Store state in the board component and pass those values to Cells
17. Add clicking to change the state of the board
18. Transition storing state to contain history instead
19. Add an undo feature to revert state
20. Look at mobile/ to see how a React Native app differs from React

If stuck, the after branch has the final state of the demo