

It’s a prescriptive way for handling the structure and managing the state of your application. Here I’m manipulating the values of some components just for fun: It automatically detects a React site and does it’s thing. You get a new tab in the DevTools bar (I dragged mine to the left to sit right next to the Elements tab). You can manipulate the props values as well. With it installed, you have the power to dig around through the whole tree and see what’s going on, viewing all the props and their values being passed down. The GIF from the README explains things very well:
Redux dev tools plus#
Plus it gives you the rendered HTML as well, so it’s the best of both worlds. That’s what React Developer Tools gives you. That’s a little useful, but it’s not nearly as useful as if you could see the whole React component structure as you’ve authored it. If you inspect the DOM in the regular native browser DevTools, you’ll see the rendered HTML. That’s called “props” in React, a way of passing data down into a component. And what is that user attribute? That’s not a real attribute. That’s not the actual HTML that will render in the browser. What the heck is ? It’s just the name of a component that you make. At the top level of a React project, it wouldn’t be weird at all to have like: You name these components you are making, and then they become like new HTML elements you use within the JSX. It looks like HTML right up in your JavaScript. Perhaps I would make a button component and that would go inside a list item component and that would go inside a sidebar component that goes inside a page. Like I was saying, you build things in React by building components and kinda piecing them together. React comes from Facebook, and as luck would have it, they also created the DevTools add-on (Chrome or Firefox). Working with Webpack and having it hot-reload just the components you’ve touched is awesome.īut let’s look at some other tooling, specifically what tools are available to you right in the browser as extensions to the browser native DevTools. Building components that you piece together to assemble a complete working page is very satisfying, for example. There are lots of very satisfying feelings that come along with it. If you haven’t dug into React yet, I’d encourage it. Have you played with React yet? I bet a lot of you have and you’re way ahead of me on this.
