WHAT YOU’LL LEARN
- how to adapt the existing
Layoutcomponent and CSS styles to better suit the needs of our application
- how to add extra NPM libraries via the yarn workspace command
Can I use this?
In order to follow this tutorial, you must use Webiny version 5.14.0 or greater.
As our first step, let's install the Ant Design React library and import it in our application code.
To install it, we can run the following command from our project root:
Notice how we had to run the
yarn workspace command and specify the workspace name (
pinterest-clone-app) in order to add the
antd NPM package. This is because every Webiny project is organized as a monorepo and can consist of multiple workspaces. To learn more, check out the Monorepo Organization key topic.
pinterest-clone/app/code/src/App.tsx file contains the root
App React component. This is also usually the place where we configure different libraries, use different React provider components, and more.
Note that importing the library may visually disrupt the initial design of our application and this is to be expected. For now, we don't need to worry about this, as, ultimately, once we complete all of the upcoming steps, everything will fall in its place.
Layout React component, located in the
pinterest-clone/app/code/src/components/Layout.tsx file, is a global component which defines the default visual layout of our application. In terms of what we're building here, it should place the header bar at the top of the screen, and below it, render any React components that have been passed to it as its children.
By rendering all of our application's pages as children of the
Layout component, we ensure that every page is visually consistent. And, if we decide to make a change in the layout down the road, we can do it in a single React component, and all of the pages will be affected.
Let's prepare the layout for our application by simply replacing the code in the existing
pinterest-clone/app/code/src/components/Layout.tsx file with the following:
For now, this code will only render the application logo on the left side of the header. The New Pin and User Menu on the right, shown in the above layout diagram, will be added later, in the upcoming sections of this tutorial.
If you tried to view the results of what we've been doing so far, you'd still be looking at an application that's visually broken. This is because we're missing the last piece of the puzzle, and that is adjusting the global CSS styles.
Time to remove some of the styles that got automatically included in the generated React application. So, let's replace the code in
pinterest-clone/app/code/src/styles/global.scss file with the following:
With this final step, we should have our application layout in place, and we should be ready to continue with the next step: building the New Pin modal dialog.
The final step that we need take here is cleaning up the
Home component, located in the
pinterest-clone/app/code/src/plugins/routes/home.tsx file, and removing the
UsefulLinks components, located in the
All of these files were created during the scaffolding process, and are basically not needed by our application. Alternatively, you could also move these files into a separate backup folder of your choice, possibly for future reference.
Once cleaned up, the
Home component might look something like the following:
And this is what you should end up with once you've completed all of the steps. Basically, a blank page with just the header at the top of the screen, and that's it.
Now that we have this foundation in place, we can start building the rest of the planned functionality.