reactjs / react-tutorial

Code from the React tutorial.
http://facebook.github.io/react/docs/tutorial.html
Other
3.29k stars 2.13k forks source link

Better visualisation of component hierarchy? #145

Closed lalwanivikas closed 8 years ago

lalwanivikas commented 8 years ago

I went through the tutorial recently and found it great!

One thing that I think can be improved for beginners is visualization of component hierarchy. It is very well described and visualized in Step-1 of Thinking in React.

So I went ahead and added a little CSS to make it clear. Please see screenshots below. Do you think something like this will add value? If so, I would love to improve it a bit and submit a PR.

Thanks :)

Before: screen shot 2016-07-07 at 8 15 37 pm

After: screen shot 2016-07-07 at 8 08 54 pm

sophiebits commented 8 years ago

I don't think we'll include something like this in the tutorial, but the React devtools let you browse the component tree and see the bounds of each component.