#FRAGMENT REACT CODE#

We no longer have an unnecessary wrapping div breaking our layout. Let's replace our div with react-fragment and save. That was true for a long time, but as of React version 16.2, there's a new component called a fragment that lets you wrap a group of children without adding an extra node to the DOM. Don't we have to have some common parent to render? If we inspect the DOM in dev tools, you'll see that indeed our nav and main elements are wrapped in a div, which makes sense, since our React component on the left has a div wrapper around them. That seems like a logical thing to do, but if we save our work, you'll see that our layout on the right breaks. For example, we might want to create a new content React component that contains our nav and main elements, and then insert our new component where it should go.

#FRAGMENT REACT CODE#

As is commonplace when an application gets large, or we want to split out things into components, we'll refactor our code somewhat.

I've selected various elements on the page to indicate their designated grid area name, head, nav, main, and footer. file, you can see where I'm defining our grid template areas. You can see the rendered output here on the right. In our app.js file, I'm using a CSS grid for our layout with a header, nav, main, and a footer. In this case, I've tweaked the code somewhat from the base createReactApp code. , and start the React dev server with npm start. Once everything's created, then open up VS Code with code. Immediately see the entity app after it's bootstrapped. Instructor: First, let's create a new React app with npm init react-app and the name of your application.

Fragment react