mugar97 / global-react-js

ReactJS Global Mentoring Program [2023 Q1-Q2 Americas]

global-react-js

ReactJS Global Mentoring Program [2023].

This project was bootstrapped with Create React App.

Tasks Progress

• Core concepts [Done]
• Testing [Done]
  • Static tests
  • Unit tests
  • E2E tests
• Components [In progress]
• Advanced Components [To Do]
• Hooks [To Do]
• Routing [To Do]
• Forms [To Do]
• Server-Side Rendering (SSR) [To Do]
• Webpack [To Do]
• Redux [To Do]

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

global-react-js's Issues

Home task - Core concepts

Set up the environment

Create a git repository on Github, Gitlab, Bitbucket or any other platform. Discuss with your mentor which platform is better.
Use create-react-app to bootstrap a new app. Commit the changes to repository. Install react developer tools extension into your browser.

Create components

To understand more how components work it's recommended to create a few interactive components.

Create the following three components and render them all on one page, so that you can play around with them and test their look and behavior.

⚛️ Counter

A component that renders a numeric value and two buttons: one to decrement the value by 1, another to increment the value by 1.

• The component should take an initial value in a property.
• The component should be written using EcmaScript classes syntax, the render method should use React.createElement API (without JSX).

⚛️ SearchForm

Refer to the design prototype, implement a component that renders a search input and a button that triggers a new search.

• The component should accept two properties:

  • Initial search query. Use the value to set the initial value for the input
  • A "onSearch" callback property. Call the callback property every time the user presses Enter when the input has focus or when the user clicks the Search button. Pass current input value in callback arguments.

⚛️ GenreSelect

Refer to the design prototype, implement a component that renders a list of movie genres with currently selected genre highlighted.

• The component should accept three properties:

  • A list of genre names to display. Use the incoming list to render genre buttons.
  • A name of currently selected genre. Use the name to identify which button to highlight.
  • A "onSelect" callback property. Call the callback function when the user clicks on any genre button. Pass respective genre name to the callback arguments.

Home task - Advanced components

Implement new components

Implement the following new components. Use Storybook to manually verify your components look and behavior during development. Remember to cover these new components with tests.

⚛️ Dialog

The component should render a modal dialog with custom content. It should use the Portals functionality. You can install and use react-portal npm package. Additionally, you can also install focus-trap-react package for better UX.

Use Figma prototype to get inspiration about the visual design.

The Dialog component should accept the following props:

• a string or JSX for title
• JSX for body content in "children" property
• a callback function for handling clicks on close button (×) in the header

⚛️ MovieForm

The component should render a form element with form controls to add or edit a movie.

Use Add movie and Edit dialogs to get inspiration about form layout and inputs.

The MovieForm component should accept the following props:

• an optional object for initial movie info. Later, when we will implement "add movie" use case, we will not pass this property
• a callback function for handling form submit

To handle form events we recommend you to render HTML

element and add "onSubmit" event handler to it. This will keep inputs uncontrolled, which will dramatically simplify the logic of handling form state. You can collect form state on submit by using Object.fromEntries(new FormData(event.target))

Apply composition

Having implemented above components, now you can compose them to implement the following use cases. Write new Storybook stories to showcase them.

• Add movie. Render Dialog and put a MovieForm inside without passing initial movie info. This should render a dialog with the empty movie form.
• Edit movie. Render Dialog and put a MovieForm inside, pass some dumb data for initial movie info. This should render a dialog with prefilled form fields.
• Delete movie. Render Dialog with content from "delete movie" modal from Figma prototype.

Home task - Testing

Unit and component testing

Check that you have jest and @testing-library/react packages installed for unit and component tests.

If you haven't created all components from the previous module, finish them now. Cover the logic for all three with tests using these libraries.

⚛️ Counter

• Test that component renders initial value provided in props

• Test that a click event on "decrement" button decrements the displayed value

• Test that a click event on "increment" button increments the displayed value

⚛️ SearchForm

• Test that component renders an input with the value equal to initial value passed in props

• Test that after typing to the input and a "click" event on the Submit button, the "onChange" prop is called with proper value

• Test that after typing to the input and pressing Enter key, the "onChange" prop is called with proper value

⚛️ GenreSelect

• Test that component renders all genres passed in props

• Test that component highlights a selected genre passed in props

• Test that after a click event on a genre button component calls "onChange" callback and passes correct genre in arguments

End-to-End Testing

Install and setup Cypress or WebdriverIO for end-to-end tests.

Cover the logic for one of your components using the framework.

Add Eslint and Prettier

Add EsLint and Prettier configuration for better practices

Add basic checks using GH Actions (lint and unit tests)

Home task - Components

Install Storybook

Install and configure Storybook by following guide from the official website. In the end you should have a "storybook" npm script. When running "npm run storybook" it should start Storybook and open it in your browser.

Write Storybook stories for existing components

Create a story file for every component you created in previous modules. You should have at least one story for each of the following components (in total minimum 3):

• ⚛️ Counter
• ⚛️ SearchForm
• ⚛️ GenreSelect

You can write more stories to cover several states of GenreSelect or SearchForm, but this is optional.

Implement other components

Based on Figma prototype implement the following components:

⚛️ MovieTile

This component should render a movie tile from the list of movies.

It should take properties to receive image url, movie name, release year, and a list of relevant genres. Alternatively, you can define one component property to take an object with all movie info. Additionally, the component should receive a callback property to capture click event.

Optionally, you can implement a context menu popup that opens when a user clicks on three dots button and contains "Edit" and "Delete" menu items.

⚛️ MovieDetails

This component will render movie details when a movie is selected from the list (clicked). The details include movie poster image on the left and the rest of info on the right.

The component should take properties to receive image url, movie name, release year, rating, duration and a description. Alternatively, you can specify a single property that accepts an object with all movie info.

⚛️ SortControl

This component will render a label "Sort by" and a select control to the right. Select should have the following options:

• Release Date
• Title

The component should take a property that specifies current selection. Additionally, it should take a callback property to handle selection changes. The callback should be called every time a user changes "Sort by" value. The new value should be passed in callback arguments.

Use Storybook when implementing every individual component. Write a story for every component you create. It will help you to check the result and play around with some interactivity before you embed components into the app.

Although, it's not required to implement high-fidelity design as per design prototype, it still makes sense to apply some styling to your components, so that you practice in styling React components and your final result looks good.

Write tests

Cover new components with tests using jest and @testing-library/react. Verify necessary data is rendered as well as that behavior works correctly. You can write snapshot tests to cover the rendering. Although, remember that snapshot tests are fragile and will fail any time you change your component markup.