Skip to main content

Project 1, Milestone 2: Reusable Components with Props & Conditional Rendering

In this milestone, you will enhance your meme generator single-page application by making your components reusable using props and adding conditional rendering. Your meme generator will still not be functional in this milestone. You will add functionality in later milestones.

info

The course material needed to complete this part was covered in classes 3, 4, and 5.

Project Overview​

For your first project you will design and implement an interactive meme generator single-page application using only React using only the methods taught in this course.

You may create any type of meme generator you like so long as it meets the assignment's requirements.

Simple is better for this assignment. I recommend a meme generator with a choice of 3 backgrounds, with 2 lines of text, and the choice to change text styling for each line (e.g. font, color, outline, etc.)

Here is an example of a "meme" that would likely fulfill the assignment's requirements:

example meme

Learning Objectives​

  • Use props to customize components.
  • Dynamically, style components using inline styles.
  • Use conditional rendering to display user relevant information.
  • Pass data into components using props.

Help & Support Resources​

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace​

  1. Create your assignment repository.

    Visit https://landrace.infosci.cornell.edu/courses/info2310-2026sp/repos/project1 in your browser to create your assignment repository.

  2. Open your assignment repository in GitHub.

    After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info2310-2026sp/repos/project1 in your browser and follow the link to open the repository on github.com

  3. Open your assignment repository as a codespace.

Submission Requirements​

Your assignment should meet the following requirements for credit:

  • Submit your own original work (design and code) for this assignment.

    No credit is provided for submitting design and/or code that is taken from the course-provided examples.

  • Your code should be original. However, the structure of the code will mirror the class examples.

    The structure of your code will align with the class examples. This is to be expected. We are learning web programming and there's only so many ways to structure code to solve its problems.

  • You are required to use the methods and techniques covered in class.

    No credit is provided for using methods that are not covered in this class.

  • Your single-page application should be visible in the browser and functional upon launching the development web server Start Debugging from the Run menu.

    If your single-page application does not launch using this method or is not visible in the browser after launching the server, we are unable to provide any credit.

  • All files should be in the location specified in this document for credit.

    Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

  • Follow the submission instructions below.

    Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

    Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Part I: MemeText Props​

Create a reusable MemeText component that accepts props to customize its appearance.

Requirements & Credit​

Credit: ~10 points

This part is graded for correctness. Design an interactive meme generator single-page application that meets the following requirements for full credit:

MemeText:

  • Use props to customize all aspects of the MemeText component.
  • Each prop should control a single aspect of the text's appearance.
    • Each prop should be a single data type (i.e. string, number, boolean).
    • (You may not use an object for a prop's value.)
  • Set default values for all appearance props. (But not the text content.)
  • Use inline styles to apply the appearance props to the text.

Sample Meme:

  • Remove all hard-coded sample meme text and appearance in the MemeText component.
  • Set the text content and at least one appearance prop for each MemeText component in the MemePreview component.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone. You may not work ahead to implement functionality that has not yet been covered in class.

  • Do not implement any functionality to edit the meme.
  • Do not add any event handlers.
  • Do not use state.

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions​

  1. Within your MemeText component, add individual (single data type) props for the text and its appearance.

    Each prop should control a single aspect of the text's appearance. For example, if your design supports changing the font size, and text color you would have props for fontSize and color.

    Use inline styles to apply the appearance props to the text.

  2. Set default values for each of the props for the text's appearance.

    (Do not set default text content; only appearance props.)

  3. Replace your hard-coded sample meme text and appearance with the value of all the props.

  4. In your MemePreview component set the text content for each MemeText component (total 2) using props.

  5. In your MemePreview component set at least one appearance prop for each MemeText component (total 2) using props.

    The appearance props you set should differ between the two MemeText components.

  6. Thoroughly test that all text content and appearance aspects can be customized from the MemePreview component.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Do not complete the submission form.

Part II: MemePreview Props​

The entirety of the MemePreview component should be customizable using props.

Requirements & Credit​

Credit: ~10 points

This part is graded for correctness. Design an interactive meme generator single-page application that meets the following requirements for full credit:

MemePreview:

  • Use props to customize all aspects of the MemePreview component.
    • This includes the background image, each line of text, including its content and each aspect of its appearance.
  • Each prop should control a single aspect of the meme preview.
    • Each prop should be a single data type (i.e. string, number, boolean).
    • (You may not use an object for a prop's value.)
    • No default values should be set for any of the props.

Sample Meme:

  • Remove all hard-coded values in the MemePreview component and replace them with prop values from the App component.
  • Set the value of all MemePreview props in the App component to customize the meme preview.
  • The content and appearance of both lines of text should differ.
  • At least one prop with a default value should not be set in the App component to demonstrate that the default value is used.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone. You may not work ahead to implement functionality that has not yet been covered in class.

  • Do not implement any functionality to edit the meme.
  • Do not add any event handlers.
  • Do not use state.

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions​

  1. Within your MemePreview component, add props (single data type) to customize each aspect of the meme preview individually.

    This includes the image and all text elements, including their appearance and content.

    Each prop should control a single aspect of the meme preview. For example, if your design supports changing the meme image and the top text content, you might have line1Text and line1FontSize props.

    (Do not set any default values for these props.)

  2. In your App component set the value of all the MemePreview props to customize the meme preview, including the image and all text elements.

    Remove any hard-coded values in the MemePreview component and replace them with prop values from the App component.

    For example, you if originally had: <MemeText text="Line 1" /> in MemePreview, you would replace "Line 1" with the prop value passed from App: <MemePreview line1Text="Line 1" />

  3. Test that all aspects of the meme preview can be customized from the App component.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Do not complete the submission form.

Part III: Conditionally Render MemeText​

Sometimes a user may only want one line of text on their meme. Update your MemePreview component to conditionally render each MemeText component based on the presence of text content.

Requirements & Credit​

Credit: ~10 points

This part is graded for correctness. Design an interactive meme generator single-page application that meets the following requirements for full credit:

MemePreview:

  • Conditionally render each MemeText component only if there is text content for that line.
    • The component should not render at all if there is no text content.
    • (i.e. Do not return null or an empty element; do not render call the component's function at all.)

Sample Meme:

  • In your App component, omit the text content prop for one line of text when rendering the MemePreview component.

Professionalism:

Professionalism means meeting the client's requirements. Not doing less and not do more. Your submission should meet the requirements specified for this part and no more.

You are required to implement your project using the methods taught in class prior to the release of this milestone. You may not work ahead to implement functionality that has not yet been covered in class.

  • Do not implement any functionality to edit the meme.
  • Do not add any event handlers.
  • Do not use state.

If any functionality exists not covered in class up to this point, 0 credit is provided for this part.

Instructions​

  1. Update your MemePreview component to conditionally render each MemeText component only if there is text content for that line.

    For example, if the line1Text prop is falsy (i.e., an empty string, null, or undefined), do not render the first MemeText component.

  2. In your App component, omit the text content prop for one line of text when rendering the MemePreview component.

    For example, if your MemePreview component has line1Text and line2Text props, only provide a value for line1Text when rendering the component in App.

  3. Test that only the MemeText component with text content is rendered in the browser.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for p1m2 to submit the assignment.

Note: The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors​

The following individuals made contributions to this assignment:

  • Kyle Harms
Last updated on