justinobney/00_intro.md

## 00_intro.md

      
    Raw
  

              00_intro.md
            
          
    Learn React (or other libs)

Let's get together and build a component in React each week.
We can then check out each other's solutions to the challenge and hopefully get better at this development thing.
While my goal is to get better at React, other libraries are also welcome.
There is so much out there we can learn from.
This is not meant to be a tutorial.
There are TONS of those for react already on the web.
We are going to start with very simple components and work into more complex scenarios.
Some good resources:

http://facebook.github.io/react/
https://github.com/enaqx/awesome-react

I have also provided a very simple JSBin starting template.
We are still working out how we will showcase our solutions to make collaboration and viewing easier.
For the time being, feel free to post links to you JSBins in the comments of this Gist

01 - simple numeric input control
02 -inline edit list
comments


## 01_learn-react_small-number-input.md

      
    Raw
  

              01_learn-react_small-number-input.md
            
          
    Week 1

This week I picked a component from a Dribbble shot.
The main focus is on the simple component itself.
I have added a little rendering logic at the bottom of the JSBin starting template.
You can mainly ignore this.
We will eventually get into state management, but I wanted to start simple.
The component (outlined in red)


More Info

Should accept the following props:

label - text next to value
value - numeric value to render
onChange - function to call with +1 or -1 (intent to change value)
icon? - this could be an optional icon

Perhaps something like:
<SimpleNumberInput
  value={guestCount}
  label="Guests"
  onChange={handleGuestChange}
  icon="user" />
Submissions:

justinobney
petebrowne
aclave1


## 02_learn-react-_inline-edit_list.md

      
    Raw
  

              02_learn-react-_inline-edit_list.md
            
          
    Week 2

The component should have the following characteristics:

render a list of items
each item should be able to be in "view" or "edit" mode

The ability to add a new item is optional, but beyond the scope of this exercise.
The goal of this exercise is rendering lists of data and swapping the rendered components based on state.
The (suggested) component concept


Example state:
const state = {
  items: [
    {id: 1, name: "let's learn react", url:'http://facebook.github.io/react/', category:'tech'},
    {id: 2, name: "by building things", url:'https://github.com/enaqx/awesome-react', category:'tech'},
    {id: 3, name: "it could be fun", url:'https://gist.github.com/justinobney/5c952ffedf51a61b8192', category:'tech'}
  ],
  editId: null
}
Submissions:

justinobney input values via refs
aclave1 input values via component internal state