Day 3: Crafting Components, Styling, and Local Development

Greetings! Welcome back to Day 3 of our React journey. Today, we're delving into the art of crafting components, mastering styling, and harnessing the power of local development. Let's keep the momentum going as we explore these pivotal aspects of React application building.

Note 1: Starting to Make Components

Find out how to make a React app by creating custom components. These are like the building blocks that help you create things that people can interact with. Just like puzzle pieces, these components come together to make your app work.

Essential Insights:

• Custom Components: Your app's unique pieces.
• Reuse and Modularity: Assemble UI like building blocks.
• User Interaction: Dynamic and engaging user experiences.
• Illustration: Crafting a custom Button component.

** Code Example: Building a Custom Button**

import React from "react";

function Button(props) {
  return <button className="custom-button">{props.label}</button>;
}

export default Button;

Note 2:Building Component Connections

Picture your app's UI as a family, with parent components leading and child components following their lead. The secret sauce here is the ability to pass data and instructions between these components, forming an intricate web of functionality.

Invaluable Insights:

• Component Hierarchy: Organizing components like family members.
• Data Flow: Sharing information between generations.
• User Interaction: Collaboration for enhanced user experiences.
• Illustration: The dynamic interplay of Parent and Child components.

Code Example: Setting Up Parent and Child Components

import React from "react";
import Parent from "./ParentComponent";

function App() {
  return <Parent />;
}

export default App;

Note 3:Improving App Appearance with CSS Classes

Visual appeal is pivotal, and this is where styling steps in. Say goodbye to inline styles – we're embracing the elegance of CSS classes to adorn our components. Think of it as dressing up your app for a dazzling performance.

Key Insights:

• Styling Strategies: Choosing CSS classes over inline styles.
• CSS Classes: Enhancing aesthetics with class names.
• Separation of Concerns: Keeping style and logic distinct.
• Illustration: Elevating a custom Button component with CSS.

Code Example: Styling Components with CSS Classes

import React from "react";
import Button from "./ButtonComponent";
import "./styles.css";

function App() {
  return (
    <div>
      <Button label="React Style!" />
    </div>
  );
}

export default App;

Note 4: Designing Components for Smooth Workflow

Think of your codebase as a well-organized workspace. Similar to how you'd categorize tools, components need proper organization. We're exploring the benefits of clean project structure and smart component organization.

Essential Insights:

• Optimized Structure: Crafting a scalable and maintainable codebase.
• Folder Arrangement: Grouping related components for clarity.
• Import Clarity: Simplifying imports with structured folders.
• Illustration: Visualizing a well-organized component arrangement.

Example of Smart Component Organization:

src/
|-- components/
|   |-- Header.js
|   |-- Footer.js
|   |-- MainContent.js
|   |-- Button.js
|-- App.js
|-- index.js

Note 5: Speeding Up Development with Vite

Say hello to Vite – a powerful tool that speeds up development by providing lightning-fast reloads and bundling. With Vite, setting up a local React environment is easier than ever. Its quick bundling with ESBuild leads to smoother development and blazing-fast reloads.

Key Insights:

• Local Development: Setting up React on your local machine.
• Introducing Vite: Turbocharge development with Vite's efficiency.
• Speedy Iterations: Swift reloads and instant updates.
• ESBuild Integration: Bundling for optimized performance.
• Illustration: A guide to kick-starting React development with Vite.

Steps to Get Started:

1. Install Vite: npm install -g create-vite
2. Create a Vite project: npm create vite@latest you will see the following on your terminal

Need to install the following packages:

create-vite@4.4.1 (mailto:create-vite@4.4.1)

Ok to proceed? (y) y

✔ Project name: … vite-project

✔ Select a framework: › React

✔ Select a variant: › JavaScript

Scaffolding project in /Users/macbookpro/Documents/learn-react/react-try/vite-project...

Done. Now run:

cd vite-project

npm install

npm run dev

1. Navigate to the project folder: vite-project
2. Start the development server: npm run dev
3. Open your browser and visit: http://localhost:3000

Note 6: Recap of Day 3 - Building React Apps

Congratulations on completing Day 3! Let's summarize what we've achieved so far.

Key Takeaways:

• Custom Components: The essence of dynamic React apps.
• Parent-Child Relationship: Components collaborate like a family.
• Styling and Organization: Making apps visually appealing and organized.
• Local Development with Vite: Speedy local setup and efficient bundling. With these skills in your toolkit, you're ready to craft more engaging and powerful React applications. Stay tuned for more insights as we journey deeper into React!