04 Import Components and Setup layout
In this tutorial, you're setting up the layout and structure of a React-based website using Visual Studio Code, along with implementing Tailwind CSS for styling. You begin by running the application with npm run dev and setting up your workspace with both the website and Visual Studio Code displayed side by side for live updates.
Key steps include:
Setting up React Router: Import BrowserRouter from react-router-dom to manage navigation within the app.
Organizing Components: You consolidate all components by importing them into App.jsx from a centralized index.js within the components folder.
Adjusting File Paths: Correct an error by rearranging files within the correct directories when a misplaced folder causes a path error.
Implementing Auto-save and Tailwind CSS: Enable auto-save on focus change in Visual Studio Code and install Tailwind CSS intellisense for more efficient coding.
Building the Layout: Create the website structure within BrowserRouter, using Tailwind CSS classes to style a series of divs that will contain various components like NavBar, Hero, and other sections reflecting different content areas such as About, Experience, and Feedback.
By the end of the session, you have laid out the basic structure and are ready to populate and refine these components in future development sessions.
Resource Files
https://drive.google.com/file/d/1a483...
App.jsx Structure final
https://drive.google.com/file/d/1pcqe...