Functional Components And JSX

Understanding the Challenge

Your goal is to build a React application that demonstrates how to create and use functional components along with JSX. You will also explore how to integrate external CSS, inline styling, images, variables, and object literals in your JSX. By the end, you will have a minimal but practical example of how React combines JavaScript and HTML-like markup.

In other words, you will create a Showcase component that displays information (like your favorite Pokémon), incorporate JavaScript variables and objects into your JSX, and use both inline and external CSS styling.

A Whiteboard Plan

Here is a simplified outline (like a whiteboard sketch) for constructing your component and app structure:

Set up the environment: Clone the starter repo, install dependencies, and run npm run dev.
Create a functional component: Make a Showcase.jsx file that returns a small piece of JSX.
Import and use the component: Integrate Showcase into App.jsx so it appears on screen.
Add JavaScript to JSX: Include variables and objects, then render them in the returned JSX.
Load an image: Import an image in Showcase.jsx and display it in your component.
Apply CSS: First try inline styling in JSX, then move some styling to an external CSS file.
(Bonus): Further improve the layout with external CSS or advanced styling techniques.

Carrying Out the Plan

Let's transform these steps into actual code. Think of each step as turning your whiteboard outline into a real React application.

Expected Input:

A React starter application with basic dependencies installed.
Optional personal choice of images and style preferences.

Expected Output:

A functional React app displaying a custom Showcase component.
Information (such as Pokémon data) rendered via JSX variables and objects.
Inline and external CSS styling applied to your component and layout.

Most Basic Solution

Below is a basic version of Showcase and App to illustrate how functional components and JSX come together.


// src/Showcase.jsx (Basic Version)
/*
  // Pseudocode comments:
  // 1. Define a functional component called Showcase
  // 2. Return a simple JSX with an <h1> element

  function Showcase() {
    return (
      <div>
        <h1>Showcase Component</h1>
      </div>
    );
  }

  export default Showcase;
*/


// src/App.jsx (Basic Version)
/*
  // Pseudocode comments:
  // 1. Import React and the Showcase component
  // 2. Return a main container with Showcase inside

  import Showcase from './Showcase';

  function App() {
    return (
      <div>
        <Showcase />
      </div>
    );
  }

  export default App;
*/

With these two files in place, when you run npm run dev in your React application, you should see "Showcase Component" on the page. This is enough to show you how a separate functional component can be imported and used inside another component. Next, we'll add more interesting JavaScript expressions, images, and styling.

Enhanced Working Solution

Let's expand Showcase with some JavaScript, an image, and inline styling.

Step by Step Directions


// src/Showcase.jsx
/*
  // Pseudocode comments:
  // 1. Create a variable favPokemon
  // 2. Create an object pokeCharacteristics with keys: type, move
  // 3. Return JSX that references those items
  // 4. Include an <img> element to show a local image
  // 5. Use inline styling for some text or backgrounds

  // Suppose you have an image named bulbasaur.png in src/images or a similar folder.
  // We'll import it for use in JSX.

  import bulbasaurPic from '../images/bulbasaur.png';

  function Showcase() {
    // Favorite Pokémon name:
    const favPokemon = 'Bulbasaur';

    // Pokémon characteristics:
    const pokeCharacteristics = {
      type: 'Grass',
      move: 'Vine Whip'
    };

    // Inline styling for the <h2> or <span> elements:
    // React expects style={{ ... }}
    const firstSpanStyle = {
      backgroundColor: 'green',
      color: 'white',
      padding: '4px'
    };

    const secondSpanStyle = {
      backgroundColor: '#ffffff',
      color: '#008000',
      padding: '4px'
    };

    return (
      <div>
        <h1>{favPokemon}'s Showcase</h1>
        <img
          src={bulbasaurPic}
          alt={favPokemon}
          style={{ width: '150px', borderRadius: '50%' }}
        />
        <h2>
          {favPokemon}'s type is
          <span style={firstSpanStyle}> {pokeCharacteristics.type}</span>
          and one of its moves is
          <span style={secondSpanStyle}> {pokeCharacteristics.move}</span>.
        </h2>
      </div>
    );
  }

  export default Showcase;
*/


// src/App.jsx
/*
  // Pseudocode comments:
  // 1. Import external CSS file for background
  // 2. Import Showcase component
  // 3. Wrap content in a div with a className for background

  import Showcase from './Showcase';
  import './App.css'; // no variable needed; just import

  function App() {
    return (
      <div className="background">
        <Showcase />
      </div>
    );
  }

  export default App;
*/


// src/App.css
/*
  .background {
    background: linear-gradient(
      90deg,
      hsla(77, 100%, 70%, 1) 0%,
      hsla(206, 67%, 75%, 1) 100%
    );
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    min-height: 100vh;
  }
*/

With these files in place, your app will display a gradient background, an image of Bulbasaur (or whichever Pokémon image you used), and a description of its type and move. The inline styles highlight the text differently.

Additional Explanations for New Developers

JSX: This special syntax lets you combine JavaScript and HTML-like elements. Anything in curly braces {} is executed as JavaScript.
Functional Component: A function that returns JSX. In this case, function Showcase() or function App() can be imported and used in other components.
Importing Images: You can reference images in React by importing them as modules, then assigning them to the src attribute in an <img> tag.
External vs Inline CSS: Inline styles in JSX require {{ key: 'value' }} syntax. For bigger styles, using external CSS files keeps things cleaner and more maintainable.

Evaluate and Reflect

Check your browser at http://localhost:5173 (or the URL that Vite logs in the terminal). You should see your new Showcase component in action. If everything is working:

You see a heading with "Bulbasaur's Showcase" (or your own text).
An image shows up, possibly styled with a border radius or size.
Text describing the Pokémon's type and move is inline-styled for emphasis.

That means you successfully integrated functional components, JSX, JavaScript variables, and CSS. If anything looks off, double-check your paths, file names, and your import statements.

Real World Analogy

Think of JSX as a translation layer: you're mixing your cooking ingredients (JavaScript) with a recipe template (HTML). The final dish (the rendered UI) is quick to prepare, but you have full control over the parts that go into it. This synergy of code and layout is what makes React so powerful and intuitive.

Further Examples

You can build on this foundation by:

Using State: Add React useState to let the user interact with or change data within Showcase.
Moving Inline Styles to External CSS: Keep your code cleaner, especially if you plan on multiple style rules.
Passing Props: Make the Showcase more flexible by passing a favPokemon prop from App.
Flexbox Layout: As suggested in the Bonus, use Flexbox or CSS Grid to center or arrange elements in a more sophisticated layout.

Conclusion

You've learned how to create a functional React component, add JSX with JavaScript expressions, import images, and style your page using both inline and external CSS. Understanding these fundamentals gives you a solid start in building more complex and interactive user interfaces in React. Practice by altering your component, adding new features, or experimenting with advanced styling to gain deeper familiarity with React’s component-based architecture.

Happy coding, and may your future components always load gracefully!