The best way to learn something new is to practice it. The best way to learn a new web technology is to do 100 variations of the piece of technology you want to learn. For React I want to make 100 React apps to learn and grow my skills.
To open an app or tinker on one...
cd into whichever rep you'd like and run npm start. You'll get a dev server up and running, make changes in app.css or app.js and you're on your way.
Possible reps I'd like to attempt:
- timer, kinda
- change a class on click
- tabbed nav
- calculator, kinda
- tax bracket calculator
- figure out how to deploy to a production site: Completed with rep 19!
- turn any date into a color
- show cursor location
- some kind of weather output reading an API
- to do list
- personal site generator
- bookDB
- cost of living breakdown
- budget builder
- navigation menu
- add state to every pixel hovered over
- html minifier
- time on site calculator
- show time in your city and in other cities
- turn any name into a color
- pig latin translator
- resume maker (enter a bunch of data and click a few buttons to change styles made)
- swanson pyramid of greatness
- markdown editor
- "are there nba games today?" app
- sticky scroll bar
- usefull css output with a gui like this
- reverse a string
- pig latin generator
- character counter
- count all characters and break them down into tweets
- quiz that tells you an nba team to like
- need more practce with props and state, so anything that does that
Additional ideas: Here, here, here and here.
Completed Reps
- Rep001: show time
- Rep002: show content of input on page
- Rep003: show content of input after button click - using refs
- Rep004: same as rep004 but with state
- Rep005: toggle class on click
- Rep006: tabbed navigation w/ lots of help from @ericf89
- Rep007: width and height of element. lots of help from this
- Rep008: move input range and value shows on page
- Rep009: click a button and add a div of each button color to the page
- Rep010: attempt to make an HTML generator, will come back to this when i figure out code / pre
- Rep011: load the page, see the time.
- Rep012: Go through each section and examples from React Patterns
- Rep013: Copy and paste the new React Router to test it out
- Rep014: AJAX Requests in React
- Rep015: Failed attempt and doing anything productive with dates
- Rep016: First pass at a simple calculator that just adds values
- Rep017: Play with inputs and state again
- Rep018: Reactforbeginners.com course materials
- Rep019: Tax bracket calculator up in here!!
- Rep020: Turn any date into a color! But this mostly sucks since there's a limit to values in days of the month and number of months so basically just cycle through red and black. BUT, played with inline styles, strings and dates a bit
- Rep021: Input a character goal, turn the page green as you get closer to your goal.
- Rep022: Attempt at making a receipt breakdown
- Rep023: Loop through component with data and then add class on click of component while removing all other classes from looped components
- Rep024: Call state in component via dot notation on object and loop through only that number of items