[Languages] Creating Image handling and cropping component in React.js

NOTE: All 1st-time contributors should know Topic approval and PR submission does NOT guarantee your Topic/Article will be published. Our team of Peer Reviewers and Content Moderators will review all PRs that come in to make sure they adhere to the standard of quality we expect from the EngEd community.

We expect all community memebers to go through provided examples, resources, and previously published material before submitting content. As a rule of thumb, please only submit articles (pull requests) that are complete, formatted correctly, and include a fully polished article (ready to be published and error free).

All revisions and edits should be completed on your own forked repo (as to not take up room in the queue). Any PR that is submitted incomplete (meaning not ready to be published as is) will be closed. A PR being closed does NOT mean the article can not be published (or fixed) it simply means that the edits, revisions, and fixes will happen outside of the queue.

Topic Suggestion

Creating Image handling and cropping component in React.js

Pre-submission advice

By following all our pre-submission advice and reviewing our Resources folder, you will maximise your chances of your topic being approved.

We ask that you please be patient as our team works through approving and publishing all articles/tutorials in a timely manner.

Allow 1-3 days for a topic to be reviewed and/or approved - allow 3-7 days for an articles to be reviewed and/or published (subject to vary depending on volume and/or backlog of articles).

Be sure to visit our Resources Page for tools, resources, and example articles that will help you propose and write a successful article.

Please ensure that you have only one open issue + linked pull request at a time. This will ensure that we complete the article in a timely manner from inception to publishing.)

We tend to stray away or tend not to publish reviews/comparisons of commercial product offerings.

Writing sample(s):

Include any links or writing samples - to help our team better gauge your writing quality.

Proposal Submission

Proposed title of article

Creating Image handling and cropping component in React.js

Proposed article introduction

Media management is a primary focus of dynamic content websites such as blogs, social media websites, and entertainment websites. As user media upload rises exponentially, platforms must adapt to the constantly changing behavior and reduce server usage and cost. One way of handling media (image) files in front end web development is cropping and compression practices. React.js and vanilla CSS could be a powerful combination in handling media and multi-media files in front-end web development. In this tutorial, we will discuss in details but not limited to the operations, logic and dependencies required to create an image handler and cropper in React.js. we will also explore the ways of reducing server usage in front end web development.

Key takeaways

At the completion of this tutorial, the reader is expected to understand and have the necessary skill to perform the following: i. Getting started with React.js development cycle ii. Image compression with React.js and CSS iii. Creating an image cropping component with React.js iv. Limiting the numbers and size of unloadable files in React.js v. Error handling in image management

Article quality

This article is a unique, project-based application of the techniques and operations of React.js, CSS and a design framework in handling media and multi-media files in front-end web development.

References

N/A

Conclusion

Finally, remove the Pre-Submission advice section and all our blockquoted notes as you fill in the form before you submit. We look forwarding to reviewing your topic suggestion.

section-engineering-education / engineering-education