mugar97 / global-react-js Goto Github PK
View Code? Open in Web Editor NEWReactJS Global Mentoring Program [2023 Q1-Q2 Americas]
License: The Unlicense
ReactJS Global Mentoring Program [2023 Q1-Q2 Americas]
License: The Unlicense
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.
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):
You can write more stories to cover several states of GenreSelect or SearchForm, but this is optional.
Based on Figma prototype implement the following components:
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.
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.
This component will render a label "Sort by" and a select control to the right. Select should have the following options:
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.
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.
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.
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:
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:
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 usingObject.fromEntries(new FormData(event.target))
Having implemented above components, now you can compose them to implement the following use cases. Write new Storybook stories to showcase them.
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.
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
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
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
Install and setup Cypress or WebdriverIO for end-to-end tests.
Cover the logic for one of your components using the framework.
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.
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.
A component that renders a numeric value and two buttons: one to decrement the value by 1, another to increment the value by 1.
render
method should use React.createElement
API (without JSX).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:
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:
Add EsLint and Prettier configuration for better practices
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.