{"sys":{"type":"Array"},"total":10,"skip":0,"limit":3,"items":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"1lYJtsz53jThRrvfIHwMPp","type":"Entry","createdAt":"2022-10-19T07:56:38.592Z","updatedAt":"2022-10-19T07:56:38.592Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":233,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"Being a Successful Topcoder Freelancer","slug":"being-a-successful-topcoder-freelancer","type":"Article","trackCategory":["Topcoder"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"28L4kciHjkRx94fjXxY0eL","type":"Entry","createdAt":"2021-01-26T05:44:18.746Z","updatedAt":"2021-01-26T05:44:18.746Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Community","trackParent":"Topcoder"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"6h68uRV5ITaI1PZFv3kO37","type":"Entry","createdAt":"2020-05-21T19:16:28.691Z","updatedAt":"2020-05-21T19:16:28.691Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Miscellaneous","trackParent":"Topcoder"}}],"tags":["Freelance"],"creationDate":"2022-10-18","readTime":"12min","content":"With a high number of developers, designers, data scientists, and others interested in the booming freelance economy, it’s highly important for freelancers to take measures that will ensure their absolute success in this domain. \n\nHere I have compiled a list to serve as a guide to becoming an effective freelancer.\n\n1. __Have an online presence:__ As the popular saying goes “Actions speak louder than words.” As a freelancer you need to go beyond the power of verbal convincing to attract the best and most rewarding clients.<br><br>An online presence like a strong portfolio, social media presence (Twitter, Instagram, Facebook, YouTube, LinkedIn, blog, etc.) speaks highly of your skills and reiterates your commitment and passion for the job, thereby building clients’ confidence in you.<br><br>\n2. __Have a niche:__ Don’t be a jack of all trades and a master of none. Excellence in any defined field takes time to achieve and as such, having a narrow area to focus on will bootstrap you into an expert of your field or area of knowledge.<br><br>Of course, it’s an open world of freelancing and one can decide to master any number of subject areas, but I highly suggest you narrow down to have a complete focus on your niche, which will make you a ‘Kung Fu’ master in that domain.<br><br>\n3. __Be involved:__ You don’t need to be an extrovert to become a freelancer but you need to get involved digitally. Take part in tech activities within your community or online. Let your voice be heard in ways that will be of benefit to others.<br><br>Your chances of creating new connections and building on old relations turn out to be high as you become a household name within programs, be they online or physical meetups.<br><br>This path is the way to be noticed and will eventually lead to rewarding clients.<br><br>\n4. __Be organized:__ An important part in the life of a freelancer is time management. How you utilize your time directly affects your performance, positively or negatively.<br><br>Sometimes you might need to work over normal hours or work under pressure to get a pressing job done as clients are waiting on you.<br><br>__A few tips to help you stay organized and meet deadlines regularly:__\n- Have a timetable and follow it \n- Have a time slot for working on projects each day\n- Avoid procrastination\n- Inform clients ahead of time if a deadline cannot be met\n- Have a clear scope of every project you are working on\n- Be good at estimating project completion timelines\n- Do not underestimate any project\n- Take breaks to recharge your body, energy, and mind \n- Keep track of the progress of your work<br><br>\n5. __Create a defined process:__ You need to have a process to help execute your tasks smoothly on a daily basis. This means one must be disciplined in order to follow any defined process you set for yourself to succeed.<br><br>__Below is a sample process for freelancers:__\n- Present to prospective clients\n- Sign and accept contract\n- Project onboarding \n- Required tools and resources to kick start\n- Payments and invoices<br><br>\n6. __Select tools within your means:__ As you work on your own, it means you have to acquire all the necessary tools that aid in smooth operation of your work.<br><br>For new freelancers, I recommend you start with less costly tools and services before fully diving in with high paid tools.<br><br>An example is WordPress which can be used for hosting and developing websites.<br><br>A test run with this content management system for half to a full year will give you a clear idea if indeed it’s worth sacrificing more resources into the freelance job.<br><br>Surprisingly, clients barely care about these tools. All they desire is to see a functioning application!<br><br>Choose your tools wisely and always consider your budget before making a purchasing decision.<br><br>\n7. __Be a communicator:__ A freelancer might be the best among his peers but tend to fall short in convincing clients to have confidence in them.<br><br>A foundation for every freelance worker is clear communication. Be clear both in written and oral communication when dealing with clients to avoid confusion in the future.<br><br>The inability of customers to fully understand your point of view or suggestion might force them to seek help from other freelancers whilst leaving you behind.<br><br>\n8. __Deliver top-notch work:__ As a solo worker, no one can take the blame for an unfunctional application apart from you. In view of that, ensure all due processes are followed in developing an application for a client.<br><br>\n9. __Have a strong passion:__ The gig economy might be booming but don’t be surprised if you jump in head first and go for over three months without a client.<br><br>When that happens, the only fuel left to keep you going is passion for the job. This ensures you are not deterred from giving up until you achieve your goals.<br><br>\n10. __Set prices competitively with room for adjustments:__ Be dynamic and have prices set in a way that favors the client whilst not undermining your effort.<br><br>\n11. __Know the best job boards:__ Be aware which job boards get you true, genuine, and rewarding customers. Many times people are scammed out of desperation to get clients quickly. Take your time and play it cool.<br><br>\n12. __Be in touch with clients:__ Let the clients be informed at all stages of the project. This prevents unforeseen situations upon the completion of work.<br><br>\n13. __As for referrals:__ Family and friends can help you get lucrative customers by word of mouth and recommendations. Ask for referrals from them and it will help massively.<br><br>\n14. __Be dynamic and accept change:__ The technology world keeps moving and changing so fast. Be updated and accept the chance to learn new technology or tools when the need arises. \n\n### Benefits of Freelancing with Topcoder\nThe goal of every freelancer is to keep enhancing skills while earning a living. TopCoder is one of the best platforms to help you achieve this in simple and easy ways with some benefits listed below:\n\n- Enhance skills on programming, design, and data science \n- Income source \n- Increase creativity\n- Workload management\n- Daily activities with variation\n- Enhance skill set\n- Establish new connections \n- Variety of rewards for promising freelancers \n- Location independent \n- Improve self management\n- Develop your interpersonal skills \n- Monthly challenges that help enhance skills on diverse subject areas\n- Choose the work you want: participate in challenges you deem fit\n\n### The Pros and Cons of Freelancing\n\n|      | PROS     | CONS     |\n| ---------- | ---------- | ---------- |\n| 1       | No mandatory office hours       | Job security not guaranteed       |\n| 2       | You are the boss       | Working in loneliness       |\n| 3       | Choose who to work with       | Can have controversial clients       |\n| 4       | Earn faster       | Can go months without earning       |\n| 5       | Decide on tech stack       | Unfamiliarity with tech stack could be deadly       |\n| 6       | Choose your work hours       | Could overwork to meet deadline       |\n| 7       | Flexibility of workload       | All responsibilities on you alone       |\n| 8       | Location independent       | No paid vacation       |\n| 9       | Enhance skill sets       | Could learn irrelevant skills       |\n| 10       | Choose vacation periods       | No vacation time       |\n| 11       | Decide on project type to work on       | Projects could become complicated       |\n| 12       | Freedom to choose clients from anywhere       | Clients not willing to pay       |\n| 13       | Expert in your domain       | Filing taxes could be complicated       |\n| 14       | Opportunity to increase revenue       | Must find personal insurance       |\n\n### Top Twenty Freelance Skills to Learn\n#### __1. Mobile App Development__\nWhy go into app development? Demand for app developers keeps increasing exponentially and it’s the best bet to go into with all things being equal.\n- Approximated based salary per year: $100,000\n- Approximated hourly rate:  $75\n- Skills that can help you become an app developer:\n  - HTML, CSS, JavaScript\n  - Java, Kotlin \n  - C, C#\n  - React - React native\n  - Angular - Ionic\n\n#### __2. AWS Development__\nWhy AWS? Amazon Web Services is currently the biggest provider in cloud storage and highly sought after by a lot of companies. Investing in AWS cloud developers is surely one of the best personal investments one could make.\n- Approximated salary per year: $112,000\n- Approximated hourly rate:  $71\n- Skills that can help you become an AWS developer:\n  - Coding or computer programming (PHP. Java, C#, Python)\n  - Networking\n  - DevOps\n  - Service providers (cloud)\n  - Containers\n  - Web services and APIs\n  - SDK of AWS\n\n#### __3. Blockchain Development__\nWhy blockchain? It’s a technology largely used by finance and trading companies, thereby making those with blockchain development knowledge highly sought after.\n- Approximated salary per year: $123,000\n- Approximated hourly rate:  $145\n- Skills that can help you become a blockchain developer:\n  - Blockchain technology understanding\n  - Programming: Python, JavaScript, C#, Java, Golang, Ruby\n  - Cryptography\n  - Distributed systems\n  - Smart contracts \n  - Data structures and algorithm \n\n#### __4. Artificial Intelligence (AI) Development__\nWhy study AI? A lot of the open roles in engineering are artificial intelligence roles. Companies are looking for ways and means to increase productivity and AI, coupled with machine learning, is a perfect combination in resolving some of these worries. Developers are needed to fill this gap with immediate effect.\n- Approximated salary per year: $90,000\n- Approximated hourly rate:  $40\n- Skills that can help you become an AI developer:\n  - Programming: C++, Java, Python, TypeScript\n  - Mathematics\n  - Statistics and probability\n  - Data analysis\n  - Models\n\n#### __5. Web Design__\nWhy web design? Businesses look for ways to attract and retain customers and one way is to have astonishing website design. As such, demand for skilled personnel in this area is high and worth investing in.\n- Approximated salary per year: $77,000\n- Approximated hourly rate:  $45\n- Skills that can help you become a website designer:\n  - Basics of HTML, CSS and JavaScript\n  - Figma/Adobe Photoshop\n  - Creativity\n  - Content management systems (CMS)\n  - Digital marketing\n  - Typography\n  - Color theory\n  - Composition\n  - User experience\n  - Responsive design\n  - Communication\n\nWeb design is a bit broad and categorized into three folds, namely:\n- UI design (User interface)\n- UX design (User experience) and\n- Visual design.\n\n#### __6. Data Analysis__\nWhy go into data analysis? Many companies and businesses look for ways to analyze data for decision making. This makes data analysis one of the best areas to focus as a freelancer.\n- Approximated salary per year: $72,000\n- Approximated hourly rate:  $34\n- Skills that can help you become a data analyst:\n  - Programming: statistical programming \n  - SQL\n  - Data visualization\n  - Matlab\n  - Statistics and probability\n  - Econometrics\n  - Excell\n  - Creativity and critical thinking\n\n#### __7. Website Development__\nWhy website development? A well established business without a website might not get noticed online and a business not online will be out of business according to Bill Gates. \nThis requires experts in the field to help create beautiful websites for companies and organizations.\n- Approximated salary per year: $74,000\n- Approximated hourly rate:  $73\n- Skills that can help you become a website developer:\n  - HTML, CSS, JavaScript \n  - Responsive web design\n  - Debugging and testing \n  - Frameworks: Bootstrap, Angular, React or Vue\n  - User experience \n  - Strong communication\n  - Team player\n\nWith website development, one can chose to be a:\n- Front end developer - interface development only\n- Back end developer - backend development (server side) only\n- Fullstack developer - combination of front end and back end duties \n\n#### __8. Ethical Hacking__\nWhy ethical hacking? For systems, networks and applications to be efficiently protected, ethical hacking professionals are essential.\n- Approximated salary per year: $69,000\n- Approximated hourly rate:  $45\n- Skills to help you become an ethical hacker:\n  - Networking \n  - Cryptography\n  - Databases\n  - Programming language: JavaScript, C#, SQL\n  - Analytical\n  - Hardwares \n\n#### __9. Writing__ \nWhy writing? Organizations now depend on documentation to help guide clients on software usage. Technical expertise is needed to craft these documentations.\n- Approximated salary per year: $62,000\n- Approximated hourly rate:  $30\n- Skills to become a writer (technical and non technical)\n  - HTML, CSS, JavaScript (technical writer)\n  - Postman (technical)\n  - APIs and databases (technical)\n  - Communication (non technical)\n  - Creativity (non technical)\n  - Adaptability (non technical)\n\n#### __10. Illustration__\nWhy go into illustration? Illustrators are in demand to lend their creativity to businesses to help them stand out among other competitors, using common style images from popular online sources.\n- Approximated salary per year: $60,000\n- Approximated hourly rate:  $26\n- Skills to become an illustrator:\n  - Creativity\n  - Persuasive skills\n  - Communication\n  - Team player\n  - Negotiation\n  - Patience \n  - Architecturing skills\n  - Figma/Adobe Photoshop \n  - Graphic design\n\n#### __11. Remote Assistant (virtual)__\nWhy a remote assistant? Remote assistants help companies beat down costs which is loved by almost all operational institutions. It therefore means new roles will keep coming up for such positions to help keep down costs whilst providing the best customer services.\n- Approximated salary per year: $55,000\n- Approximated hourly rate:  $26\n- Skills to become a remote assistant:\n  - Project management skills\n  - Communication\n  - Basic I.T skills\n  - Organizational skills\n  - Decision making \n  - Typing and Microsoft Word \n  - Basics of accounting \n  - A focus on detail\n  - Data entry \n  - Reliability and availability\n  - Creativity \n\n#### __12. Video Editing__\nWhy video editing? Production teams need video specialists to edit and modify videos to fit into an occasion or situation.  Having a skill set in this domain is a step towards success in a freelance career.\n- Approximated salary per year: $57,000\n- Approximated hourly rate:  $27\n- Skills to become a video editor:\n  - Ability to multitask\n  - Strong imagination\n  - Video editing softwares/tools\n  - Clear communication\n  - Editing\n  - Digital marketing\n  - Graphics design\n  - Team player\n\n#### __13. Graphic Design__\nWhy graphic design? Flayers, banners, and logos to display product information, upcoming events, or represent a brand image are the core work of graphic designers. This means having a skill in graphic design will set you up for success as a freelancer or getting hired for a full time role.\n- Approximated salary per year: $54,000\n- Approximated hourly rate:  $23\n- Skills to become a graphic designer:\n  - Typography\n  - Color theory\n  - Branding and marketing\n  - Basics of coding (not a must)\n  - Creativity\n  - Figma/Adobe Photoshop/Illustrator/inDesign\n  - UI/UX (not a must have, but necessary)\n  - Microsoft Office\n  - Design in print\n  - Microsoft Powerpoint \n  - Presentation\n  - Interactive media\n  - Communication\n\n#### __14. Search Engine Optimization (SEO)__\nWhy SEO? As competition becomes high, managers must find ways to stay on top of the game by optimizing web pages to appear on top of Google searches. \nThe competition of wanting to appear first on the Google search engine bootstraps the need for the technical know-how of personnel or freelancers to help get the job done.\n- Approximated salary per year: $52,000\n- Approximated hourly rate:  $97\n- Skills to become an SEO expert:\n  - Management of projects: able to define, plan, execute and close a project\n  - Research enthusiast\n  - Decision making: effective decision making includes:\n    1. Decision identification\n    2. Information gathering\n    3. Identifying alternatives routes\n    4. Weighing of the evidence\n    5. Selecting among the alternatives at hand\n    6. Action taken\n    7. Reviewing of decision taken \n  - Be flexible\n  - Be a writer\n  - Be a thinker and analytical person \n  - Basics of coding (not mandatory but highly necessary)\n\n#### __15. Management of Excel__ \n#### __16. Photography__\n#### __17. Translator__\n#### __18. Coaching as a career in tech__\n#### __19. Lecturing/Tutoring__\n#### __20. Software testing__ \n\n### The most in-demand skills for freelancers\n1. Cryptocurrencies and blockchain programming\n2. Amazon Web Services (AWS) development\n3. Mobile applications development\n4. Artificial intelligence (AI) development\n5. Website development \n6. Graphic design\n7. Website design \n8. Data analysis\n9. Ethical hacking and online security\n10. Bookkeeping and accounting\n11. Editing\n12. Illustration\n13. Writing\n14. Remote assistance\n15. Image editing\n16. Copywriting\n17. Optimization of search engines (SEO) \n18. Microsoft product management\n19. Marketing via social media\n20. Sales representative \n21. Photography\n22. Videography\n23. Career coaching\n24. Transcription of audio\n25. Delivery service for voice-over acting\n26. User testing\n27. Tutoring\n28. Survey-taking\n29. Social media marketing\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"7yO45g1yJfxerGOktJVufM","type":"Asset","createdAt":"2022-10-18T14:37:19.496Z","updatedAt":"2023-09-15T21:03:26.749Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":2,"locale":"en-US"},"fields":{"title":"Being a Successful Topcoder Freelancer","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/7yO45g1yJfxerGOktJVufM/a283509c9e75aeb72730662fb1bc989a/Banner_Thrive.png","details":{"size":160141,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive.png","contentType":"image/png"}}},"contentAuthor":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"4YrnLM62ZzGvx15nyTM1Yz","type":"Entry","createdAt":"2022-09-16T11:23:53.784Z","updatedAt":"2022-09-16T11:23:53.784Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"person"}},"locale":"en-US"},"fields":{"name":"Alhassan Kiwamdeen","tcHandle":"kiwams"}}],"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"aiNgKJ0eML1w5qUl2oa79","type":"Entry","createdAt":"2021-08-23T10:03:14.050Z","updatedAt":"2024-09-22T14:45:37.293Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":463,"revision":131,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"All about Topcoder Challenges, Tasks and Gig Work Opportunities","slug":"all-about-topcoder-challenges-tasks-and-gig-work-opportunities","type":"Video","trackCategory":["Topcoder"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"28L4kciHjkRx94fjXxY0eL","type":"Entry","createdAt":"2021-01-26T05:44:18.746Z","updatedAt":"2021-01-26T05:44:18.746Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Community","trackParent":"Topcoder"}}],"tags":["Help Article","Community","FAQs"],"creationDate":"2021-08-23","readTime":"13min","content":"\n- <AnchorLink href=\"#1\">What is a Topcoder Challenge?</AnchorLink>\n- <AnchorLink href=\"#2\">What is an SRM (Algorithm Challenge)</AnchorLink>\n- <AnchorLink href=\"#3\">What is a Development Challenge</AnchorLink>\n  - <AnchorLink href=\"#4\">What are RDMs</AnchorLink>\n  - <AnchorLink href=\"#12\">What are Skill Builder Competitions</AnchorLink>\n- <AnchorLink href=\"#41\">What is a First2Finish challenge</AnchorLink>\n- <AnchorLink href=\"#5\">What is a Design Challenge</AnchorLink>\n  - <AnchorLink href=\"#6\">What is LUX/RUX</AnchorLink>\n- <AnchorLink href=\"#7\">What is a QA challenge</AnchorLink>\n- <AnchorLink href=\"#8\">What is a Data Science Challenge</AnchorLink>\n  - <AnchorLink href=\"#9\">What is a Marathon Match</AnchorLink>\n- <AnchorLink href=\"#10\">What is Gig Work</AnchorLink>\n- <AnchorLink href=\"#11\">What is a Task</AnchorLink>\n<a id=\"1\"></a>\n### What is a Topcoder Challenge?\n\nTopcoder is a competition-based community at its heart. Let's go through the main kinds of challenges available at Topcoder. The common features of each challenge type are a strict timeline consisting of multiple phases and a score-based ranking system for competitors, based on their competition history.\n\n<a id=\"2\"></a>\n#### What is an SRM (Algorithm Challenge)\n\nSingle-round matches (SRM) are the oldest kind of challenge available at Topcoder. They are algorithm competitions, usually consisting of three problems (easy, medium and hard), that are solved by the contestants in a short time (often 75 minutes). A Rookie SRM is a variant of these competitions aimed at newer members. They have the exact same match structure, but the problems are easier and more approachable to people with less experience in algorithm competitions.\n\nA contest consists of a \n\n- **Registration Phase** - 24 Hours\n- **Coding Phase** - 75 mins\n- **Intermission Phase** - 5 mins\n- **Challenge Phase** \\- 15 mins\n- **System Tests**, which conclude the round. \n\nThe coding phase is the problem-solving part, during which the contestants write their code to solve the given problems. Competitors are divided into \"rooms\", consisting of twenty competitors each. \n\nDuring the challenge phase, the participants are given access to the code submitted by other competitors in the same room, and have the chance to \"challenge\" this code. A challenge consists of finding a test case for which the submitted code fails or gives a wrong answer. A successful challenge removes all preliminary points from that submission and grants the successful challenger +50 points. A failed challenge costs 25 points.\n\nAfter the challenge phase the system test phase begins, during which every submission is thoroughly tested for correctness. Failed submissions lose their score for that problem. Soon after the system test phase is finished ratings are updated.\n\nSee:\n\n[How to compete in SRMs](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20SRMs)\n\n[General Topcoder Arena Usage Guide](https://www.topcoder.com/thrive/articles/How%20to%20Compete%20in%20SRM%20Algorithm%20Competitions)\n\n[How to compete in SRMs:Extras and FAQs](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20SRMs:%20Extras%20and%20FAQs)\n\n<a id=\"3\"></a>\n#### What is a Development Challenge\n\nDevelopment challenges usually run between a few days or one to two weeks. The task is usually to complete a piece of functionality in a software product or to create one from scratch.\n\nDevelopment Track at Topcoder consists of three types of challenges: \n\n-   First2Finish (F2F) challenges - First2Finish are quick challenges in which competitors are asked to fix bugs or do a small task. The challenge is open until the project manager or copilot running the challenge has a winning submission.\n\n-   Code Challenges - Code challenges ask you to develop code for apps, services, etc. Final fixes, which are sometimes required after a typical challenge, are not included in these types of challenges.  \n\n-   Ideation challenges - Ideation Challenges ask you to research and ideate a solution on the problem statement presented to you. \n\nThe most popular challenge type in the development track is the code challenge. The technologies are varied, ranging from AngularJS, Node.js, Java, iOS, Android, Python, and several others. \n\nIn a code challenge, you will develop code for apps, services, etc. You must ensure your submission addresses all the requirements mentioned in the challenge specification. You also need to ensure your code is modularized, clean and well documented, and you need to provide clean documentation for deployment and verification.\n\nSee: \n\n[How to compete in Development Challenges?](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20In%20Development)\n\n<a id=\"4\"></a>\n##### What are RDMs\n\nRapid development matches (RDMs) are quick, fast-paced ranked development challenges, where you have to develop an application strictly according to specification. Speed is of importance since the matches are rated. They usually last for one hour. They represent a great way to test and to improve your development skills. An RDM is structured similarly to an SRM algorithm match, there are three problems: easy, medium and hard. The competitors' submissions will be tested against an automatic tester that can provide instant feedback on the submissions.\n\nSee:\n\n[RDMs](https://www.topcoder.com/thrive/articles/rdm-competition-faqs-and-rules)\n\n<a id=\"12\"></a>\n##### What are Skill Builder Competitions\nSkill Builders Competitions are competitions meant to help you build proficiency in a certain technology or product. A Topcoder Skill Builder challenge consists of three consecutive problems: Easy, Medium and Hard. Each problem is usually related, such that they build on each other. There will be a separate leaderboard for a Skill Builder challenge that keeps track of points across all three problems. A Skill Builder challenge usually runs for an extended period of time, such as a month. During the first run of a challenge, there are usually prizes and swag as well, these are generally given to the first submissions that pass review. Skill Builder challenges are ranked, and grant verified skill badges for your Topcoder profile.\n\nSee:\n\n[Topcoder Skill Builder Competitions](https://www.topcoder.com/thrive/articles/topcoder-skill-builder-competitions)\n\n<a id=\"41\"></a>\n#### What is a First2Finish challenge\nA F2F (First2Finish) match is a kind of development or design challenge where, as the name implies, the winner is determined as the competitor with the first submission to pass the minimum requirements for the challenge. Due to the nature of the challenge, review is performed during the Submission Phase of the match as the submissions keep coming it. Once a passing submission is found, the winner is determined and the match ends. These challenges are usually reasonably small in scale, such as bug fixes or configuration work. Speed is of the essence here, so keep your eyes peeled on that [Challenge listing](https://www.topcoder.com/challenges?tracks[Dev]=true&types[]=F2F)!\n\n<a id=\"5\"></a>\n#### What is a Design Challenge\n\nTopcoder Design Challenges provide coverage for a full range of design needs, from responsive and mobile application user experience to marketing collateral creation and support. To be specific, there are seven types of design challenges that we offer in the Design track.\n\n-   Application Front End Design\n-   Web Design\n-   Widget or Mobile Screen Design\n-   Wireframes\n-   Print/Presentation\n-   Design First2Finish\n-   Idea Generation\n\nYou must ensure your design submission addresses all the requirements mentioned in the challenge specification, and ensure your design follows the best practice for the specific interface or devices. \n\nSee: \n\n[How to compete in Design Challenges?](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20Design)\n\n<a id=\"6\"></a>\n##### What is LUX/RUX\n\nThe Live User Experience (LUX) is a fast challenge that runs for 48 hours and has a number of big prizes. The LUX challenge takes place during a live event with Topcoder and a customer. The Rapid User Experience (RUX) is similar to a LUX but it runs for 72 hours and awards 5 big prizes. Both challenges run fast and are only a one round challenge.\n\nLUX & RUX challenges provide designers with the opportunity to show digital leaders from some of the largest companies in the world, just how good they are at creating concepts, User Experience (UX) Design, and User Interface (UI) Design. They are fast, fun, and designers have more chances to earn prize money! We even have leaderboards for these!\n\nSee:\n\n[A guide for creating Topcoder LUX RUX presentations](https://www.topcoder.com/blog/a-guide-for-creating-topcoder-lux-rux-presentations/)\n\n<a id=\"7\"></a>\n#### What is a QA challenge\n\nQuality assurance (QA) track competitions call for competitors to participate in organized QA testing of a piece of software. Technical background is not necessarily required, but experience plays an important part in gaining a good score and rating. \n\nThe QA Track, consists of four types of challenges: \n\n-   Unstructured Testing: In these types of challenges you are asked to test without predefined test cases, also known as Bug Hunt.\n\n-   Structured Testing: In these types of challenges you are asked to execute predefined test cases step by step and check if test results are correct\n\n-   Structured Test Case Writing: In these types of challenges you are asked to write test cases based on prototypes and functional requirement specifications.\n\n-   Automated Testing: In these types of challenges you are asked to use automation tools to execute test cases.\n\nThe most popular challenge type in the QA track is Bug Hunt. Here you are asked to report bugs including the steps to reproduce and the type of bug you found. While competing with others, you are paid for each verified bug and can also receive extra prize money for finding the most number of bugs. \n\nSee:\n\n[What is QA?](https://www.topcoder.com/thrive/articles/What%20is%20QA)\n\n[How to Compete in Testing Competitions](https://www.topcoder.com/thrive/articles/How%20to%20Compete%20in%20Testing%20Competitions)\n\n[What is a Bug Hunt?](https://www.topcoder.com/thrive/articles/What%20is%20a%20Bug%20Hunt)\n\n[How To Compete in a Bug Hunt Challenge](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Bug%20Hunt%20Challenge)\n\n<a id=\"8\"></a>\n#### What is a Data Science Challenge\n\nA data science challenge is a special kind of challenge for problems related to machine learning, data science, mathematics and statistics. They are typically longer in duration, usually at least a week, and often up to a month or more. The contestants are tasked with developing a data science solution that matches the given problem area and data as closely as possible. Some example cases might be the development of an image classification model, or to forecast data based on historical data points.\n\nSee:\n\n[Data Science Challenge Types](https://www.topcoder.com/thrive/articles/Data-Science-Challenge-Types)\n\n[Practical Skills Needed to Win Data Science Competitions](https://www.topcoder.com/thrive/articles/Practical%20Skills%20Needed%20to%20Win%20Data%20Science%20Competitions)\n\n<a id=\"9\"></a>\n##### What is a Marathon Match\n\nA marathon match is another old competition type at Topcoder. Marathon Matches are challenges where your submission is automatically scored according to the scoring details mentioned in the match specification.\n\nThey are longer than SRM matches, usually lasting one week. They consist of one difficult problem that may not have a single correct solution, but rather something where optimization must be used to create a solution that performs better than the competition. A problem may consist of a board game simulation that must be solved as efficiently as possible, or a machine learning-related task, such as classification.\n\nThese matches are mainly divided into two categories: \n\n-   **Algorithm Optimization Matches** \\- These matches are hosted by Topcoder for practice and fun. The problems are usually NP-Hard, so no optimal solution is known. The matches usually run for one week, in which you write a program to score as well as possible against the problem's scoring system. They are generally named as Marathon Match followed by a sequence number. Example: [Marathon Match 118](https://www.topcoder.com/challenges/70402b3e-fb5b-4d3d-9277-20c1fa512806)\n\n-   **Machine Learning / Data Analytics / Image Processing / Predictive Analytics etc** - These matches are designed with the help of our customers. They involve tasks with real-world applications and datasets. Example: [CDC Text Classification - Marathon Match](https://www.topcoder.com/challenges/30103825)\n\nSee:\n\n[How to compete in a Marathon Match](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Marathon%20Match)\n\n[Curated Marathon Matches Guide](https://www.topcoder.com/blog/complete-guide-topcoder-marathon-matches-curated-just/)\n\n<a id=\"10\"></a>\n### What is Gig Work\n\nGig work is the latest addition to the numerous ways you can challenge yourself and earn money on Topcoder. Gig work is contract work for a fixed duration in a specific role for a client. You can apply to these freelance positions from the gig work page LINK, and if your skills are a match for the role, you will be contacted for an interview. Gig work provides you a way to earn a safe, fixed income for a duration. Gigs usually last at least one month and often longer. Your Topcoder profile will be valuable in proving your skills for a successful gig application.\n\nSee: \n\n[Gig Work at Topcoder](https://www.topcoder.com/thrive/articles/gig-work-at-topcoder)\n\n<a id=\"11\"></a>\n### What is a Task\n\nA private task is a special challenge given to only a single person. This person is usually the winner of a competition or a series of competitions. Through the task, they are given a special appointment to add extra features or to do some other extra work related to the challenges they've done. A task may also be unrelated to a specific challenge, but still target a highly qualified member with the right skills for it. To gain tasks, you should compete and place highly in competitions, and also be active on Slack, where new tasks are often posted.","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"6nCaCYxOpz6ody4U5cGIbd","type":"Asset","createdAt":"2019-09-18T22:05:07.141Z","updatedAt":"2021-09-13T03:51:41.089Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":90,"revision":14,"locale":"en-US"},"fields":{"title":"Topcoder Generic Banner","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/6nCaCYxOpz6ody4U5cGIbd/1b0d2bb3e83f8a58f2ffc9bcab941480/Banner_Thrive.png","details":{"size":160141,"image":{"width":455,"height":355}},"fileName":"Banner Thrive.png","contentType":"image/png"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"3g1nKR4UqmmAfvEfYXCIjB"}},{"sys":{"type":"Link","linkType":"Entry","id":"14TE3B3pQi9gHoiwEwT1M0"}}],"upvotes":41,"downvotes":2}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"fExfNMgkaAN9f6RE1lI5W","type":"Entry","createdAt":"2021-02-23T22:29:23.663Z","updatedAt":"2024-09-16T13:15:23.337Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":338,"revision":126,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"Gig Work at Topcoder and FAQs","slug":"gig-work-at-topcoder","type":"Article","trackCategory":["Gig Work"],"contentCategory":[{"sys":{"type":"Link","linkType":"Entry","id":"4NginLfmkkwHs5ZSGXI9Qt"}}],"tags":["Gig Work"],"creationDate":"2021-02-23","readTime":"15min","content":"Gig Work at Topcoder is part of our “Talent as a Service” or TaaS offering. In cases where it makes more sense for the customer to work with defined resources rather than strictly with challenges. It is much closer to a traditional freelancing model where you and the customer work directly together instead of working through challenges. You can also say a Topcoder gig is a freelance contractor position.\n\n#### How do I get started?\n\nCompete and build up your profiles and skills! Topcoder members become eligible to work on Gig Work projects by first proving themselves in various skillsets through Topcoder competitions. Keep learning and competing to earn statistics on your Topcoder profile page that demonstrates your expertise. Once you become [rated](https://www.topcoder.com/thrive/articles/Ratings) and/or show success by either winning challenges or successfully passing review in any competition track, you are eligible to participate in Gig Work engagements. If you do not have a competition history at Topcoder, that is okay.\n\n#### Once I compete enough to become eligible, then what?\n\nBy having an in-depth profile that shows expertise in at least one area, you will be moved higher in the list as we match Gig Work members to customer requests. Our platform scans our community looking for the top members for various in-demand skill sets.If you’re competing in a track that is currently not rated (like Design), we’ll instead look at other statistics we track such as # of wins, # of passed reviews, etc.\n\n#### What type of talent are we looking for?\n\nOur customers have a broad array of needs they are looking to fill.\n\nHere are a few skills we are always looking for:\n\n-   Full Stack Developers\n\n-   Front End Developers\n\n-   Back End Developers\n\n-   Designers\n\n-   Data Engineers\n\n-   Data Scientists\n\n-   DevOps Engineers with AWS, Azure, GCP\n\n#### What should I do right now if I’m interested in Gig Work?\n\nRight now, just some basics.\n\n1.  As a part of our Topcoder community, if you are interested in working on freelancer style work with different customers and projects, visit our Gig work page and [sign up for a weekly email](https://www.topcoder.com/community/gig-subscribe). While you are doing that, take a look at our open Gigs to see if something fits your talent and experience.  \n\n2.  Make sure your [complete Topcoder profile](https://profiles.topcoder.com/) is filled out. The more complete it is, the more likely it will be that you are identified for opportunities. At a minimum, you must have the following completed on your profile:\n\n-   First/Last Name\n\n-   Address\n\n-   Birthdate\n\n-   Payment Preferences\n\n-   Bio\n\n-   Current Location\n\n-   Primary Interests\n\n-   Tracks\n\n-   Languages\n\n-   Education\n\n-   Work\n\n-   Skills\n\n-   Hobbies\n\n-   Tools\n\nFavorite Projects: Tell us what your favorite 2 or 3 projects have been that you worked on.\n\nBio: Write a quick bio that personifies you. Feel free to make it fun and show your personality, but also make sure it’s professional. This is visible to customers as they are reviewing candidates for their gig work so you want to put your best foot forward.\n\nComplete your identity verification. Instructions will be sent to you after you sign up for Topcoder gigs.\n\n#### What is the onboarding process?\n\nThis process can vary depending on the customer; however, here is a general rundown of the process once you accept a Gig Work offer:\n\n-   Offer Accepted\n\n-   Topcoder will notify our client team that the offer is accepted.\n\n-   You will receive an email from our Customer Success Team to schedule a kickoff call with the customer.\n\n-   Clients will reach out to begin company-specific onboarding (Two weeks or more).  Could include:\n\n-   Laptop\n\n-   Network Credentials and access\n\n-   Background Check (On an “As needed basis based on the client)\n\n#### Will there be training?\n\nEach client is different based on the task needed to be done. Our client and Topcoder will always be available to support you in this process.  \n\nHowever, you were selected for the skills you already possess, and the expectation is that you will be able to complete the work that you are already skilled in.\n\n#### Would I get health insurance?\n\nYou would not be provided an insurance plan when you are working on a Gig, and you would need to seek your own private insurance.\n\n#### Do we have any clients that would be interested in offering internships?\n\nNot at this time. But we recommend students spend time with Topcoder challenges to help build their resume.\n\n#### How do I get paid?\n\nYou will be paid weekly, per your offer letter from Topcoder. We have a link to more specifics on how to set that up. [Information on How do I get paid](https://www.topcoder.com/thrive/tracks?track=Topcoder&tax=Getting%20Paid).\n\n#### What support do you give your candidates while they are working in a Gig?\n\nTopcoder is a community and we always want to make sure that you feel you are a valued member of the community. We are always here to help and assist and point you in the direction of where to get your answer.\n\nWe have [Topcoder forums](http://discussions.topcoder.com), [other ways to contact us](https://www.topcoder.com/community/contact), [weekly community chats](https://us02web.zoom.us/meeting/register/tZMsdO-rrDMiHNPnEbEksD-259GbzAuTbid7) on Mondays, a [Topcoder Nation Facebook group](https://www.facebook.com/groups/topcoder.nation), and so much more! Our community team is always here to help you so please take advantage of that and all the networking opportunities we have.\n\n#### What is expected of me?\n\nAs a member of Topcoder, you will need to decide if you are willing to make the commitment to a given project and/or customer depending on how the opportunity is outlined. If you are not able to accept an assignment, there is no obligation. However, if you do accept an assignment, it is expected that you adhere to the requirements of the assignment. Most gigs will require full time hours for a certain amount of weeks. Some gigs will also require certain time zone restrictions to be adhered to.\n\n#### What do I do if I am having technical issues and need help?\n\nIf there are any technical issues that are specific to client systems, software, hardware, your client-side manager or handler is your point of contact.  If you are having trouble understanding who your point of contact is, please consult your Customer Success Manager.  \n\n#### Do I have to interact directly with the customer?\n\nYou should expect to have direct interaction with the client on these projects. In some rare cases, you may become part of an existing project team that is a blend of Topcoder members and other resources. We feel that the members that are able to present themselves well, communicate consistently and often, and are willing to participate in client meetings/standups/etc will have the most impact on these opportunities. Since every customer is different, forms of communication and collaboration will also vary.\n\nIt’s also important to note that professionalism while on a Topcoder gig really matters. Please be sure to follow proper business etiquette as you are representing Topcoder and yourself. If you are ever unsure of something, we are happy to help. Please email the gig work team at gigwork@topcoder.com.\n\n#### Why do we have gig work for members?\n\nGig Work becomes more relevant in situations where public challenges are not ideal. For example, when certain work requires developers to gain access to client environments or when the customer prefers to work in more of a one on one situation with a resource. Also, some work may be more efficient to complete in a collaborative manner rather than in a competition style. In these cases, having a group of skilled members working together with the customer’s team may be more practical.\n\n#### Are you obligated to participate in a Gig Work opportunity you are offered?\n\nNo. Even if you are in a pool, you are still a community member, not an employee so you can participate in other work at the same time. \n\nHowever, some things to consider:\n\n-   In some of these engagements, we may invest in background checks or other types of certifications. Please consider the level of commitment before signing up, or just do not sign up if you feel you do not have the skill or the time to do work. Keep in mind that many of these assignments will most likely be full-time work.\n\n-   Please consider your reputation as a community member if you pre-committed to any type of work. Informing those in charge that you will not be able to compete is better than walking away without telling anyone.\n\n-   Your performance on assignments will be tracked and will become part of your Topcoder profile. Therefore, it’s important to maintain a high level of professionalism and quality of work in order to gain more opportunities in the future.\n\n#### Why are there Identity checks and NDA’s?\n\nYou will likely be given access to the client’s secure environment for some of the gig related projects. Since this privilege is usually meant for cleared employees/contractors, any Topcoder member doing similar work will likely have to undergo an identity check and/or background check to ensure they are cleared to enter the client’s environment. Depending on the client, this can potentially be non-negotiable.\n\n#### Will I still be participating in Topcoder Challenges to do the work?\n\nNo. For these engagements, you will be assigned work directly by a customer resource.\n\n#### Can I still compete in regular Topcoder challenges if I’m doing a gig?\n\nSure! As long as it doesn’t interfere with your gig engagement we encourage all members to continue competing.\n\n#### How do I know if the customer is satisfied with me?\n\nFirst, just ask! Topcoder also performs regular outreach to customers to gain a measurement of customer satisfaction.\n\n#### What happens if the customer is disputing the work I’m delivering?\n\nIf the customer is unhappy with your work, you should first discuss it with the customer and try to find a solution. If you are unable to find a solution, contact the Success Manager that helped you with onboarding at the start of the gig. Be sure to include a full description and as many details as possible of the issue along with any supporting evidence.\n\n#### Are their criteria for being removed from an engagement?\n\nTopcoder prides itself on being fair, especially when it comes to our community. So, removing a member from an engagement would not be done without merit.  \n\nMembers may be removed for various reasons. Some of these reasons include:\n\n-   The member is no longer able to commit the agreed amount of time to the project.\n\n-   The customer is not satisfied with the work the member is delivering.\n\n-   Sometimes it’s just not a good fit. It happens.\n\n-   Client requirements have changed and the work is no longer required\n\n#### Will Copilots be involved in Gigs?\n\nNo. At this time, copilots will not be used to manage work with the Topcoder Community on gig projects. If you are a copilot and would like to work on a gig assignment, you may still do so but it would be in a non-copilot role.\n\n#### How does Payment work?\n\nOnce you receive your offer letter, you will be given instructions on how to set up payment with Topcoder.  Topcoder only uses three payment providers (Paypal, Payoneer, Western Union).  \n\nYou will be paid a fixed amount per week based on the role, your Topcoder merit-based accomplishments (i.e. [Ratings](https://www.topcoder.com/thrive/articles/Ratings), # of wins, etc.), your work experience, and the listed payment range on the Job Listing. **Note** - We are very transparent with our rates in the job listing.  If you are not comfortable with the payment range listed, do not apply for this position, as we will not negotiate above the maximum amount of a specific job listing.\n\nTopcoder pays gig workers weekly. Payments for a given week are entered into your Topcoder wallet by Tuesday of the following week. **Once payments are entered, they become available to withdraw after a 15 day hold period**.  The 15 day hold period is for some backend processing we have to go through to clear payments.  We are looking to lower this time in the future, but currently, it will stay at 15 days.  \n\nYou may see a pro-rated payment for your first and last gig payment, as well as potential days you may take leave.  For example, If you started work on a Friday, you would only get paid for ⅕ of the amount of your weekly payment, for that specific week.  \n\nBe sure your Success Manager is aware of your start date and be sure **not** to conduct any actual work unless you have confirmation that billing has commenced.\n\n#### What if I work a lot more than the expected time on an engagement?\n\nMany projects experience weeks that are busier than normal and some that are slower than normal. We set the expectation with customers that these busy and slow times should balance out over the course of the project. We also track this through a survey we send you each week. There are a few things you can do if you believe you are working more than expected.\n\n1.  Complete the survey every week. It’s a simple 2 question survey so it won’t take much time. We monitor your responses and will contact you if you are consistently reporting working more than expected.\n\n2.  Discuss timelines and scope of work with the customer to come to an understanding. \n\n3.  Contact your Success Manager if you’re not able to find a solution with the customer. Be sure to provide as much information as you can about the situation.\n\n4.  Again - complete the survey every week. Your Success Manager will be able to support you much better if you have completed the surveys consistently. \n\n#### What if I am no longer able to work on an assignment?\n\nWe understand this will happen sometimes.\n\n1.  Try to avoid the situation by understanding how your schedule matches with the customer’s schedule.  \n\n2.  Alert your Success Manager and your customer as soon as possible.  \n\n3.  We require a minimum of 1-week notice if you need to leave an assignment, but we highly recommend providing at least 2 weeks’ notice.\n\n#### Do I need to go onsite with a customer?\n\nWe’re currently not supporting onsite resources in Topcoder gigs. All work is done virtually.\n\n#### Will I still get paid if I finish the gig early?\n\nYou will get paid for the work that you complete, when a gig closes early you will be paid for the work that you do\n\n#### What is the timeline and application process for getting a gig?\n\nGig’s timeline from application to finding out if you got the Gig is about 2 weeks. This can be longer depending on the client, the project, and how many candidates are needed for the Gig. The process with be roughly as follows:\n\n1.  Apply for the Gig.\n\n2.  A Team member will review our application 24-48 hours after you submit it. We will review skills, professional experience, as well as Topcoder experience. If you are a match based on the job description you will be asked to set up a phone screen with a Gig Work Team member. \n\n3.  During your phone screen, you will be asked to verify your identity, location, availability, and that you have the skills listed in the job description. \n\n4.  We will then be sending your resume off to the client to evaluate if you’re a match for the specific project they are looking for work on. \n\n5.  If a match, Topcoder or the client will be asked to set up an interview with them. \n\n6.  If the interview is a success you will be given an offer via email.","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3TdAZLeLjjtJvf5Sux7sAx","type":"Asset","createdAt":"2020-01-23T08:33:47.104Z","updatedAt":"2020-01-23T08:33:47.104Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"photo-of-people-leaning-on-wooden-table-3183183","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3TdAZLeLjjtJvf5Sux7sAx/15435a836e6edea36635eee03e242034/photo-of-people-leaning-on-wooden-table-3183183.jpg","details":{"size":251590,"image":{"width":1280,"height":854}},"fileName":"photo-of-people-leaning-on-wooden-table-3183183.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"4t9tk68FsQY2xMdLmqMMBg"}}],"upvotes":48,"downvotes":4}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5WJgLnmZ1ivaZwpbhqmQcD","type":"Entry","createdAt":"2020-08-31T18:17:01.967Z","updatedAt":"2022-04-16T10:09:46.936Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":37,"revision":13,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"Questions To Ask To Get The Gig","slug":"questions-to-ask-to-get-the-gig","type":"Article","trackCategory":["Gig Work"],"contentCategory":[{"sys":{"type":"Link","linkType":"Entry","id":"4NginLfmkkwHs5ZSGXI9Qt"}}],"tags":["Self-Improvement"],"creationDate":"2020-08-31","readTime":"8 min","content":"![Questions-Gig Work Infographic](//images.ctfassets.net/piwi0eufbb2g/7l3QxCez8wJCy2LbrarWfB/9cb31a881c7a1fe6f8be9d1f748afcfc/Questions-Gig_Work_Infographic.png)","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"1p5SPbKkb5copVcMWjFCOO","type":"Asset","createdAt":"2020-08-31T18:15:02.663Z","updatedAt":"2020-08-31T18:15:02.663Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"Getting The Gig - Thrive","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/1p5SPbKkb5copVcMWjFCOO/b7f08624aec982f7dc2e3e02193ebfd2/Getting_The_Gig_-_Thrive.png","details":{"size":309498,"image":{"width":1024,"height":586}},"fileName":"Getting The Gig - Thrive.png","contentType":"image/png"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"4t9tk68FsQY2xMdLmqMMBg"}}],"upvotes":8,"downvotes":0}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2z9jK6RJmTqTCWCCFjGGBq","type":"Entry","createdAt":"2020-01-09T21:34:21.658Z","updatedAt":"2022-09-28T00:39:33.897Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":1631,"revision":776,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"List of awesome learning resources","type":"Article","trackCategory":["Development","Data Science","Competitive Programming"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"Caw9t2fdYN3diW6ITAg20","type":"Entry","createdAt":"2019-08-27T06:08:56.519Z","updatedAt":"2019-08-27T06:08:56.519Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Miscellaneous","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"4QMPoJGwHV7PhqbfMcbHqd","type":"Entry","createdAt":"2019-09-19T07:52:51.637Z","updatedAt":"2019-09-19T07:52:51.637Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Topcoder-Centric","trackParent":"Data Science"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"47m7HZF8X855k7uGl3IPxy","type":"Entry","createdAt":"2019-09-19T07:36:03.658Z","updatedAt":"2019-09-19T07:36:03.658Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Topcoder-Centric","trackParent":"Competitive Programming"}}],"tags":["Opportunities","Links collection","Hackathons"],"creationDate":"2019-10-27","readTime":"5 min","content":"### Competitive Programming\n\n * [HackerRank](http://hackerrank.com) - Solve code challenges to prepare for programming interviews.\n * [HackerEarth](http://hackerearth.com) - Solve code challenges to help companies find innovative solutions for their businesses.\n * [CodeChef](http://codechef.com) - Non-profit competitive programming platform.\n * [TopCoder](http://topcoder.com) - Participate in code challenges and help solve real world problems.\n * [CodeForces](http://codeforces.com) - Russian website dedicated to competitive programming.\n * [ProjectEuler](http://projecteuler.net) - Solve computational and mathematical problems using your programming skills.\n * [Spoj](http://spoj.com) - Programming contests with online judging system.\n * [InterviewBit](https://www.interviewbit.com) - A platform to learn and practice coding interview questions.\n * [VisuAlgo](https://visualgo.net/en) - Visualizing data structures and algorithms through animation.\n * [LeetCode](https://leetcode.com) - Develop programming skills for your next interview.\n * [FireCode](https://www.firecode.io/) - An online coding interview preparation.\n * [CodeWars](https://www.codewars.com/) - Code challenges platform to level up your skills.\n * [CodinGame](https://www.codingame.com/) - Learn to code by playing games.\n * [CodeForces](http://codeforces.com/) - Online platform that hosts competitions and problem sets\t\n * [DailyProgrammer](https://www.reddit.com/r/dailyprogrammer/) - Solutions to programming challenges, peer reviewed with community feedback.\n * [CodeFights](https://codefights.com) - Practice programming and land a job.\n * [UVa](https://uva.onlinejudge.org) - Programming contests with online judging system.\n * [Stanford ACM ICPC](https://github.com/jaehyunp/stanfordacm) - Stanford [Notebook](https://github.com/jaehyunp/stanfordacm/blob/master/notebook.pdf) provides printable templates usable during online/on-site contests.\n * [Exercism](http://exercism.io/) - Solve programming challenges from your terminal.\n * [DailyCodingProblem](https://www.dailycodingproblem.com/) - Get exceptionally good at coding interviews by solving one problem every day.\n * [acmp.ru](http://acmp.ru) - Russian programming contests\n * [Timus Online Judge](http://acm.timus.ru/?locale=en) - Programming contests with online judging system.\n * [DMOJ: Modern Online Judge](https://dmoj.ca) - contest platform and archive of programming problems\n * [Rose Code](https://www.rosecode.net/) - Programming challenges with leaderboards and blog posts\n * [Coderbyte](https://coderbyte.com/) - Programming challenges and specific routes to help learn specific skills\n * [Code Golf](https://code-golf.io/) - Programming challenges with individual leaderboards for problems\n * [Daily Coding Problem](https://www.dailycodingproblem.com/) - Get emailed a new coding problem every day\n * [Halite](https://halite.io/) - Create AI to face off against other people's AI. More specialized on AI\n * [Advent of Code](https://adventofcode.com/) - A yearly set of coding challenges that published with leaderboards\n\n ### Web Development\n\n * [Learn Enough to Be Dangerous](https://www.learnenough.com/) - Free online coding tutorials on JavaScript, Ruby, Rails, CSS and more.\n * [FreeCodeCamp](http://freecodecamp.com) - Coding tutorials and challenges.\n * [Thimble](https://thimble.mozilla.org/en-US/) - Free online code editor, web server, web browser & developer tools.\n * [NodeSchool](https://nodeschool.io) - Open source workshops that teach web software skills.\n * [The Odin Project](https://www.theodinproject.com/) - A full free open source coding curriculum.\n * [Egghead](https://egghead.io/) - Video tutorials on popular JavaScript frameworks.\n * [Codecademy](https://www.codecademy.com/) - Free and premium interactive tutorials for various languages.\n * [CodeSchool](https://www.codeschool.com/) - Combination of video and interactive tutorials.\n * [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn) - Web development articles by Mozilla.\n * [W3Schools](https://www.w3schools.com/) - Tutorials on HTML, CSS, JavaScript and more.\n * [Eloquent JavaScript](http://eloquentjavascript.net/) - An online book about JavaScript.\n * [Coder-Coder](https://www.coder-coder.com/) - Tutorials on Web Development from basics including HTML, CSS, JavaScript and more.\n * [CodeCraft](https://codecraft.tv/) - Provide Web Development Courses on JavaScript, AngularJS, Angular 5 for free.\n * [Scrimba](https://scrimba.com/) - Provides Web Development Courses with a unique feature of live interaction with the instructor's code.\n * [FrontendMasters](https://frontendmasters.com/) - In-depth and advanced video tutorials on Frontend Devlopment from experts in the industry.\n\n ### Mobile Development\n\n * [Udacity Android Nanodegree](https://in.udacity.com/course/android-developer-nanodegree-by-google--nd801) - Students can also apply for [scholarship](https://in.udacity.com/google-india-scholarships) given by Google.\n * [Android Developer Training](https://developers.google.com/training/android/) - Range of courses to help you build Android apps.\n * [Vogella](http://www.vogella.com/tutorials/android.html) - Tutorials about Android development.\n * [Android Hive](https://www.androidhive.info) - Android tutorials blog.\n * [iOS development](https://in.udacity.com/course/intro-to-ios-app-development-with-swift--ud585) - Build your first iOS app with an Udacity course.\n\n ### DevOps\n\n * [DevOps Bootcamp](http://devopsbootcamp.osuosl.org/start-here.html) - Course dedicated to teach core software development and systems operation skills.\n * [Google IT Support Course](https://www.coursera.org/specializations/google-it-support) - Google course to prepare you for a job in IT support.\n\n ### Data Science\n\n * [Kaggle](http://kaggle.com) - Data science competitive platform.\n * [DataQuest](http://dataquest.io) - Learn data science with your browser.\n * [DataCamp](http://datacamp.com) - Learn data science online.\n * [DrivenData](https://www.drivendata.org/) - Participate in data science competitions and help organizations.\n * [Analytics Vidhya](http://analyticsvidhya.com) - Training and Q&A platform based around data science.\n * [fast.ai](http://course.fast.ai/) - Deep Learning with only prerequisite being general coding skills.\n * [TunedIT](http://tunedit.org/data-competitions) - Data Mining competitions.\n * [Data Science Central](https://www.datasciencecentral.com/) - the online resource for big data practitioners.\n * [KPMG Data Science Virtual Internship](https://www.insidesherpa.com/virtual-internships/theme/m7W4GMqeT3bh9Nb2c/KPMG-Data-Analytics-Virtual-Internship) - learn data science from a Big 4 accounting firm and how it's used in industry.\n\n ### Artificial Intelligence\n\n * [Siraj Raval](https://www.youtube.com/channel/UCWN3xxRkmTPmbKwht9FuE5A) - YouTube channel with tutorials about AI.\n * [Sentdex](https://www.youtube.com/user/sentdex) - YouTube channel with programming tutorials.\n * [Two Minute Papers](https://www.youtube.com/user/keeroyz) - Learn AI with 5 mins videos.\n * [Andrej Karpathy](http://karpathy.github.io/) - Old blog about AI, now posting on [Medium](https://medium.com/@karpathy/).\n * [iamtrask](http://iamtrask.github.io/) - Machine Learning blog.\n * [colah's blog](http://colah.github.io/) - Blog about neural networks. \n * [Google Machine Learning Course](https://developers.google.com/machine-learning/crash-course) - A crash course of machine learning taught by Google Engineers\n * [Google AI](https://ai.google/education/)- Learn from ML experts at Google\n\n ### Computer Science\n * [BaseCS](https://medium.com/basecs) - Explains computer science basics in easy-to-digest articles. Also in [podcast](https://www.codenewbie.org/basecs) format.\n * [Tutorials Point](http://tutorialspoint.com) - tutorials for technologies like web, mobile and many more.\n * [Introduction to Computer Science - CS101](https://classroom.udacity.com/courses/cs101/) - introduction to computer science in python language.\n\n ### Open Source\n\n * [Up For Grabs](http://up-for-grabs.net/#/) - Start exploring open source projects and get involved in them.\n * [24 Pull Requests](https://24pullrequests.com) - Yearly initiative to encourage developers to send 24 pull requests during December.\n * [HacktoberFest](https://hacktoberfest.digitalocean.com) - Similar to 24PullRequests, gives swag for 4 accepted pull requests.\n * [OpenHatch](https://openhatch.org/search/) - Non-profit providing tools for new open source contributors.\n * [First Timers Only](http://www.firsttimersonly.com) - Beginners-friendly open source projects.\n * [Your First PR](http://yourfirstpr.github.io/) - Helps you make a contribution by showcasing great starter issues on Github.\n * [Awesome For Beginners](https://github.com/MunGell/awesome-for-beginners) - A list of awesome beginners-friendly projects.\n * [CodeTriage](https://www.codetriage.com/) - Pick your favorite projects to receive a different issue in your inbox every day.\n * [Open Source Friday](https://opensourcefriday.com/) - Helps you find a project to contribute to.\n\n## Infosec\n__How to start? - blogs__\n* [Beginner Bug Bounty Hunters resources](https://github.com/nahamsec/Resources-for-Beginner-Bug-Bounty-Hunters)- Collection of resources to build up the basics of Web Application Security\n* [Getting Started in Bug Bounty Hunting](https://whoami.securitybreached.org/2019/06/03/guide-getting-started-in-bug-bounty-hunting/) - What You Should Know Before Starting to learn about Bug Bounty Hunting?\n* [Getting started in Bug Bounty](https://medium.com/@ehsahil/getting-started-in-bug-bounty-7052da28445a) - How to get started in Bug Bounties\n* [How to get started with bug Bounty?](https://medium.com/@unknownuser1806/what-i-have-learn-in-my-first-month-of-hacking-and-bug-bounty-dc1a4be58294) - What you need to learn before getting started with bug bounty\n* [METHODOLOGY , TOOLKIT , TIPS & TRICKS](https://medium.com/bugbountywriteup/bug-bounty-hunting-methodology-toolkit-tips-tricks-blogs-ef6542301c65) - A complete bug bounty blog for beginners\n\n__Recon__\n* [Recon - by Sahil Ahamad](https://medium.com/@ehsahil/recon-my-way-82b7e5f62e21) - Blog post on reconnaissance processes for web applications security testing\n* [Recon - by Adrien](https://medium.com/bugbountywriteup/whats-tools-i-use-for-my-recon-during-bugbounty-ec25f7f12e6d) - What tools I use for my recon during Bug Bounty\n\n## MOOCs\n\n* [Udacity](http://udacity.com) - Free and paid online classes.\n* [Coursera](http://coursera.org) - Courses from schools and universities like Stanford and Yale.\n* [Udemy](http://udemy.com) - Online learning and teaching platform.\n* [edX](https://www.edx.org) - Free online courses from institutions like Harvard, MIT, Microsoft and more.\n* [Codecademy](https://www.codecademy.com/) - Online learning platform for coding.\n* [MIT OPENCOURSEWARE](https://ocw.mit.edu/courses/find-by-department/) - Browse and learn with free MIT courses' material.\n* [Microsoft Virtual Academy](https://mva.microsoft.com) - Free courses on IT basic concepts and Microsoft products and services.\n* [Awesome Courses](https://github.com/prakhar1989/awesome-courses) - List of awesome university courses for learning Computer Science.\n* [Lynda](https://www.lynda.com) - Online learning platform.\n* [Stanford Online](https://online.stanford.edu/courses) - Stanford's courses platform.\n* [Pluralsight](https://www.pluralsight.com/) - Paid learning platform made to help you build your career or land a job.\n* [Khan Academy](https://www.khanacademy.org/) - Free online learning platform.\n* [Sololearn](https://www.sololearn.com/) - Learn coding from the ground up for free!! (also available on android)\n* [Y Combinator](https://www.insidesherpa.com/virtual-internships/prototype/oRMogWRHeewqHzA7u/College-students%3A-Learn-how-to-work-at-a-YC-startup-) - Learn how engineering works at a Y Combinator startup\n* [MOOC.fi](https://www.mooc.fi/en) - Free courses from the University of Helsinki's Department of Computer Science.\n\n## Fellowships/Scholarships\n\n* [Developer Scholarship from Google](https://in.udacity.com/google-india-scholarships) - Link for Indian students (Others click [here](https://www.udacity.com/scholarships)).\n* [Scholarship Opportunities at Google](https://edu.google.com/scholarships/) - Google's scholarship opportunities.\n* [Microsoft Scholarship Program](https://careers.microsoft.com/students/scholarships) - For students at US/Canada/Mexico only.\n* [Thiel Fellowship for young innovators](http://thielfellowship.org) - Intended for students under 23yo and offers a total of $100,000 and guidance to drop out of school and pursue other work.\n* [The Facebook Fellowship Program](https://research.fb.com/programs/fellowship/) - Designed to encourage promising doctoral students who are engaged in areas related to computer science.\n* [NVIDIA Graduate Fellowships](http://research.nvidia.com/graduate-fellowships) - Fellowship for AI,ML students.\n* [S.N. Bose Scholars Program](http://iusstf.org/story/53-74-For-Indian-Students.html) - For Indian Students.\n* [Richard E. Merwin Student Scholarship](https://www.computer.org/web/students/merwin) - For IEEE members.\n* [The Data Science for Social Good Fellowship](https://dssg.uchicago.edu) - It is a University of Chicago summer program to train aspiring data scientists to work on data mining, machine learning, big data, and data science projects with social impact.\n* [The Data Incubator](https://www.thedataincubator.com) - The Data Incubator is an 8-week educational fellowship preparing students with Master's degrees and PhDs for careers in big data and data science.\n* [Kleiner Perkins Fellow - Engineering](http://fellows.kleinerperkins.com) - Kleiner Perkins Fellows program matches accepted fellows up with their partnering Silicon Valley startups over the summer.\n* [Cern Openlab Summer Student Programme](https://openlab.cern/education) - CERN openlab is a 2 month long student program where students complete assigned projects with CERN members during the summer.\n* [HackNY Fellow](https://apply.hackny.org/) -  Fellowship that matches students with New York City Startups \n* [Adobe India Women-in-Technology Scholarship](https://research.adobe.com/adobe-india-women-in-technology-scholarship/) - Adobe Scholarship for encouraging women to showcase their excellence in computing and technology.\n* [Grace Hopper Scholarship](https://www.gracehopper-gitusc.com/#!) - A Scholarship by USC Girls in Tech.\n* [WeTech Qualcomm Global Scholarship](https://www.iie.org/Programs/WeTech/STEM-Scholarships-for-Women/Qualcomm-Global-Scholars-Program) - A scholarship for women in technology by Qualcomm and IIE.\n* [Emeritus fellowship](https://www.ugc.ac.in/ef/) - For the superannuated teachers.\n* [Junior research fellowship in science, humanities and social science](https://www.ugc.ac.in/oldpdf/xplanpdf/JRFscience.pdf) - It is for qualifiers of UGC and UGC-CSIR tests.\n* [UGC research fellowships in science for meritorious students](https://www.ugc.ac.in/oldpdf/xiplanpdf/meritorious%20students.pdf) - It is to promote quality research in University/Departments. \n* [Junior research fellowship in engineering and technology](https://www.ugc.ac.in/oldpdf/xiplanpdf/JRFE-T.pdf) - It is for those who wish to pursue Ph.D. degree in engineering and technology.\n* [Swarnajayanti fellowships scheme](https://dst.gov.in/scientific-programmes/scientific-engineering-research/human-resource-development-and-nurturing-young-talent-swarnajayanti-fellowships-scheme) - For providing special assistance and support to talented young scientist.\n\n## Programming Events\n\n* [Google Summer of Code](https://summerofcode.withgoogle.com) - A global program focused on bringing more student developers into open source software development.\n* [Google CodeJam](https://code.google.com/codejam/) - Google’s largest coding competition.\n* [Google Kickstart](https://code.google.com/codejam/kickstart/) - Many online rounds to give students the opportunity to develop their coding skills and pursue a career at Google.\n* [Google HashCode](https://hashcode.withgoogle.com) - Programming competition organized by Google for students and industry professionals across Europe, the Middle East and Africa.\n* [Google Code-in](https://codein.withgoogle.com/) - A competition for pre-university students(13 to 17 years old) to introduce themselves to the world of open source by doing small tasks for various open source projects.\n* [ACM-ICPC](https://icpc.baylor.edu/) - The International Collegiate Programming Contest is an algorithmic programming contest for college students.\n* [Facebook HackerCup](https://www.facebook.com/hackercup/) - Annual programming contest organized by Facebook.\n* [List of Open Source Internship Programs](https://github.com/tapasweni-pathak/SOC-Programs) - Includes [Rails Girls Summer of Code](https://railsgirlssummerofcode.org/) and [Outreachy](https://www.outreachy.org/).\n* [Hactoberfest](https://hacktoberfest.digitalocean.com) - Organized by Digital Ocean in October.\n* [IEEEXtreme](https://ieeextreme.org) - Annual 24 hour long team contest for IEEE members.\n\n## Hackathons\n\n* [Devpost](http://devpost.com/hackathons) - Online or in-person hackathons browsing platform.\n* [hackathon.io](http://hackathon.io) - Browse in-person hackathons.\n* [Hackalist](https://www.hackalist.org) - List of upcoming hackathons.\n* [AngelHack](https://angelhack.com) - Hackathon planning organization.\n* [Hackevents](https://hackevents.co/hackathons) - Hackathons search engine.\n* [Yelp Dataset Challenge](https://www.yelp.com/dataset/challenge) - The challenge is a chance for students to conduct research or analysis on our data and share their discoveries with Yelp.\n* [hack.summit()](https://www.crowdcast.io/hack_summit) - Virtual conference where you can learn from the world's most renowned programmers.\n* [Major League Hacking Event Page](https://mlh.io/) - A list of a ton of events that are sponsored by the official hackathon league\n* [Microsoft Imagine Cup](https://imaginecup.microsoft.com/en-us/Events?id=0)-Bring your tech idea to life with the Imagine Cup and make a difference through creativity, collaboration, and competition.\n\n## General Opportunities\n\n* [Github Student Pack](https://education.github.com/pack) - Get free access to the best developer tools in one place.\n* [Visual Studio Dev Essentials](https://www.visualstudio.com/dev-essentials/) - Free learning resources and programming tools.","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3u4KFOvYOsgyZqe1J7EBoq","type":"Asset","createdAt":"2020-01-09T21:31:14.833Z","updatedAt":"2023-09-10T04:07:48.728Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":2,"locale":"en-US"},"fields":{"title":"red-lights-in-line-on-black-surface-158826","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3u4KFOvYOsgyZqe1J7EBoq/92b9be82c1204b787577948ba7e0172e/Banner_Thrive.png","details":{"size":160048,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive.png","contentType":"image/png"}}},"contentAuthor":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"4My0rKOezFdx2dvkw6b63Z","type":"Entry","createdAt":"2019-12-18T08:00:55.309Z","updatedAt":"2019-12-18T08:00:55.309Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"person"}},"locale":"en-US"},"fields":{"name":"Anurag Sharma","tcHandle":"anu0012"}}],"upvotes":414,"downvotes":5}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3JP5vlO2F1eAwNQeUELBdB","type":"Entry","createdAt":"2022-09-14T06:52:18.262Z","updatedAt":"2022-09-14T06:52:18.262Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":58,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"Want to become a ReactJs Developer? Here's what you need to know ","slug":"want-to-become-a-reactjs-developer-heres-what-you-need-to-know","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"9min","content":"React is a must-have skill for all front-end developers these days. It is a free, open-source, component-based JavaScript library that helps you build robust and beautiful user interfaces. It has the latest functionalities like hooks, redux, reducers, etc, that make using it very easy yet powerful. It does have a steep, although fulfilling, learning curve. React enables us to build intricate user interfaces out of discrete, little chunks of code known as \"components.\" Components are what we see on our screens. They can be tied together or used individually to form a webpage or a website's front end. React will effectively update and re-render our components as our data changes. But what is rendering? Rendering is a method that tells React what to display, therefore when our data changes the component re-runs and updates according to our changed data. Data can be passed from one component to another using props. A component can also keep an internal state data called the state. The component is re-rendered whenever the state's data changes.\n\n### How to use React developer tools\nThe React Developer tool is a very useful Chrome extension that helps the developer to debug and inspect React components, states, props, hooks, etc. It makes understanding where what is implemented very easy. It can also be used to determine if a particular website uses ReactJs or not. \n\nHow to add React Developer tools to Chrome extension  \n\nTo add the extension for Chrome follow this link: [https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en-US](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en-US) \n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/1KfJ3BbRHi5oyi90reotTo/4f4431102fe45a9242acf89b5aaec70d/Want_to_become_a_ReactJs_Developer?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/1KfJ3BbRHi5oyi90reotTo/4f4431102fe45a9242acf89b5aaec70d/Want_to_become_a_ReactJs_Developer?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/1KfJ3BbRHi5oyi90reotTo/4f4431102fe45a9242acf89b5aaec70d/Want_to_become_a_ReactJs_Developer\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- Click on \"Add extension\" \n- If you want to want to manage the extensions you can go to Extensions in the tools menu of your browser\n\n### How to determine if a website/application uses ReactJs using the extension\n\nTo do that we need to go to the extensions tool in the upper right corner of the tools menu.\n- If the icon of the React Developer tool extension is colorful then the website uses ReactJs.\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4SOWGomGFvo4gItmWMX48G/1a8a7f54943bb6b348a0a21b469d08ca/Want_to_become_a_ReactJs_Developer?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4SOWGomGFvo4gItmWMX48G/1a8a7f54943bb6b348a0a21b469d08ca/Want_to_become_a_ReactJs_Developer?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4SOWGomGFvo4gItmWMX48G/1a8a7f54943bb6b348a0a21b469d08ca/Want_to_become_a_ReactJs_Developer\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- If it does not show a colorful icon then it does not use ReactJS.\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4FRXmDsB70DXYKJlAWhkfp/ed68a52dd26c96b9b28414f87d14460e/Want_to_become_a_ReactJs_Developer?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4FRXmDsB70DXYKJlAWhkfp/ed68a52dd26c96b9b28414f87d14460e/Want_to_become_a_ReactJs_Developer?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4FRXmDsB70DXYKJlAWhkfp/ed68a52dd26c96b9b28414f87d14460e/Want_to_become_a_ReactJs_Developer\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### How to use the extension\nWhen you open the Chrome browser dev tools after installing the React Developer tools, you'll see two additional panels: Components and Profiler. Chrome Devtools may be accessed by right-clicking, selecting inspect from the dropdown menu, or typing Ctrl+Shift+I.\n\n__Components tab:__ The components tab's primary function is to display the React application's organizational structure. The structure demonstrates how each component is nested. We also learn more helpful details about the parts, for instance, functions, state, context, and props.\n\nWe can easily locate a component by clicking on the structure and it will highlight the component that it renders. \n\nBelow is an example of a simple to-do list React app. \n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/7GC34pGUpBb9wMProiDtwt/5cde691c9a961b06ea3ae374f55948ba/Want_to_become_a_ReactJs_Developer?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/7GC34pGUpBb9wMProiDtwt/5cde691c9a961b06ea3ae374f55948ba/Want_to_become_a_ReactJs_Developer?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/7GC34pGUpBb9wMProiDtwt/5cde691c9a961b06ea3ae374f55948ba/Want_to_become_a_ReactJs_Developer\" alt=\"image\" loading=\"lazy\" /></picture>\n\nIn the image above, when the div consisting of the input element is clicked on, it highlights the same in the rendered webpage. \n\nWe want to know what's going on inside our components most of the time. We can view a lot of helpful information about the component using React developer tools. As we use the program, we can also watch how the information changes. As an illustration, the props have changed here. \n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/1GGI5CFg6AaMliePJwQXat/1fb716d85504cd3118cd7afec4974e57/Want_to_become_a_ReactJs_Developer?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/1GGI5CFg6AaMliePJwQXat/1fb716d85504cd3118cd7afec4974e57/Want_to_become_a_ReactJs_Developer?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/1GGI5CFg6AaMliePJwQXat/1fb716d85504cd3118cd7afec4974e57/Want_to_become_a_ReactJs_Developer\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAs illustrated above, when we update the to-do list with two inputs, it is passed as a prop into the ColumnList component, which is then rendered on the webpage. We can see the props in the lower section in the above image. \n\n__Profile tab:__ Profiler demonstrates how long it takes for each of our app's components to render. We can determine which component is making our application sluggish. Of course, it should also perform better. Additionally, it displays if the component was rerendered and the cause of the rendering. If our app isn't performing any pointless re-renders, it's worth checking. And if they are, we can probably improve them, enhancing the speed of our React website.\n\n### What does a React developer do?\nOn the client side, React developers create web applications or employ React Native to create mobile apps. JavaScript, HTML, and CSS are essential front-end technologies that must be used for this. The tasks of React developers are versatile and can involve various stages and parts of application development.\n\n- __Developing front-end components:__ The development of UI components including icons, pictures, and motion functionality may fall under the purview of React developers. Swiping, long-pressing, and drag-and-drop are a few examples. The primary duty is to provide responsive interactive technology for dynamic websites.\n- __Working with different teams:__ They must collaborate with the client, backend developer, product, and UI teams to more fully grasp how to implement their vision for the app through software development.\n- __Testing and optimizing the software:__ React developers are also in charge of planning and building new features and ensuring cross-platform capabilities. They guarantee that the program will function effectively across a range of browsers and platforms. Before the application goes live, they must test and debug the interface software.\n\n### Why do React developers love Node?\nNode.js enables the creation of scalable and quick back-end RESTful APIs. The front-end library React, on the other hand, produces interactive user interfaces. You can quickly create sophisticated and scalable web apps using both technologies. When utilized together, they may save critical development time and help make your web app code efficient and scalable.\n\nThe most often used platform for hosting and operating web servers for React apps is Node. After all, the Node Package Manager (NPM) command-line interface CLI allows you to install any package using NPM. Because NPM CLI is trustworthy package management, installing a package from among the many that are listed in the registry is quite simple.\n\nAdditionally, Webpack and other modules are used by Node to convert a React application into a single file that is simple to compile. It is quite simple to combine your multi-file React application into a single file for production and compile JSX (using Babel) while doing so thanks to the Webpack Node package.\n\nThere are many other advantages to picking Nodejs:\n- JavaScript, which you are currently using, and Node use the same. You don't need to spend money or effort learning additional languages. True code sharing between server-side and client-side code is made possible by using the same programming language.\n- Due to React.js' high level of code reuse and availability of rapid code sharing, developing JavaScript Object Notation (JSON) APIs for the web is competent. Additionally, Node.js effectively enables this.\n- NodeJS is a good option since you don't need to worry about multithreading for a web app in today's architecture. Since the NodeJS web application you create should be stateless (you will connect to backend services via APIs), autoscaling (load balancing) them horizontally for redundancy and capacity is simple.\n\n### Can we use React Native for web development?\nFor creating genuine, natively rendered mobile applications for iOS and Android, use the JavaScript framework React Native. Although it is built on React, Facebook's JavaScript toolkit for creating user interfaces, it targets mobile platforms as opposed to browsers. But can we use it for developing web applications? Yes! React Native was primarily created for mobile apps, but it has now evolved into a cross-platform framework that enables the creation of online applications that use native API components. In fact, React Native for Windows is being used by the Windows 11 Settings app to speed up the delivery of new features and capabilities to customers while maintaining the same high level of visual quality as Windows 11. Both the Windows SDK and the macOS 10.14 SDK are supported by React Native for Windows + macOS. For all Windows 10 and later compatible devices, such as PCs, tablets, 2-in-1s, Xbox, mixed reality devices, etc., as well as the macOS desktop and laptop ecosystems, you may utilize JavaScript to create native Windows apps using this. But unfortunately, its community is still young and growing and there could be a struggle to find solutions to some of your queries.\n\n### How to be a good React developer\nParticularly if you are new to web programming, you should make sure that you have a strong foundation in vanilla JavaScript before learning React particularly. Some developers believe that launching straight into React is OK, but new developers will be more successful if they're prepared to approach learning JavaScript strategically. Learning the language should come first, followed by learning certain libraries, such as React, and then going on to learning frameworks, such as vue or angular. You may feel confident in your abilities to work with React after you are at an advanced level with the JavaScript language, which covers DOM manipulation, and are familiar with ES6.\nA few things are essential to becoming a good React developer:\n- __Reading the documentation:__ Go over every page of their documentation. Every active React developer relies on it since it is the finest online resource. It will familiarize you with the principles you need, be up to date, and, most importantly, provide you with a ton of examples to work with.\n- __Asking questions:__ It's OK to conduct a web search when you need information or run into a coding problem. All React developers perform this task by searching on StackOverflow or Github, for example. Owning your own inquiries is also crucial.\n- __Developing web apps:__ Similar to any other language or framework, you continually practise. After mastering the fundamentals of React, you continue to explore the many components of the framework. Build bigger and bigger projects, and each time you need something, look for anything new you can use.\n- __Deploying your work:__ Make sure to list all of these projects on your resume after developing larger applications. You must first deploy them on the web to achieve that. React apps are relatively easy to deploy. Simple hosting services like Netlify or Heroku, which are both free and easy as pie, are all you need to learn how to utilize. \n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"13xehp2Kyjd978mQjPk2mK","type":"Asset","createdAt":"2022-09-13T16:53:42.698Z","updatedAt":"2022-09-14T06:52:14.883Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":2,"locale":"en-US"},"fields":{"title":"Want to become a ReactJs Developer? Here-s what you need to know","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/13xehp2Kyjd978mQjPk2mK/fadf465eb8afc41030cf76f5c08c1c00/Want_to_become_a_ReactJs_Developer.png","details":{"size":57946,"image":{"width":599,"height":355}},"fileName":"Want_to_become_a_ReactJs_Developer.png","contentType":"image/png"}}},"contentAuthor":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3LNgj1WupzipANkmqToJW9","type":"Entry","createdAt":"2022-08-17T03:31:29.176Z","updatedAt":"2022-08-17T03:31:29.176Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"person"}},"locale":"en-US"},"fields":{"name":"Ishika Bhosale","tcHandle":"ishikabhosale"}}],"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3PkxXmLvXuh8SVwAV3kCx8","type":"Entry","createdAt":"2022-09-14T06:48:59.169Z","updatedAt":"2022-09-15T12:11:00.590Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"React Developer: Let's get started","slug":"react-developer-lets-get-started","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"10min","content":"React is a popular front-end development JavaScript library that runs on a browser and has become a choice development option amongst front-end web developers. It has robust support for UI-based designs and fully supports development across multiple platforms. \n\nA significant perk of using React comes with the very handy developer tool that makes it almost effortless to create responsive web pages while providing easy rendering. React is also very beginner-friendly, with a vibrant developer community that provides support which makes learning it even easier. It is also referred to as React.js or ReactJS.\n\n### What does a React developer do?\nA React developer designs and implements the user interface for web and mobile applications using a JavaScript-based library called React. They deal with the front end of an application and bring UI components to life with code. \n\nSome of the roles of a React developer include:\n- __Develop UI features:__ React developers are the engineers responsible for the dynamic and responsive side of the web and mobile applications that users first come in contact with. They make sure that the client side of the web and mobile applications are user-friendly and aesthetically pleasing through the use of code.\n- __Improve application functionality:__ React developers are also tasked with the responsibility of optimizing application performance by frequently creating new features and making a constant effort to ensure that the application runs smoothly on multiple devices and is compatible with various browsers.\n- __Testing software features:__ As React developers are involved in all the stages of the front-end development cycle, testing the application for bugs and debugging before and after it goes live, as the case may be, also become a duty of the React developer.\n- __Consistent collaboration:__ Working with UI designers to implement their designs as much as feasible, while consulting with the back-end engineers to ensure that the interaction between the server and client side of the application communicates without an error is another role played by a React developer. \n\n### Why React developers love Node\nNode is a JavaScript runtime environment that runs on a very optimized JavaScript engine. It enables developers to run JavaScript code outside of the browser environment and is popular among developers to create back-end applications. Node, also known as Nodejs, is a platform that can be used to run servers that host a React application. \n\n__Note:__ Other platforms can be used to host React applications, however, using Nodejs is the most common.\n\nReact and Node, both of which are JavaScript-based, can be used to build front-end/client-side and server-side applications respectively, which in turn assist in the development and deployment of fully-functional and highly performant applications while maintaining scalability.\n\nUsing both React and Node for development comes with a load of pros. Below are a few of the reasons why it is loved by React developers:\n\n- Using both React and Node complements each other for a development project. Since they are both JavaScript based, it becomes easy for a developer to easily share code between the server and client-side of the same project. This makes it easier for a developer to build faster and eliminates the need for investing in other languages or libraries for building the front-end and back-end of an application.\n- Dependencies which make it easy to develop applications can easily be installed from npm command line interface. npm serves as a package manager for Node. npm comes with Node and using Node with React applications keeps the package dependencies in check. To install packages through the npm CLI, enter the command:\n\n`npm install packagename`\n\n- Node makes it pretty easy for developers to run React directly in its environment.\n- A ton of resources are available for working with Node/Reactjs making it easy to find help when stuck.\n- Webpack, a very popular Node package, makes it easy to bundle multiple React files into a single one for seamless compilation of the JSX files. Hence, optimized rendering of the components.\n\n### How to use React developer tools\nThe React developer tool, also known as the react devtool is a browser extension for the React JavaScript library. It is fully supported in Chrome, Firefox, and Microsoft Edge.\nThis developer tool contributes to the user-friendliness of React by making it easy to determine the relationship between components and at the same time inspect the state and properties of a component and a lot of other features.\n\n__Note:__ A component in React is a reusable piece of code that breaks down complex UI into codable portions. \n\nA component that works similarly to functions in JavaScript is known as a ‘function component’. It accepts inputs known as props (properties) and returns React elements to be rendered as output. React components are simply HTML + JavaScript (HyperText Markup Language).\n\nWith continued use and familiarity, using the React developer tool becomes pretty simple.\n\n1. Installing the React developer tool browser extension is the first step.\n- __Chrome__ - The extension may be added to Chrome through the Chrome Webstore.\n- __Firefox__ - Firefox add-ons can be used to add it.\n- __Microsoft Edge__ - It may be installed via Microsoft Edge add-ons.\n\n__Note:__ React developer tools are also available in a standalone package that can be used with Safari and other React apps that are not browser-based.\n\nRun the command accordingly to install this package from npm or yarn:\n\n- `npm install -g react-devtools` // this installs the package globally;\n- `yarn global add react-devtools` // installs the package globally\nAlternatively,\n- `yarn add --dev react-devtools` // this adds the react-devtool as a project dependency instead of installing it globally.\n\n2. Once the developer tool is installed, using it comes next.\n- To open up the developer tool, right-click on the React web page and click on inspect. Alternatively, F12 or Ctrl + Shift + I also opens up the developer tool on the React web page. \n\nOn the browser’s inspection window, two new tabs appear:\n- __Components tab__ - This is useful when dealing with the inspection of components. It shows important details like the hierarchy amongst components in a React application and other information like the state and properties of components amongst others.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n__Use cases__\n- __Inspection/Selection of components__ - Using the arrow on the top left corner of the React devtool is a simple way to inspect components, simply by clicking on it and clicking on the component to be selected.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Inspection of source code__ - The React developer tools makes it easy to inspect the source code directly instead of switching to the code editor. To use this feature, click on the React component to inspect and click on the `<>` icon, this displays the source code in the console and helps a developer to inspect the source of an error.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Debugging components__ - The React developer tool can also be useful when debugging components, it helps the developer access all the information available to a particular component while interacting with a component in the React developer tool.\n\n- __Profiler tab__ - This is useful when dealing with performance optimization in components. It shows how much time it takes for a component to render and in the long run helps to improve the performance of the application by helping developers make decisions on the elimination or replacement of a component that slows down the application.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Can we use React Native for web development?\nYes. React Native for Web provides this benefit. Ordinarily, React Native is a mobile framework that enables a developer to build native applications across Android and iOS platforms. However, with React Native for Web, the ballgame changes. This versatile web development library acts as the web version for React Native and helps to bring React Native applications to the web through a single codebase. \n\nA major benefit of React Native for Web is that it leads to the rapid development of applications that are supported across multiple platforms as a result of the use of a single codebase. \n\n__Note:__ If the mobile and web application will provide similar functionality, React Native for Web becomes a very good option, saving the developer a lot of time in development. However, if the mobile and web will differ in functionality, React might seem like a plausible option. Nonetheless, the use of frameworks and libraries is largely dependent on a project’s specification and timeline, with each option presenting its pros and cons. \n\n### How to be a good React developer.\nAccording to statistics, React has become the most in-demand web framework in 2022, making the demand for React developers rise. And while the career prospect for this field is promising, it is also very competitive. To be on top of the game, developers must know their onions to remain relevant in the field. \n\nThe following tips can be useful for leveling up in the React development game:\n- __Acquiring the necessary skills__ - The necessary skills needed to thrive as a React developer include:\n\n- __Soft skills__ such as problem-solving skills and excellent communication skills amongst others.\n\n- __Hard skills__ such as Having a solid ability to use React library and other frameworks pertinent to building and deploying web and mobile applications. Having a good grasp of the React developer tools to debug and inspect components in an application. Being very familiar with front-end development technologies such as HTML, CSS, and JavaScript itself. Knowing how to use the CLI, GitHub, or other code repositories.\n\n- __Build a portfolio of work__ - Working on projects that showcase React development skills is a great way to practice. Constant practice, in the long run, helps a React developer to become better. In addition, a very strong portfolio of work increases the chances of a developer getting hired when applying to jobs.\n\n- __Gain work experience__ - This could be through volunteer, freelancing, or internship exposure. These are great places to put acquired skills to work in a real-time environment. New skills, techniques as well as industry standards that might be helpful in future jobs could be learned as well. \n\n- __Attend tech events__ - Tech events such as seminars, conferences, hackathons, and everything in between create a great atmosphere to learn the latest trends in tech, update features to a library or framework while networking with peers in the industry and help a developer get better by providing an update to their knowledge base.\n\n- __Teach others__ - Teaching is another fantastic way to get better at a web development framework or library. Sharing solutions or ideas to challenges related to web and mobile application development helps a developer to reinforce what they already know, thereby becoming a master at it.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2RmQNaqeMaNlQ5JUJ0l73S","type":"Asset","createdAt":"2022-09-13T16:25:55.460Z","updatedAt":"2022-09-13T16:25:55.460Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"React Developer- Let-s get started","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/2RmQNaqeMaNlQ5JUJ0l73S/efbfdd7e8ba9887570e6632f16db251d/React_Developer-_Let-s_get_started.jpeg","details":{"size":34438,"image":{"width":500,"height":500}},"fileName":"React Developer- Let-s get started.jpeg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"7HIyZkudVKIQdeECSNzSuA"}}],"upvotes":1,"downvotes":0,"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5hSMpw9QA7W62VqgaiJVAo","type":"Entry","createdAt":"2022-09-14T06:49:08.388Z","updatedAt":"2022-09-14T06:49:08.388Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":32,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"A guide to become a React Developer","slug":"a-guide-to-become-a-react-developer","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"6min","content":"To begin utilizing the React developer tools, it must be installed as a browser extension. Chrome, Firefox, and Edge are currently supported by the plugin. Once you've installed developer tools,  you can put them to use. To install the plugins on Chrome, Firefox or Edge, click on these links respectively: \n\n- [https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\n- [https://addons.mozilla.org/en-US/firefox/addon/react-devtools/](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)\n- [https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)\n\nThe next step is to launch the React dev tools. To activate the extension right-click anywhere in the browser window and click on inspect. You may also access it by hitting F12. This will launch the browser developer tools with all of the standard tabs such as elements, console, and so on.\n\nWhen you install the React dev tools extension, you will now have access to two new tabs: components (these are used to investigate the component tree) and profiler (a tool for measuring performance).\n\n__Components:__ The components tab's main objective is to show the architecture of the React application. The architecture depicts how all of the components are nested. In addition, we obtain other essential information on the component. For example:  state, props, context, functions, etc. \n\nThe most basic  way to find components is to utilize the arrow in the upper left corner. Then, simply point and click on the component to be inspected. Another way is to search for the component we're looking for using the  built-in search bar to discover and highlight components. This is especially useful if we have a deeply nested component tree. The components and elements tabs interact with one another. If we choose any component from the components tab, it will also be selected in the elements tab, and vice versa.\n\nThe majority of the time, we want to see what's going on inside our components. We can see a significant amount of useful data about the component using React developer tools. In addition, we can watch how the information changes as we interact with the program. This also works in the other direction. This implies we can alter state without interacting with the user interface. We delete items by directly altering the component state in the developer tools.\n\nThe components tab is linked to the console. Once we've decided on a component, we can go to console and enter $r. It will display all of the information on the components tab. We can now communicate with the component via our favorite console. Furthermore, we may call functions that the component has access to.  Alternatively, within the components tab, you may access and alter a component's state and properties. From the right side, click and edit the props and state. To see state, you must first initialize the component with some state from your files.\n\nThe React developer tools make it simple to analyze source code in the browser window, preventing developers from repeatedly jumping between the coding editor and the browser. All the developers have to do is to choose the component and then click the < >. This will open the associated file, allowing developers to examine the problem with the code.\n\nIf we use create-react-app or Next.js, we receive this feature by default. If you can't view your component's original code, you'll need to add babel-plugin-transform-react-jsx-source to your webpack setup.\nWe can simply monitor how our application behaves using these tools and address concerns as they arise. When the application is stable and free of bugs. it's time to boost its performance. Profiler can help us with that.\n\nProfiler gives us the duration it takes for each component of our program to be  rendered. We can determine which component is causing our application to lag and subsequently improve its performance. It also indicates whether or not the component was rerendered and what triggered the rendering. It's worth examining to see if there are any superfluous re-renders in our app. And if there are, we can almost certainly optimize them, increasing the speed of our React website.\n\n### What does a React developer do?\nA React developer produces JavaScript-based apps for web or mobile platforms. React developers usually focus on front-end development. React developers are in charge of UI components including icons, pictures, and gesture-based functionality like swiping, long-pressing, and drag-and-drop. A React developer is responsible for converting wireframes (screen blueprints) into code. They also use and create CSS selectors and HTML tags. React developers are responsible for cross-platform functionality in addition to designing and developing new features. They guarantee that the program runs smoothly on many browsers and devices. Being active in all stages of interface development necessitates React developers testing the apps on which they work. React developers work with the customer to better understand how to realize their app concept through software development and consult with back-end engineers and developers to ensure error-free collaborative user-facing and server-side interactions.\n\n### Why React developers love Node\nThe majority of React examples and projects available on the web are built with Node. As a result, React developers love to use Node because it is easy to find support. Also, Node is JavaScript, which React developers are already familiar with. They do not need to learn any more languages. Using the same language enables for full code sharing across server-side and client-side code. React developers stop talking server-side and client-side because on both sides, nothing except JavaScript is utilized. Node.js uses a single threaded architecture in conjunction with event looping to produce a highly scalable server, as opposed to traditional servers such as the Apache HTTP server, which employs restricted threads to handle a huge number of requests. Because there are almost no methods in Node.js that directly do I/O, this single threaded approach also hinders the server from responding in a non-blocking way. Furthermore, because Node.js apps output data in bulk, they do not suffer from buffering.\n\nMost significantly, your React front-end code can be run in a Node environment. This is the simplest way to implement server-side rendering and Universal/Isomorphic applications.\n\nReact developers love Node.js because it is an excellent choice for developers who want to get their apps into production as quickly as possible. It's also popular because it's simple to learn and offers an excellent ecosystem with ready-made modules.\nAnother reason is that ReactJS on the client side communicates with NodeJS on the server using API requests (for example, REST and/or GraphQL). Any other language/platform, however, may create an API server that works just as well. NodeJS has the benefit of allowing you to use the same language (e.g. ES6/7 JavaScript) and development and build tools (e.g. eslint, babel, webpack) for both client and server development.\n\n### Can we use React Native for Web development?\nDevelopers can use React Native for Web to create a single React Native application that runs natively on Android and iOS as well as in a web browser using standard web technologies. The fact is that the basis of a mobile app differs significantly from that of a web app. React, for example, constructs its layout using basic HTML5 elements such as div and span, whereas React Native employs custom UI APIs such as view and text. Because of this distinction, few technologies allow developing apps for both web and mobile. React Native for Web attempts to fill this need. It is designed to aid in the development of genuinely cross-platform apps utilizing a single React Native codebase.\n\nReact Native for Web implements browser-compatible React Native components. If a `<View>` is used to render views in React Native mobile, a browser-compatible version of this `<view>` is provided in React Native for Web, which includes a function for compiling this view down to a web `<div>`.\n\n  This brings up an important point: not all native components can be rendered browser-compatible. Some mobile-oriented components make use of mobile hardware APIs that a web browser cannot directly access.\nThis implies that React Native for Web cannot be used to entirely transfer a program to its web version. But we can still transmit a significant portion of it, which is usually adequate.  React Native for Web follows React Native's CSS-in-JS approach, guaranteeing that the same set of styles works well on both mobile and web.\n\n### How to be a good React developer\nTo be a good React developer, you have to develop very essential skills in React development: Use and create semantic HTML tags and write CSS selectors. Apply a CSS reset. Know the box model and how to return to the border-box mode. Recognize flexbox. Operate with and apply responsive web concepts, such as correct media query use. \n\nYou never truly touch HTML in React. You work with JSX, a syntactic extension that is one of the most impressive components of the React ecosystem. Because JSX appears so similar to HTML, you may think of it as HTML-flavored JavaScript. What's wonderful about JSX is that if you understand HTML and CSS, you can work with it naturally.\n\nYou can't enjoy React without a solid understanding of the fundamental concepts provided by the JavaScript language, but these ES6 skills are also required. It is vital to understand when and from where you have access to the data you require. Variables are the feature built into JavaScript that allows us to store data in memory and access it later in our apps. The React pattern indicates that your 'view is a function of your state.' That is v = f(s) in arithmetic, and it is something you should remember while you review your library foundations skills.\n\nState refers to data that we want to display to users or items in memory that we can access to allow our users to interact with our data. We keep all of the data that we show on a state object and access these bits of data through attributes on this state object. React got its name because as the state changes, the view updates (\\`v = f(s);\\`). As a result, your view 'reacts' to changes in your state object. You should review how to modify objects and change the values of their properties. Don't worry, React handles the technique with a handy method called `setState()` to make this work in your favor.\n\nGit is an essential component of any developer's arsenal for storing projects on services such as GitHub, Bitbucket, and GitLab. Skills that should be part of your daily routine include change tracking using add, commit, push, and pull, strategies for branching and merging, and dealing with merge conflicts\n\nWhile you may include React in any HTML page, there will be many more packages available that will allow you to enhance the React framework. You must be well-versed with the npm registry. This is where software developers may go to obtain software to help them make software. It may sound strange, but that is exactly what npm is: a cloud storage service for packages known as dependencies.\n\nReact includes state management. Many developers have been burnt along the road because they discovered the asynchronicity of state updates and how React manages them. Redux was created for this reason, as well as for scalability. Redux is a state management library that does a lot more. It is not a framework, but rather an opinionated approach to dealing with data. Redux's ideas are similar to functional programming and immutability, but it is not a one-size-fits-all solution. Prior to getting into Redux, it is critical to understand the fundamentals of React programming.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5qQeFHrh1febAp4AYPeiNW","type":"Asset","createdAt":"2022-09-13T16:43:57.238Z","updatedAt":"2023-09-20T16:59:26.502Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":2,"locale":"en-US"},"fields":{"title":"A guide to become a React Developer","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/5qQeFHrh1febAp4AYPeiNW/39ebd19c0a125eb462ac82bbcd9e990b/Banner_Thrive__1_.png","details":{"size":160048,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive (1).png","contentType":"image/png"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"6GfF0AO8P9MbS4C8Y17ARh"}}],"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3PkxXmLvXuh8SVwAV3kCx8","type":"Entry","createdAt":"2022-09-14T06:48:59.169Z","updatedAt":"2022-09-15T12:11:00.590Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"React Developer: Let's get started","slug":"react-developer-lets-get-started","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"10min","content":"React is a popular front-end development JavaScript library that runs on a browser and has become a choice development option amongst front-end web developers. It has robust support for UI-based designs and fully supports development across multiple platforms. \n\nA significant perk of using React comes with the very handy developer tool that makes it almost effortless to create responsive web pages while providing easy rendering. React is also very beginner-friendly, with a vibrant developer community that provides support which makes learning it even easier. It is also referred to as React.js or ReactJS.\n\n### What does a React developer do?\nA React developer designs and implements the user interface for web and mobile applications using a JavaScript-based library called React. They deal with the front end of an application and bring UI components to life with code. \n\nSome of the roles of a React developer include:\n- __Develop UI features:__ React developers are the engineers responsible for the dynamic and responsive side of the web and mobile applications that users first come in contact with. They make sure that the client side of the web and mobile applications are user-friendly and aesthetically pleasing through the use of code.\n- __Improve application functionality:__ React developers are also tasked with the responsibility of optimizing application performance by frequently creating new features and making a constant effort to ensure that the application runs smoothly on multiple devices and is compatible with various browsers.\n- __Testing software features:__ As React developers are involved in all the stages of the front-end development cycle, testing the application for bugs and debugging before and after it goes live, as the case may be, also become a duty of the React developer.\n- __Consistent collaboration:__ Working with UI designers to implement their designs as much as feasible, while consulting with the back-end engineers to ensure that the interaction between the server and client side of the application communicates without an error is another role played by a React developer. \n\n### Why React developers love Node\nNode is a JavaScript runtime environment that runs on a very optimized JavaScript engine. It enables developers to run JavaScript code outside of the browser environment and is popular among developers to create back-end applications. Node, also known as Nodejs, is a platform that can be used to run servers that host a React application. \n\n__Note:__ Other platforms can be used to host React applications, however, using Nodejs is the most common.\n\nReact and Node, both of which are JavaScript-based, can be used to build front-end/client-side and server-side applications respectively, which in turn assist in the development and deployment of fully-functional and highly performant applications while maintaining scalability.\n\nUsing both React and Node for development comes with a load of pros. Below are a few of the reasons why it is loved by React developers:\n\n- Using both React and Node complements each other for a development project. Since they are both JavaScript based, it becomes easy for a developer to easily share code between the server and client-side of the same project. This makes it easier for a developer to build faster and eliminates the need for investing in other languages or libraries for building the front-end and back-end of an application.\n- Dependencies which make it easy to develop applications can easily be installed from npm command line interface. npm serves as a package manager for Node. npm comes with Node and using Node with React applications keeps the package dependencies in check. To install packages through the npm CLI, enter the command:\n\n`npm install packagename`\n\n- Node makes it pretty easy for developers to run React directly in its environment.\n- A ton of resources are available for working with Node/Reactjs making it easy to find help when stuck.\n- Webpack, a very popular Node package, makes it easy to bundle multiple React files into a single one for seamless compilation of the JSX files. Hence, optimized rendering of the components.\n\n### How to use React developer tools\nThe React developer tool, also known as the react devtool is a browser extension for the React JavaScript library. It is fully supported in Chrome, Firefox, and Microsoft Edge.\nThis developer tool contributes to the user-friendliness of React by making it easy to determine the relationship between components and at the same time inspect the state and properties of a component and a lot of other features.\n\n__Note:__ A component in React is a reusable piece of code that breaks down complex UI into codable portions. \n\nA component that works similarly to functions in JavaScript is known as a ‘function component’. It accepts inputs known as props (properties) and returns React elements to be rendered as output. React components are simply HTML + JavaScript (HyperText Markup Language).\n\nWith continued use and familiarity, using the React developer tool becomes pretty simple.\n\n1. Installing the React developer tool browser extension is the first step.\n- __Chrome__ - The extension may be added to Chrome through the Chrome Webstore.\n- __Firefox__ - Firefox add-ons can be used to add it.\n- __Microsoft Edge__ - It may be installed via Microsoft Edge add-ons.\n\n__Note:__ React developer tools are also available in a standalone package that can be used with Safari and other React apps that are not browser-based.\n\nRun the command accordingly to install this package from npm or yarn:\n\n- `npm install -g react-devtools` // this installs the package globally;\n- `yarn global add react-devtools` // installs the package globally\nAlternatively,\n- `yarn add --dev react-devtools` // this adds the react-devtool as a project dependency instead of installing it globally.\n\n2. Once the developer tool is installed, using it comes next.\n- To open up the developer tool, right-click on the React web page and click on inspect. Alternatively, F12 or Ctrl + Shift + I also opens up the developer tool on the React web page. \n\nOn the browser’s inspection window, two new tabs appear:\n- __Components tab__ - This is useful when dealing with the inspection of components. It shows important details like the hierarchy amongst components in a React application and other information like the state and properties of components amongst others.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n__Use cases__\n- __Inspection/Selection of components__ - Using the arrow on the top left corner of the React devtool is a simple way to inspect components, simply by clicking on it and clicking on the component to be selected.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Inspection of source code__ - The React developer tools makes it easy to inspect the source code directly instead of switching to the code editor. To use this feature, click on the React component to inspect and click on the `<>` icon, this displays the source code in the console and helps a developer to inspect the source of an error.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Debugging components__ - The React developer tool can also be useful when debugging components, it helps the developer access all the information available to a particular component while interacting with a component in the React developer tool.\n\n- __Profiler tab__ - This is useful when dealing with performance optimization in components. It shows how much time it takes for a component to render and in the long run helps to improve the performance of the application by helping developers make decisions on the elimination or replacement of a component that slows down the application.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Can we use React Native for web development?\nYes. React Native for Web provides this benefit. Ordinarily, React Native is a mobile framework that enables a developer to build native applications across Android and iOS platforms. However, with React Native for Web, the ballgame changes. This versatile web development library acts as the web version for React Native and helps to bring React Native applications to the web through a single codebase. \n\nA major benefit of React Native for Web is that it leads to the rapid development of applications that are supported across multiple platforms as a result of the use of a single codebase. \n\n__Note:__ If the mobile and web application will provide similar functionality, React Native for Web becomes a very good option, saving the developer a lot of time in development. However, if the mobile and web will differ in functionality, React might seem like a plausible option. Nonetheless, the use of frameworks and libraries is largely dependent on a project’s specification and timeline, with each option presenting its pros and cons. \n\n### How to be a good React developer.\nAccording to statistics, React has become the most in-demand web framework in 2022, making the demand for React developers rise. And while the career prospect for this field is promising, it is also very competitive. To be on top of the game, developers must know their onions to remain relevant in the field. \n\nThe following tips can be useful for leveling up in the React development game:\n- __Acquiring the necessary skills__ - The necessary skills needed to thrive as a React developer include:\n\n- __Soft skills__ such as problem-solving skills and excellent communication skills amongst others.\n\n- __Hard skills__ such as Having a solid ability to use React library and other frameworks pertinent to building and deploying web and mobile applications. Having a good grasp of the React developer tools to debug and inspect components in an application. Being very familiar with front-end development technologies such as HTML, CSS, and JavaScript itself. Knowing how to use the CLI, GitHub, or other code repositories.\n\n- __Build a portfolio of work__ - Working on projects that showcase React development skills is a great way to practice. Constant practice, in the long run, helps a React developer to become better. In addition, a very strong portfolio of work increases the chances of a developer getting hired when applying to jobs.\n\n- __Gain work experience__ - This could be through volunteer, freelancing, or internship exposure. These are great places to put acquired skills to work in a real-time environment. New skills, techniques as well as industry standards that might be helpful in future jobs could be learned as well. \n\n- __Attend tech events__ - Tech events such as seminars, conferences, hackathons, and everything in between create a great atmosphere to learn the latest trends in tech, update features to a library or framework while networking with peers in the industry and help a developer get better by providing an update to their knowledge base.\n\n- __Teach others__ - Teaching is another fantastic way to get better at a web development framework or library. Sharing solutions or ideas to challenges related to web and mobile application development helps a developer to reinforce what they already know, thereby becoming a master at it.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2RmQNaqeMaNlQ5JUJ0l73S","type":"Asset","createdAt":"2022-09-13T16:25:55.460Z","updatedAt":"2022-09-13T16:25:55.460Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"React Developer- Let-s get started","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/2RmQNaqeMaNlQ5JUJ0l73S/efbfdd7e8ba9887570e6632f16db251d/React_Developer-_Let-s_get_started.jpeg","details":{"size":34438,"image":{"width":500,"height":500}},"fileName":"React Developer- Let-s get started.jpeg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"7HIyZkudVKIQdeECSNzSuA"}}],"upvotes":1,"downvotes":0,"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}}],"openExternalLinksInNewTab":true}}],"includes":{"Entry":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"28L4kciHjkRx94fjXxY0eL","type":"Entry","createdAt":"2021-01-26T05:44:18.746Z","updatedAt":"2021-01-26T05:44:18.746Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Community","trackParent":"Topcoder"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3LNgj1WupzipANkmqToJW9","type":"Entry","createdAt":"2022-08-17T03:31:29.176Z","updatedAt":"2022-08-17T03:31:29.176Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"person"}},"locale":"en-US"},"fields":{"name":"Ishika Bhosale","tcHandle":"ishikabhosale"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3PkxXmLvXuh8SVwAV3kCx8","type":"Entry","createdAt":"2022-09-14T06:48:59.169Z","updatedAt":"2022-09-15T12:11:00.590Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"React Developer: Let's get started","slug":"react-developer-lets-get-started","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"10min","content":"React is a popular front-end development JavaScript library that runs on a browser and has become a choice development option amongst front-end web developers. It has robust support for UI-based designs and fully supports development across multiple platforms. \n\nA significant perk of using React comes with the very handy developer tool that makes it almost effortless to create responsive web pages while providing easy rendering. React is also very beginner-friendly, with a vibrant developer community that provides support which makes learning it even easier. It is also referred to as React.js or ReactJS.\n\n### What does a React developer do?\nA React developer designs and implements the user interface for web and mobile applications using a JavaScript-based library called React. They deal with the front end of an application and bring UI components to life with code. \n\nSome of the roles of a React developer include:\n- __Develop UI features:__ React developers are the engineers responsible for the dynamic and responsive side of the web and mobile applications that users first come in contact with. They make sure that the client side of the web and mobile applications are user-friendly and aesthetically pleasing through the use of code.\n- __Improve application functionality:__ React developers are also tasked with the responsibility of optimizing application performance by frequently creating new features and making a constant effort to ensure that the application runs smoothly on multiple devices and is compatible with various browsers.\n- __Testing software features:__ As React developers are involved in all the stages of the front-end development cycle, testing the application for bugs and debugging before and after it goes live, as the case may be, also become a duty of the React developer.\n- __Consistent collaboration:__ Working with UI designers to implement their designs as much as feasible, while consulting with the back-end engineers to ensure that the interaction between the server and client side of the application communicates without an error is another role played by a React developer. \n\n### Why React developers love Node\nNode is a JavaScript runtime environment that runs on a very optimized JavaScript engine. It enables developers to run JavaScript code outside of the browser environment and is popular among developers to create back-end applications. Node, also known as Nodejs, is a platform that can be used to run servers that host a React application. \n\n__Note:__ Other platforms can be used to host React applications, however, using Nodejs is the most common.\n\nReact and Node, both of which are JavaScript-based, can be used to build front-end/client-side and server-side applications respectively, which in turn assist in the development and deployment of fully-functional and highly performant applications while maintaining scalability.\n\nUsing both React and Node for development comes with a load of pros. Below are a few of the reasons why it is loved by React developers:\n\n- Using both React and Node complements each other for a development project. Since they are both JavaScript based, it becomes easy for a developer to easily share code between the server and client-side of the same project. This makes it easier for a developer to build faster and eliminates the need for investing in other languages or libraries for building the front-end and back-end of an application.\n- Dependencies which make it easy to develop applications can easily be installed from npm command line interface. npm serves as a package manager for Node. npm comes with Node and using Node with React applications keeps the package dependencies in check. To install packages through the npm CLI, enter the command:\n\n`npm install packagename`\n\n- Node makes it pretty easy for developers to run React directly in its environment.\n- A ton of resources are available for working with Node/Reactjs making it easy to find help when stuck.\n- Webpack, a very popular Node package, makes it easy to bundle multiple React files into a single one for seamless compilation of the JSX files. Hence, optimized rendering of the components.\n\n### How to use React developer tools\nThe React developer tool, also known as the react devtool is a browser extension for the React JavaScript library. It is fully supported in Chrome, Firefox, and Microsoft Edge.\nThis developer tool contributes to the user-friendliness of React by making it easy to determine the relationship between components and at the same time inspect the state and properties of a component and a lot of other features.\n\n__Note:__ A component in React is a reusable piece of code that breaks down complex UI into codable portions. \n\nA component that works similarly to functions in JavaScript is known as a ‘function component’. It accepts inputs known as props (properties) and returns React elements to be rendered as output. React components are simply HTML + JavaScript (HyperText Markup Language).\n\nWith continued use and familiarity, using the React developer tool becomes pretty simple.\n\n1. Installing the React developer tool browser extension is the first step.\n- __Chrome__ - The extension may be added to Chrome through the Chrome Webstore.\n- __Firefox__ - Firefox add-ons can be used to add it.\n- __Microsoft Edge__ - It may be installed via Microsoft Edge add-ons.\n\n__Note:__ React developer tools are also available in a standalone package that can be used with Safari and other React apps that are not browser-based.\n\nRun the command accordingly to install this package from npm or yarn:\n\n- `npm install -g react-devtools` // this installs the package globally;\n- `yarn global add react-devtools` // installs the package globally\nAlternatively,\n- `yarn add --dev react-devtools` // this adds the react-devtool as a project dependency instead of installing it globally.\n\n2. Once the developer tool is installed, using it comes next.\n- To open up the developer tool, right-click on the React web page and click on inspect. Alternatively, F12 or Ctrl + Shift + I also opens up the developer tool on the React web page. \n\nOn the browser’s inspection window, two new tabs appear:\n- __Components tab__ - This is useful when dealing with the inspection of components. It shows important details like the hierarchy amongst components in a React application and other information like the state and properties of components amongst others.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n__Use cases__\n- __Inspection/Selection of components__ - Using the arrow on the top left corner of the React devtool is a simple way to inspect components, simply by clicking on it and clicking on the component to be selected.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Inspection of source code__ - The React developer tools makes it easy to inspect the source code directly instead of switching to the code editor. To use this feature, click on the React component to inspect and click on the `<>` icon, this displays the source code in the console and helps a developer to inspect the source of an error.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Debugging components__ - The React developer tool can also be useful when debugging components, it helps the developer access all the information available to a particular component while interacting with a component in the React developer tool.\n\n- __Profiler tab__ - This is useful when dealing with performance optimization in components. It shows how much time it takes for a component to render and in the long run helps to improve the performance of the application by helping developers make decisions on the elimination or replacement of a component that slows down the application.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Can we use React Native for web development?\nYes. React Native for Web provides this benefit. Ordinarily, React Native is a mobile framework that enables a developer to build native applications across Android and iOS platforms. However, with React Native for Web, the ballgame changes. This versatile web development library acts as the web version for React Native and helps to bring React Native applications to the web through a single codebase. \n\nA major benefit of React Native for Web is that it leads to the rapid development of applications that are supported across multiple platforms as a result of the use of a single codebase. \n\n__Note:__ If the mobile and web application will provide similar functionality, React Native for Web becomes a very good option, saving the developer a lot of time in development. However, if the mobile and web will differ in functionality, React might seem like a plausible option. Nonetheless, the use of frameworks and libraries is largely dependent on a project’s specification and timeline, with each option presenting its pros and cons. \n\n### How to be a good React developer.\nAccording to statistics, React has become the most in-demand web framework in 2022, making the demand for React developers rise. And while the career prospect for this field is promising, it is also very competitive. To be on top of the game, developers must know their onions to remain relevant in the field. \n\nThe following tips can be useful for leveling up in the React development game:\n- __Acquiring the necessary skills__ - The necessary skills needed to thrive as a React developer include:\n\n- __Soft skills__ such as problem-solving skills and excellent communication skills amongst others.\n\n- __Hard skills__ such as Having a solid ability to use React library and other frameworks pertinent to building and deploying web and mobile applications. Having a good grasp of the React developer tools to debug and inspect components in an application. Being very familiar with front-end development technologies such as HTML, CSS, and JavaScript itself. Knowing how to use the CLI, GitHub, or other code repositories.\n\n- __Build a portfolio of work__ - Working on projects that showcase React development skills is a great way to practice. Constant practice, in the long run, helps a React developer to become better. In addition, a very strong portfolio of work increases the chances of a developer getting hired when applying to jobs.\n\n- __Gain work experience__ - This could be through volunteer, freelancing, or internship exposure. These are great places to put acquired skills to work in a real-time environment. New skills, techniques as well as industry standards that might be helpful in future jobs could be learned as well. \n\n- __Attend tech events__ - Tech events such as seminars, conferences, hackathons, and everything in between create a great atmosphere to learn the latest trends in tech, update features to a library or framework while networking with peers in the industry and help a developer get better by providing an update to their knowledge base.\n\n- __Teach others__ - Teaching is another fantastic way to get better at a web development framework or library. Sharing solutions or ideas to challenges related to web and mobile application development helps a developer to reinforce what they already know, thereby becoming a master at it.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2RmQNaqeMaNlQ5JUJ0l73S","type":"Asset","createdAt":"2022-09-13T16:25:55.460Z","updatedAt":"2022-09-13T16:25:55.460Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"React Developer- Let-s get started","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/2RmQNaqeMaNlQ5JUJ0l73S/efbfdd7e8ba9887570e6632f16db251d/React_Developer-_Let-s_get_started.jpeg","details":{"size":34438,"image":{"width":500,"height":500}},"fileName":"React Developer- Let-s get started.jpeg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"7HIyZkudVKIQdeECSNzSuA"}}],"upvotes":1,"downvotes":0,"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"47m7HZF8X855k7uGl3IPxy","type":"Entry","createdAt":"2019-09-19T07:36:03.658Z","updatedAt":"2019-09-19T07:36:03.658Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Topcoder-Centric","trackParent":"Competitive Programming"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"4My0rKOezFdx2dvkw6b63Z","type":"Entry","createdAt":"2019-12-18T08:00:55.309Z","updatedAt":"2019-12-18T08:00:55.309Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"person"}},"locale":"en-US"},"fields":{"name":"Anurag Sharma","tcHandle":"anu0012"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"4QMPoJGwHV7PhqbfMcbHqd","type":"Entry","createdAt":"2019-09-19T07:52:51.637Z","updatedAt":"2019-09-19T07:52:51.637Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Topcoder-Centric","trackParent":"Data Science"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"4YrnLM62ZzGvx15nyTM1Yz","type":"Entry","createdAt":"2022-09-16T11:23:53.784Z","updatedAt":"2022-09-16T11:23:53.784Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"person"}},"locale":"en-US"},"fields":{"name":"Alhassan Kiwamdeen","tcHandle":"kiwams"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5WJgLnmZ1ivaZwpbhqmQcD","type":"Entry","createdAt":"2020-08-31T18:17:01.967Z","updatedAt":"2022-04-16T10:09:46.936Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":37,"revision":13,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"Questions To Ask To Get The Gig","slug":"questions-to-ask-to-get-the-gig","type":"Article","trackCategory":["Gig Work"],"contentCategory":[{"sys":{"type":"Link","linkType":"Entry","id":"4NginLfmkkwHs5ZSGXI9Qt"}}],"tags":["Self-Improvement"],"creationDate":"2020-08-31","readTime":"8 min","content":"![Questions-Gig Work Infographic](//images.ctfassets.net/piwi0eufbb2g/7l3QxCez8wJCy2LbrarWfB/9cb31a881c7a1fe6f8be9d1f748afcfc/Questions-Gig_Work_Infographic.png)","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"1p5SPbKkb5copVcMWjFCOO","type":"Asset","createdAt":"2020-08-31T18:15:02.663Z","updatedAt":"2020-08-31T18:15:02.663Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"Getting The Gig - Thrive","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/1p5SPbKkb5copVcMWjFCOO/b7f08624aec982f7dc2e3e02193ebfd2/Getting_The_Gig_-_Thrive.png","details":{"size":309498,"image":{"width":1024,"height":586}},"fileName":"Getting The Gig - Thrive.png","contentType":"image/png"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"4t9tk68FsQY2xMdLmqMMBg"}}],"upvotes":8,"downvotes":0}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5hSMpw9QA7W62VqgaiJVAo","type":"Entry","createdAt":"2022-09-14T06:49:08.388Z","updatedAt":"2022-09-14T06:49:08.388Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":32,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"A guide to become a React Developer","slug":"a-guide-to-become-a-react-developer","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"6min","content":"To begin utilizing the React developer tools, it must be installed as a browser extension. Chrome, Firefox, and Edge are currently supported by the plugin. Once you've installed developer tools,  you can put them to use. To install the plugins on Chrome, Firefox or Edge, click on these links respectively: \n\n- [https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)\n- [https://addons.mozilla.org/en-US/firefox/addon/react-devtools/](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)\n- [https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)\n\nThe next step is to launch the React dev tools. To activate the extension right-click anywhere in the browser window and click on inspect. You may also access it by hitting F12. This will launch the browser developer tools with all of the standard tabs such as elements, console, and so on.\n\nWhen you install the React dev tools extension, you will now have access to two new tabs: components (these are used to investigate the component tree) and profiler (a tool for measuring performance).\n\n__Components:__ The components tab's main objective is to show the architecture of the React application. The architecture depicts how all of the components are nested. In addition, we obtain other essential information on the component. For example:  state, props, context, functions, etc. \n\nThe most basic  way to find components is to utilize the arrow in the upper left corner. Then, simply point and click on the component to be inspected. Another way is to search for the component we're looking for using the  built-in search bar to discover and highlight components. This is especially useful if we have a deeply nested component tree. The components and elements tabs interact with one another. If we choose any component from the components tab, it will also be selected in the elements tab, and vice versa.\n\nThe majority of the time, we want to see what's going on inside our components. We can see a significant amount of useful data about the component using React developer tools. In addition, we can watch how the information changes as we interact with the program. This also works in the other direction. This implies we can alter state without interacting with the user interface. We delete items by directly altering the component state in the developer tools.\n\nThe components tab is linked to the console. Once we've decided on a component, we can go to console and enter $r. It will display all of the information on the components tab. We can now communicate with the component via our favorite console. Furthermore, we may call functions that the component has access to.  Alternatively, within the components tab, you may access and alter a component's state and properties. From the right side, click and edit the props and state. To see state, you must first initialize the component with some state from your files.\n\nThe React developer tools make it simple to analyze source code in the browser window, preventing developers from repeatedly jumping between the coding editor and the browser. All the developers have to do is to choose the component and then click the < >. This will open the associated file, allowing developers to examine the problem with the code.\n\nIf we use create-react-app or Next.js, we receive this feature by default. If you can't view your component's original code, you'll need to add babel-plugin-transform-react-jsx-source to your webpack setup.\nWe can simply monitor how our application behaves using these tools and address concerns as they arise. When the application is stable and free of bugs. it's time to boost its performance. Profiler can help us with that.\n\nProfiler gives us the duration it takes for each component of our program to be  rendered. We can determine which component is causing our application to lag and subsequently improve its performance. It also indicates whether or not the component was rerendered and what triggered the rendering. It's worth examining to see if there are any superfluous re-renders in our app. And if there are, we can almost certainly optimize them, increasing the speed of our React website.\n\n### What does a React developer do?\nA React developer produces JavaScript-based apps for web or mobile platforms. React developers usually focus on front-end development. React developers are in charge of UI components including icons, pictures, and gesture-based functionality like swiping, long-pressing, and drag-and-drop. A React developer is responsible for converting wireframes (screen blueprints) into code. They also use and create CSS selectors and HTML tags. React developers are responsible for cross-platform functionality in addition to designing and developing new features. They guarantee that the program runs smoothly on many browsers and devices. Being active in all stages of interface development necessitates React developers testing the apps on which they work. React developers work with the customer to better understand how to realize their app concept through software development and consult with back-end engineers and developers to ensure error-free collaborative user-facing and server-side interactions.\n\n### Why React developers love Node\nThe majority of React examples and projects available on the web are built with Node. As a result, React developers love to use Node because it is easy to find support. Also, Node is JavaScript, which React developers are already familiar with. They do not need to learn any more languages. Using the same language enables for full code sharing across server-side and client-side code. React developers stop talking server-side and client-side because on both sides, nothing except JavaScript is utilized. Node.js uses a single threaded architecture in conjunction with event looping to produce a highly scalable server, as opposed to traditional servers such as the Apache HTTP server, which employs restricted threads to handle a huge number of requests. Because there are almost no methods in Node.js that directly do I/O, this single threaded approach also hinders the server from responding in a non-blocking way. Furthermore, because Node.js apps output data in bulk, they do not suffer from buffering.\n\nMost significantly, your React front-end code can be run in a Node environment. This is the simplest way to implement server-side rendering and Universal/Isomorphic applications.\n\nReact developers love Node.js because it is an excellent choice for developers who want to get their apps into production as quickly as possible. It's also popular because it's simple to learn and offers an excellent ecosystem with ready-made modules.\nAnother reason is that ReactJS on the client side communicates with NodeJS on the server using API requests (for example, REST and/or GraphQL). Any other language/platform, however, may create an API server that works just as well. NodeJS has the benefit of allowing you to use the same language (e.g. ES6/7 JavaScript) and development and build tools (e.g. eslint, babel, webpack) for both client and server development.\n\n### Can we use React Native for Web development?\nDevelopers can use React Native for Web to create a single React Native application that runs natively on Android and iOS as well as in a web browser using standard web technologies. The fact is that the basis of a mobile app differs significantly from that of a web app. React, for example, constructs its layout using basic HTML5 elements such as div and span, whereas React Native employs custom UI APIs such as view and text. Because of this distinction, few technologies allow developing apps for both web and mobile. React Native for Web attempts to fill this need. It is designed to aid in the development of genuinely cross-platform apps utilizing a single React Native codebase.\n\nReact Native for Web implements browser-compatible React Native components. If a `<View>` is used to render views in React Native mobile, a browser-compatible version of this `<view>` is provided in React Native for Web, which includes a function for compiling this view down to a web `<div>`.\n\n  This brings up an important point: not all native components can be rendered browser-compatible. Some mobile-oriented components make use of mobile hardware APIs that a web browser cannot directly access.\nThis implies that React Native for Web cannot be used to entirely transfer a program to its web version. But we can still transmit a significant portion of it, which is usually adequate.  React Native for Web follows React Native's CSS-in-JS approach, guaranteeing that the same set of styles works well on both mobile and web.\n\n### How to be a good React developer\nTo be a good React developer, you have to develop very essential skills in React development: Use and create semantic HTML tags and write CSS selectors. Apply a CSS reset. Know the box model and how to return to the border-box mode. Recognize flexbox. Operate with and apply responsive web concepts, such as correct media query use. \n\nYou never truly touch HTML in React. You work with JSX, a syntactic extension that is one of the most impressive components of the React ecosystem. Because JSX appears so similar to HTML, you may think of it as HTML-flavored JavaScript. What's wonderful about JSX is that if you understand HTML and CSS, you can work with it naturally.\n\nYou can't enjoy React without a solid understanding of the fundamental concepts provided by the JavaScript language, but these ES6 skills are also required. It is vital to understand when and from where you have access to the data you require. Variables are the feature built into JavaScript that allows us to store data in memory and access it later in our apps. The React pattern indicates that your 'view is a function of your state.' That is v = f(s) in arithmetic, and it is something you should remember while you review your library foundations skills.\n\nState refers to data that we want to display to users or items in memory that we can access to allow our users to interact with our data. We keep all of the data that we show on a state object and access these bits of data through attributes on this state object. React got its name because as the state changes, the view updates (\\`v = f(s);\\`). As a result, your view 'reacts' to changes in your state object. You should review how to modify objects and change the values of their properties. Don't worry, React handles the technique with a handy method called `setState()` to make this work in your favor.\n\nGit is an essential component of any developer's arsenal for storing projects on services such as GitHub, Bitbucket, and GitLab. Skills that should be part of your daily routine include change tracking using add, commit, push, and pull, strategies for branching and merging, and dealing with merge conflicts\n\nWhile you may include React in any HTML page, there will be many more packages available that will allow you to enhance the React framework. You must be well-versed with the npm registry. This is where software developers may go to obtain software to help them make software. It may sound strange, but that is exactly what npm is: a cloud storage service for packages known as dependencies.\n\nReact includes state management. Many developers have been burnt along the road because they discovered the asynchronicity of state updates and how React manages them. Redux was created for this reason, as well as for scalability. Redux is a state management library that does a lot more. It is not a framework, but rather an opinionated approach to dealing with data. Redux's ideas are similar to functional programming and immutability, but it is not a one-size-fits-all solution. Prior to getting into Redux, it is critical to understand the fundamentals of React programming.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5qQeFHrh1febAp4AYPeiNW","type":"Asset","createdAt":"2022-09-13T16:43:57.238Z","updatedAt":"2023-09-20T16:59:26.502Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":2,"locale":"en-US"},"fields":{"title":"A guide to become a React Developer","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/5qQeFHrh1febAp4AYPeiNW/39ebd19c0a125eb462ac82bbcd9e990b/Banner_Thrive__1_.png","details":{"size":160048,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive (1).png","contentType":"image/png"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"6GfF0AO8P9MbS4C8Y17ARh"}}],"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3PkxXmLvXuh8SVwAV3kCx8","type":"Entry","createdAt":"2022-09-14T06:48:59.169Z","updatedAt":"2022-09-15T12:11:00.590Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"React Developer: Let's get started","slug":"react-developer-lets-get-started","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["ReactJS","JavaScript"],"creationDate":"2022-09-13","readTime":"10min","content":"React is a popular front-end development JavaScript library that runs on a browser and has become a choice development option amongst front-end web developers. It has robust support for UI-based designs and fully supports development across multiple platforms. \n\nA significant perk of using React comes with the very handy developer tool that makes it almost effortless to create responsive web pages while providing easy rendering. React is also very beginner-friendly, with a vibrant developer community that provides support which makes learning it even easier. It is also referred to as React.js or ReactJS.\n\n### What does a React developer do?\nA React developer designs and implements the user interface for web and mobile applications using a JavaScript-based library called React. They deal with the front end of an application and bring UI components to life with code. \n\nSome of the roles of a React developer include:\n- __Develop UI features:__ React developers are the engineers responsible for the dynamic and responsive side of the web and mobile applications that users first come in contact with. They make sure that the client side of the web and mobile applications are user-friendly and aesthetically pleasing through the use of code.\n- __Improve application functionality:__ React developers are also tasked with the responsibility of optimizing application performance by frequently creating new features and making a constant effort to ensure that the application runs smoothly on multiple devices and is compatible with various browsers.\n- __Testing software features:__ As React developers are involved in all the stages of the front-end development cycle, testing the application for bugs and debugging before and after it goes live, as the case may be, also become a duty of the React developer.\n- __Consistent collaboration:__ Working with UI designers to implement their designs as much as feasible, while consulting with the back-end engineers to ensure that the interaction between the server and client side of the application communicates without an error is another role played by a React developer. \n\n### Why React developers love Node\nNode is a JavaScript runtime environment that runs on a very optimized JavaScript engine. It enables developers to run JavaScript code outside of the browser environment and is popular among developers to create back-end applications. Node, also known as Nodejs, is a platform that can be used to run servers that host a React application. \n\n__Note:__ Other platforms can be used to host React applications, however, using Nodejs is the most common.\n\nReact and Node, both of which are JavaScript-based, can be used to build front-end/client-side and server-side applications respectively, which in turn assist in the development and deployment of fully-functional and highly performant applications while maintaining scalability.\n\nUsing both React and Node for development comes with a load of pros. Below are a few of the reasons why it is loved by React developers:\n\n- Using both React and Node complements each other for a development project. Since they are both JavaScript based, it becomes easy for a developer to easily share code between the server and client-side of the same project. This makes it easier for a developer to build faster and eliminates the need for investing in other languages or libraries for building the front-end and back-end of an application.\n- Dependencies which make it easy to develop applications can easily be installed from npm command line interface. npm serves as a package manager for Node. npm comes with Node and using Node with React applications keeps the package dependencies in check. To install packages through the npm CLI, enter the command:\n\n`npm install packagename`\n\n- Node makes it pretty easy for developers to run React directly in its environment.\n- A ton of resources are available for working with Node/Reactjs making it easy to find help when stuck.\n- Webpack, a very popular Node package, makes it easy to bundle multiple React files into a single one for seamless compilation of the JSX files. Hence, optimized rendering of the components.\n\n### How to use React developer tools\nThe React developer tool, also known as the react devtool is a browser extension for the React JavaScript library. It is fully supported in Chrome, Firefox, and Microsoft Edge.\nThis developer tool contributes to the user-friendliness of React by making it easy to determine the relationship between components and at the same time inspect the state and properties of a component and a lot of other features.\n\n__Note:__ A component in React is a reusable piece of code that breaks down complex UI into codable portions. \n\nA component that works similarly to functions in JavaScript is known as a ‘function component’. It accepts inputs known as props (properties) and returns React elements to be rendered as output. React components are simply HTML + JavaScript (HyperText Markup Language).\n\nWith continued use and familiarity, using the React developer tool becomes pretty simple.\n\n1. Installing the React developer tool browser extension is the first step.\n- __Chrome__ - The extension may be added to Chrome through the Chrome Webstore.\n- __Firefox__ - Firefox add-ons can be used to add it.\n- __Microsoft Edge__ - It may be installed via Microsoft Edge add-ons.\n\n__Note:__ React developer tools are also available in a standalone package that can be used with Safari and other React apps that are not browser-based.\n\nRun the command accordingly to install this package from npm or yarn:\n\n- `npm install -g react-devtools` // this installs the package globally;\n- `yarn global add react-devtools` // installs the package globally\nAlternatively,\n- `yarn add --dev react-devtools` // this adds the react-devtool as a project dependency instead of installing it globally.\n\n2. Once the developer tool is installed, using it comes next.\n- To open up the developer tool, right-click on the React web page and click on inspect. Alternatively, F12 or Ctrl + Shift + I also opens up the developer tool on the React web page. \n\nOn the browser’s inspection window, two new tabs appear:\n- __Components tab__ - This is useful when dealing with the inspection of components. It shows important details like the hierarchy amongst components in a React application and other information like the state and properties of components amongst others.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/Jan48vHN5ltw6iTWBwbnv/0620c5a1b5403aa9a4effef03996d9ab/React_Developer_-_Let-s_get_started_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n__Use cases__\n- __Inspection/Selection of components__ - Using the arrow on the top left corner of the React devtool is a simple way to inspect components, simply by clicking on it and clicking on the component to be selected.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/xdQboUi0E9Tk967OoZhJ4/a541a495614a6f99f971cef808eb4173/React_Developer_-_Let-s_get_started_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Inspection of source code__ - The React developer tools makes it easy to inspect the source code directly instead of switching to the code editor. To use this feature, click on the React component to inspect and click on the `<>` icon, this displays the source code in the console and helps a developer to inspect the source of an error.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YhRDx2rMQgo9kNAeXJUZj/87d8eb9bef1e11bfa56f3d61b9479291/React_Developer_-_Let-s_get_started_-_ss3.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n- __Debugging components__ - The React developer tool can also be useful when debugging components, it helps the developer access all the information available to a particular component while interacting with a component in the React developer tool.\n\n- __Profiler tab__ - This is useful when dealing with performance optimization in components. It shows how much time it takes for a component to render and in the long run helps to improve the performance of the application by helping developers make decisions on the elimination or replacement of a component that slows down the application.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4YvYUljt9KA5k5lCmj5LrP/a7fde6634fdde9c33feb9d180d2bf174/React_Developer_-_Let-s_get_started_-_ss4.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Can we use React Native for web development?\nYes. React Native for Web provides this benefit. Ordinarily, React Native is a mobile framework that enables a developer to build native applications across Android and iOS platforms. However, with React Native for Web, the ballgame changes. This versatile web development library acts as the web version for React Native and helps to bring React Native applications to the web through a single codebase. \n\nA major benefit of React Native for Web is that it leads to the rapid development of applications that are supported across multiple platforms as a result of the use of a single codebase. \n\n__Note:__ If the mobile and web application will provide similar functionality, React Native for Web becomes a very good option, saving the developer a lot of time in development. However, if the mobile and web will differ in functionality, React might seem like a plausible option. Nonetheless, the use of frameworks and libraries is largely dependent on a project’s specification and timeline, with each option presenting its pros and cons. \n\n### How to be a good React developer.\nAccording to statistics, React has become the most in-demand web framework in 2022, making the demand for React developers rise. And while the career prospect for this field is promising, it is also very competitive. To be on top of the game, developers must know their onions to remain relevant in the field. \n\nThe following tips can be useful for leveling up in the React development game:\n- __Acquiring the necessary skills__ - The necessary skills needed to thrive as a React developer include:\n\n- __Soft skills__ such as problem-solving skills and excellent communication skills amongst others.\n\n- __Hard skills__ such as Having a solid ability to use React library and other frameworks pertinent to building and deploying web and mobile applications. Having a good grasp of the React developer tools to debug and inspect components in an application. Being very familiar with front-end development technologies such as HTML, CSS, and JavaScript itself. Knowing how to use the CLI, GitHub, or other code repositories.\n\n- __Build a portfolio of work__ - Working on projects that showcase React development skills is a great way to practice. Constant practice, in the long run, helps a React developer to become better. In addition, a very strong portfolio of work increases the chances of a developer getting hired when applying to jobs.\n\n- __Gain work experience__ - This could be through volunteer, freelancing, or internship exposure. These are great places to put acquired skills to work in a real-time environment. New skills, techniques as well as industry standards that might be helpful in future jobs could be learned as well. \n\n- __Attend tech events__ - Tech events such as seminars, conferences, hackathons, and everything in between create a great atmosphere to learn the latest trends in tech, update features to a library or framework while networking with peers in the industry and help a developer get better by providing an update to their knowledge base.\n\n- __Teach others__ - Teaching is another fantastic way to get better at a web development framework or library. Sharing solutions or ideas to challenges related to web and mobile application development helps a developer to reinforce what they already know, thereby becoming a master at it.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2RmQNaqeMaNlQ5JUJ0l73S","type":"Asset","createdAt":"2022-09-13T16:25:55.460Z","updatedAt":"2022-09-13T16:25:55.460Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"React Developer- Let-s get started","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/2RmQNaqeMaNlQ5JUJ0l73S/efbfdd7e8ba9887570e6632f16db251d/React_Developer-_Let-s_get_started.jpeg","details":{"size":34438,"image":{"width":500,"height":500}},"fileName":"React Developer- Let-s get started.jpeg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"7HIyZkudVKIQdeECSNzSuA"}}],"upvotes":1,"downvotes":0,"recommended":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5U3eSvS9cwc4WWxhoMzhNE","type":"Entry","createdAt":"2022-08-25T00:31:41.676Z","updatedAt":"2022-09-09T08:11:18.541Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":68,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","slug":"how-to-set-up-and-implement-material-ui-with-react-js","type":"Article","trackCategory":["Development"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5XNV8gKk9DbppF4W0TPY76","type":"Entry","createdAt":"2019-08-27T06:08:26.689Z","updatedAt":"2021-09-02T10:58:56.367Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Front-End Development","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2eDAdwu27lVDlelkLei6HA","type":"Entry","createdAt":"2020-02-19T00:33:39.963Z","updatedAt":"2020-02-19T00:33:39.963Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":11,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"How-To","trackParent":"Development","description":"Correct Version"}}],"tags":["JavaScript","ReactJS"],"creationDate":"2022-08-24","readTime":"7min","content":"React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.\n\nIn this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.\n\n### Prerequisites\n- Ensure you have Node.js installed to be able to run your React application.\n- Ensure you have basic level knowledge of working with the React.js framework.\n\n### Set the React Application\nFirst, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.\n\nFirst, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:\n\n`npx create-react-app react-with-material-ui`\n\nYou can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this [guide](https://create-react-app.dev/docs/getting-started/) for more insights.\n\nOnce the above command is executed and the React application is created, access the newly created directory:\n\n`cd react-with-material-ui`\n\nThen run this command to test if the created app is working correctly.\n\n`npm start`\n\nTest the application on the browser using the localhost URL:\n\n`http://localhost:3000/`\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/2thY2884e8McjvjwR1fAGM/be1632492e95132f0615b29ba2b76b3f/How_to_set_up_and_Implement_Material_UI_with_React_-_ss1.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\n### Installing Material-UI\nTo shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:\n`npm install @mui/material @emotion/react @emotion/styled`\n\nIf you open your project `package.json` file, MUI dependencies will be available for you.\n\n`\"@emotion/react\": \"^11.9.3\",`\n`\"@emotion/styled\": \"^11.9.3\",`\n`\"@mui/material\": \"^5.8.4\",`\n\nNow create a React component using MUI\n\n### Using Material-UI with React\nLet’s look at an example that shows how to create a React component with MUI.\n\nGo ahead and create a `components` folder inside the `src` directory of your React project. Inside the `components` folder, create a `form.js`. Then follow these steps:\n\nThere are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this [guide](https://mui.com/components/) to learn more. Each of these elements can be used in your React application.\nIn this example, we will create a basic form that shows these elements in React.\n\nTo use MUI, first import the elements you want to use in your `form.js` file:\n\n```js\nimport { TextField, Button, Typography, Box } from '@mui/material';\nimport React, { useState } from 'react';\n```\n\nCreate a state for an email and password as follows:\n\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n}\n```\n\nNow to use MUI, add return as follows:\n```js\nexport default function FormData() {\n   const [email, setEmail] = useState('');\n   const [password, setPassword] = useState('');\n   return ()\n}\n```\n\nAll the MUI elements will be executed inside return. If you are using the class components this would be `render` instead of `return`.\nLet’s now use MUI elements. This form will be wrapped within a box layout.\n\n```jsx\n<Box\n   sx={{\n     display: 'flex',\n     flexDirection: 'column',\n     '& .MuiButton-root': { width: '15ch' },\n     '& .MuiTextField-root': { width: '50ch' }\n   }}\n> \n</Box>\n```\n\nIn this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.\nGo ahead and add these elements inside the box layout:\n- MUI Typography:\n```jsx\n<div>\n   <Typography sx={{ mt: 3 }} align='center' color='primary' variant=\"h5\">Please Login to your Account!</Typography>\n</div>\n```\n\n- An email TextField:\n```jsx\n<div>\n   <TextField\n     onChange={(event) => setEmail(event.target.value)}\n     value={email}\n     id='email'\n     label='Email'\n     type='email'\n     variant='outlined'\n     margin='normal'\n     required\n     fullWidth\n     align='center'>\n   </TextField>\n</div>\n```\n- A password TextField:\n```jsx\n<div>\n   <TextField\n     onBlur={(event) => (event)}\n     value={password}\n     onChange={(event) => setPassword(event.target.value)}\n     name='password'\n     id='password'\n     label='Password'\n     type='password'\n     variant='outlined'\n     margin='normal'\n     align='center'\n     fullWidth\n     required>\n   </TextField>\n</div>\n```\n\n- MUI Button:\n```jsx\n<div>\n   <Button\n     type='submit'\n     align='center'\n     variant='contained'\n     color='primary'\n     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn\n   </Button>\n</div>\n```\n\nFinally, you have this simplistic MUI React form.\n\n<picture><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp\" type=\"image/webp\" media=\"(min-width: 769px)\" /><source srcset=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png?fm=webp&w=768\" type=\"image/webp\" media=\"(max-width: 768px)\" /><img src=\"//images.ctfassets.net/piwi0eufbb2g/4pmXBJ0M9JwTCXixWDEjMg/83cda266a9813f5223777a319aef62ea/How_to_set_up_and_Implement_Material_UI_with_React_-_ss2.png\" alt=\"image\" loading=\"lazy\" /></picture>\n\nAnd of course, you can go ahead and add more elements based on the component you want to design.\n","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"2Sp9m6GVboExtjXPfmLLPL"}}],"upvotes":2,"downvotes":0,"recommended":[{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}},{"sys":{"type":"Link","linkType":"Entry","id":"6eUQYA6spJSu7lhffJY49J"}},{"sys":{"type":"Link","linkType":"Entry","id":"7rGEa6JQvntGdJOngVsHcG"}}],"openExternalLinksInNewTab":true}},{"sys":{"type":"Link","linkType":"Entry","id":"1afUuuZVt1JI14iRkAIqba"}}],"openExternalLinksInNewTab":true}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"6h68uRV5ITaI1PZFv3kO37","type":"Entry","createdAt":"2020-05-21T19:16:28.691Z","updatedAt":"2020-05-21T19:16:28.691Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Miscellaneous","trackParent":"Topcoder"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"Caw9t2fdYN3diW6ITAg20","type":"Entry","createdAt":"2019-08-27T06:08:56.519Z","updatedAt":"2019-08-27T06:08:56.519Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Miscellaneous","trackParent":"Development"}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"aiNgKJ0eML1w5qUl2oa79","type":"Entry","createdAt":"2021-08-23T10:03:14.050Z","updatedAt":"2024-09-22T14:45:37.293Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":463,"revision":131,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"All about Topcoder Challenges, Tasks and Gig Work Opportunities","slug":"all-about-topcoder-challenges-tasks-and-gig-work-opportunities","type":"Video","trackCategory":["Topcoder"],"contentCategory":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"28L4kciHjkRx94fjXxY0eL","type":"Entry","createdAt":"2021-01-26T05:44:18.746Z","updatedAt":"2021-01-26T05:44:18.746Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":2,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"contentCategory"}},"locale":"en-US"},"fields":{"name":"Community","trackParent":"Topcoder"}}],"tags":["Help Article","Community","FAQs"],"creationDate":"2021-08-23","readTime":"13min","content":"\n- <AnchorLink href=\"#1\">What is a Topcoder Challenge?</AnchorLink>\n- <AnchorLink href=\"#2\">What is an SRM (Algorithm Challenge)</AnchorLink>\n- <AnchorLink href=\"#3\">What is a Development Challenge</AnchorLink>\n  - <AnchorLink href=\"#4\">What are RDMs</AnchorLink>\n  - <AnchorLink href=\"#12\">What are Skill Builder Competitions</AnchorLink>\n- <AnchorLink href=\"#41\">What is a First2Finish challenge</AnchorLink>\n- <AnchorLink href=\"#5\">What is a Design Challenge</AnchorLink>\n  - <AnchorLink href=\"#6\">What is LUX/RUX</AnchorLink>\n- <AnchorLink href=\"#7\">What is a QA challenge</AnchorLink>\n- <AnchorLink href=\"#8\">What is a Data Science Challenge</AnchorLink>\n  - <AnchorLink href=\"#9\">What is a Marathon Match</AnchorLink>\n- <AnchorLink href=\"#10\">What is Gig Work</AnchorLink>\n- <AnchorLink href=\"#11\">What is a Task</AnchorLink>\n<a id=\"1\"></a>\n### What is a Topcoder Challenge?\n\nTopcoder is a competition-based community at its heart. Let's go through the main kinds of challenges available at Topcoder. The common features of each challenge type are a strict timeline consisting of multiple phases and a score-based ranking system for competitors, based on their competition history.\n\n<a id=\"2\"></a>\n#### What is an SRM (Algorithm Challenge)\n\nSingle-round matches (SRM) are the oldest kind of challenge available at Topcoder. They are algorithm competitions, usually consisting of three problems (easy, medium and hard), that are solved by the contestants in a short time (often 75 minutes). A Rookie SRM is a variant of these competitions aimed at newer members. They have the exact same match structure, but the problems are easier and more approachable to people with less experience in algorithm competitions.\n\nA contest consists of a \n\n- **Registration Phase** - 24 Hours\n- **Coding Phase** - 75 mins\n- **Intermission Phase** - 5 mins\n- **Challenge Phase** \\- 15 mins\n- **System Tests**, which conclude the round. \n\nThe coding phase is the problem-solving part, during which the contestants write their code to solve the given problems. Competitors are divided into \"rooms\", consisting of twenty competitors each. \n\nDuring the challenge phase, the participants are given access to the code submitted by other competitors in the same room, and have the chance to \"challenge\" this code. A challenge consists of finding a test case for which the submitted code fails or gives a wrong answer. A successful challenge removes all preliminary points from that submission and grants the successful challenger +50 points. A failed challenge costs 25 points.\n\nAfter the challenge phase the system test phase begins, during which every submission is thoroughly tested for correctness. Failed submissions lose their score for that problem. Soon after the system test phase is finished ratings are updated.\n\nSee:\n\n[How to compete in SRMs](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20SRMs)\n\n[General Topcoder Arena Usage Guide](https://www.topcoder.com/thrive/articles/How%20to%20Compete%20in%20SRM%20Algorithm%20Competitions)\n\n[How to compete in SRMs:Extras and FAQs](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20SRMs:%20Extras%20and%20FAQs)\n\n<a id=\"3\"></a>\n#### What is a Development Challenge\n\nDevelopment challenges usually run between a few days or one to two weeks. The task is usually to complete a piece of functionality in a software product or to create one from scratch.\n\nDevelopment Track at Topcoder consists of three types of challenges: \n\n-   First2Finish (F2F) challenges - First2Finish are quick challenges in which competitors are asked to fix bugs or do a small task. The challenge is open until the project manager or copilot running the challenge has a winning submission.\n\n-   Code Challenges - Code challenges ask you to develop code for apps, services, etc. Final fixes, which are sometimes required after a typical challenge, are not included in these types of challenges.  \n\n-   Ideation challenges - Ideation Challenges ask you to research and ideate a solution on the problem statement presented to you. \n\nThe most popular challenge type in the development track is the code challenge. The technologies are varied, ranging from AngularJS, Node.js, Java, iOS, Android, Python, and several others. \n\nIn a code challenge, you will develop code for apps, services, etc. You must ensure your submission addresses all the requirements mentioned in the challenge specification. You also need to ensure your code is modularized, clean and well documented, and you need to provide clean documentation for deployment and verification.\n\nSee: \n\n[How to compete in Development Challenges?](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20In%20Development)\n\n<a id=\"4\"></a>\n##### What are RDMs\n\nRapid development matches (RDMs) are quick, fast-paced ranked development challenges, where you have to develop an application strictly according to specification. Speed is of importance since the matches are rated. They usually last for one hour. They represent a great way to test and to improve your development skills. An RDM is structured similarly to an SRM algorithm match, there are three problems: easy, medium and hard. The competitors' submissions will be tested against an automatic tester that can provide instant feedback on the submissions.\n\nSee:\n\n[RDMs](https://www.topcoder.com/thrive/articles/rdm-competition-faqs-and-rules)\n\n<a id=\"12\"></a>\n##### What are Skill Builder Competitions\nSkill Builders Competitions are competitions meant to help you build proficiency in a certain technology or product. A Topcoder Skill Builder challenge consists of three consecutive problems: Easy, Medium and Hard. Each problem is usually related, such that they build on each other. There will be a separate leaderboard for a Skill Builder challenge that keeps track of points across all three problems. A Skill Builder challenge usually runs for an extended period of time, such as a month. During the first run of a challenge, there are usually prizes and swag as well, these are generally given to the first submissions that pass review. Skill Builder challenges are ranked, and grant verified skill badges for your Topcoder profile.\n\nSee:\n\n[Topcoder Skill Builder Competitions](https://www.topcoder.com/thrive/articles/topcoder-skill-builder-competitions)\n\n<a id=\"41\"></a>\n#### What is a First2Finish challenge\nA F2F (First2Finish) match is a kind of development or design challenge where, as the name implies, the winner is determined as the competitor with the first submission to pass the minimum requirements for the challenge. Due to the nature of the challenge, review is performed during the Submission Phase of the match as the submissions keep coming it. Once a passing submission is found, the winner is determined and the match ends. These challenges are usually reasonably small in scale, such as bug fixes or configuration work. Speed is of the essence here, so keep your eyes peeled on that [Challenge listing](https://www.topcoder.com/challenges?tracks[Dev]=true&types[]=F2F)!\n\n<a id=\"5\"></a>\n#### What is a Design Challenge\n\nTopcoder Design Challenges provide coverage for a full range of design needs, from responsive and mobile application user experience to marketing collateral creation and support. To be specific, there are seven types of design challenges that we offer in the Design track.\n\n-   Application Front End Design\n-   Web Design\n-   Widget or Mobile Screen Design\n-   Wireframes\n-   Print/Presentation\n-   Design First2Finish\n-   Idea Generation\n\nYou must ensure your design submission addresses all the requirements mentioned in the challenge specification, and ensure your design follows the best practice for the specific interface or devices. \n\nSee: \n\n[How to compete in Design Challenges?](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20Design)\n\n<a id=\"6\"></a>\n##### What is LUX/RUX\n\nThe Live User Experience (LUX) is a fast challenge that runs for 48 hours and has a number of big prizes. The LUX challenge takes place during a live event with Topcoder and a customer. The Rapid User Experience (RUX) is similar to a LUX but it runs for 72 hours and awards 5 big prizes. Both challenges run fast and are only a one round challenge.\n\nLUX & RUX challenges provide designers with the opportunity to show digital leaders from some of the largest companies in the world, just how good they are at creating concepts, User Experience (UX) Design, and User Interface (UI) Design. They are fast, fun, and designers have more chances to earn prize money! We even have leaderboards for these!\n\nSee:\n\n[A guide for creating Topcoder LUX RUX presentations](https://www.topcoder.com/blog/a-guide-for-creating-topcoder-lux-rux-presentations/)\n\n<a id=\"7\"></a>\n#### What is a QA challenge\n\nQuality assurance (QA) track competitions call for competitors to participate in organized QA testing of a piece of software. Technical background is not necessarily required, but experience plays an important part in gaining a good score and rating. \n\nThe QA Track, consists of four types of challenges: \n\n-   Unstructured Testing: In these types of challenges you are asked to test without predefined test cases, also known as Bug Hunt.\n\n-   Structured Testing: In these types of challenges you are asked to execute predefined test cases step by step and check if test results are correct\n\n-   Structured Test Case Writing: In these types of challenges you are asked to write test cases based on prototypes and functional requirement specifications.\n\n-   Automated Testing: In these types of challenges you are asked to use automation tools to execute test cases.\n\nThe most popular challenge type in the QA track is Bug Hunt. Here you are asked to report bugs including the steps to reproduce and the type of bug you found. While competing with others, you are paid for each verified bug and can also receive extra prize money for finding the most number of bugs. \n\nSee:\n\n[What is QA?](https://www.topcoder.com/thrive/articles/What%20is%20QA)\n\n[How to Compete in Testing Competitions](https://www.topcoder.com/thrive/articles/How%20to%20Compete%20in%20Testing%20Competitions)\n\n[What is a Bug Hunt?](https://www.topcoder.com/thrive/articles/What%20is%20a%20Bug%20Hunt)\n\n[How To Compete in a Bug Hunt Challenge](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Bug%20Hunt%20Challenge)\n\n<a id=\"8\"></a>\n#### What is a Data Science Challenge\n\nA data science challenge is a special kind of challenge for problems related to machine learning, data science, mathematics and statistics. They are typically longer in duration, usually at least a week, and often up to a month or more. The contestants are tasked with developing a data science solution that matches the given problem area and data as closely as possible. Some example cases might be the development of an image classification model, or to forecast data based on historical data points.\n\nSee:\n\n[Data Science Challenge Types](https://www.topcoder.com/thrive/articles/Data-Science-Challenge-Types)\n\n[Practical Skills Needed to Win Data Science Competitions](https://www.topcoder.com/thrive/articles/Practical%20Skills%20Needed%20to%20Win%20Data%20Science%20Competitions)\n\n<a id=\"9\"></a>\n##### What is a Marathon Match\n\nA marathon match is another old competition type at Topcoder. Marathon Matches are challenges where your submission is automatically scored according to the scoring details mentioned in the match specification.\n\nThey are longer than SRM matches, usually lasting one week. They consist of one difficult problem that may not have a single correct solution, but rather something where optimization must be used to create a solution that performs better than the competition. A problem may consist of a board game simulation that must be solved as efficiently as possible, or a machine learning-related task, such as classification.\n\nThese matches are mainly divided into two categories: \n\n-   **Algorithm Optimization Matches** \\- These matches are hosted by Topcoder for practice and fun. The problems are usually NP-Hard, so no optimal solution is known. The matches usually run for one week, in which you write a program to score as well as possible against the problem's scoring system. They are generally named as Marathon Match followed by a sequence number. Example: [Marathon Match 118](https://www.topcoder.com/challenges/70402b3e-fb5b-4d3d-9277-20c1fa512806)\n\n-   **Machine Learning / Data Analytics / Image Processing / Predictive Analytics etc** - These matches are designed with the help of our customers. They involve tasks with real-world applications and datasets. Example: [CDC Text Classification - Marathon Match](https://www.topcoder.com/challenges/30103825)\n\nSee:\n\n[How to compete in a Marathon Match](https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Marathon%20Match)\n\n[Curated Marathon Matches Guide](https://www.topcoder.com/blog/complete-guide-topcoder-marathon-matches-curated-just/)\n\n<a id=\"10\"></a>\n### What is Gig Work\n\nGig work is the latest addition to the numerous ways you can challenge yourself and earn money on Topcoder. Gig work is contract work for a fixed duration in a specific role for a client. You can apply to these freelance positions from the gig work page LINK, and if your skills are a match for the role, you will be contacted for an interview. Gig work provides you a way to earn a safe, fixed income for a duration. Gigs usually last at least one month and often longer. Your Topcoder profile will be valuable in proving your skills for a successful gig application.\n\nSee: \n\n[Gig Work at Topcoder](https://www.topcoder.com/thrive/articles/gig-work-at-topcoder)\n\n<a id=\"11\"></a>\n### What is a Task\n\nA private task is a special challenge given to only a single person. This person is usually the winner of a competition or a series of competitions. Through the task, they are given a special appointment to add extra features or to do some other extra work related to the challenges they've done. A task may also be unrelated to a specific challenge, but still target a highly qualified member with the right skills for it. To gain tasks, you should compete and place highly in competitions, and also be active on Slack, where new tasks are often posted.","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"6nCaCYxOpz6ody4U5cGIbd","type":"Asset","createdAt":"2019-09-18T22:05:07.141Z","updatedAt":"2021-09-13T03:51:41.089Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":90,"revision":14,"locale":"en-US"},"fields":{"title":"Topcoder Generic Banner","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/6nCaCYxOpz6ody4U5cGIbd/1b0d2bb3e83f8a58f2ffc9bcab941480/Banner_Thrive.png","details":{"size":160141,"image":{"width":455,"height":355}},"fileName":"Banner Thrive.png","contentType":"image/png"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"3g1nKR4UqmmAfvEfYXCIjB"}},{"sys":{"type":"Link","linkType":"Entry","id":"14TE3B3pQi9gHoiwEwT1M0"}}],"upvotes":41,"downvotes":2}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"fExfNMgkaAN9f6RE1lI5W","type":"Entry","createdAt":"2021-02-23T22:29:23.663Z","updatedAt":"2024-09-16T13:15:23.337Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":338,"revision":126,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"article"}},"locale":"en-US"},"fields":{"title":"Gig Work at Topcoder and FAQs","slug":"gig-work-at-topcoder","type":"Article","trackCategory":["Gig Work"],"contentCategory":[{"sys":{"type":"Link","linkType":"Entry","id":"4NginLfmkkwHs5ZSGXI9Qt"}}],"tags":["Gig Work"],"creationDate":"2021-02-23","readTime":"15min","content":"Gig Work at Topcoder is part of our “Talent as a Service” or TaaS offering. In cases where it makes more sense for the customer to work with defined resources rather than strictly with challenges. It is much closer to a traditional freelancing model where you and the customer work directly together instead of working through challenges. You can also say a Topcoder gig is a freelance contractor position.\n\n#### How do I get started?\n\nCompete and build up your profiles and skills! Topcoder members become eligible to work on Gig Work projects by first proving themselves in various skillsets through Topcoder competitions. Keep learning and competing to earn statistics on your Topcoder profile page that demonstrates your expertise. Once you become [rated](https://www.topcoder.com/thrive/articles/Ratings) and/or show success by either winning challenges or successfully passing review in any competition track, you are eligible to participate in Gig Work engagements. If you do not have a competition history at Topcoder, that is okay.\n\n#### Once I compete enough to become eligible, then what?\n\nBy having an in-depth profile that shows expertise in at least one area, you will be moved higher in the list as we match Gig Work members to customer requests. Our platform scans our community looking for the top members for various in-demand skill sets.If you’re competing in a track that is currently not rated (like Design), we’ll instead look at other statistics we track such as # of wins, # of passed reviews, etc.\n\n#### What type of talent are we looking for?\n\nOur customers have a broad array of needs they are looking to fill.\n\nHere are a few skills we are always looking for:\n\n-   Full Stack Developers\n\n-   Front End Developers\n\n-   Back End Developers\n\n-   Designers\n\n-   Data Engineers\n\n-   Data Scientists\n\n-   DevOps Engineers with AWS, Azure, GCP\n\n#### What should I do right now if I’m interested in Gig Work?\n\nRight now, just some basics.\n\n1.  As a part of our Topcoder community, if you are interested in working on freelancer style work with different customers and projects, visit our Gig work page and [sign up for a weekly email](https://www.topcoder.com/community/gig-subscribe). While you are doing that, take a look at our open Gigs to see if something fits your talent and experience.  \n\n2.  Make sure your [complete Topcoder profile](https://profiles.topcoder.com/) is filled out. The more complete it is, the more likely it will be that you are identified for opportunities. At a minimum, you must have the following completed on your profile:\n\n-   First/Last Name\n\n-   Address\n\n-   Birthdate\n\n-   Payment Preferences\n\n-   Bio\n\n-   Current Location\n\n-   Primary Interests\n\n-   Tracks\n\n-   Languages\n\n-   Education\n\n-   Work\n\n-   Skills\n\n-   Hobbies\n\n-   Tools\n\nFavorite Projects: Tell us what your favorite 2 or 3 projects have been that you worked on.\n\nBio: Write a quick bio that personifies you. Feel free to make it fun and show your personality, but also make sure it’s professional. This is visible to customers as they are reviewing candidates for their gig work so you want to put your best foot forward.\n\nComplete your identity verification. Instructions will be sent to you after you sign up for Topcoder gigs.\n\n#### What is the onboarding process?\n\nThis process can vary depending on the customer; however, here is a general rundown of the process once you accept a Gig Work offer:\n\n-   Offer Accepted\n\n-   Topcoder will notify our client team that the offer is accepted.\n\n-   You will receive an email from our Customer Success Team to schedule a kickoff call with the customer.\n\n-   Clients will reach out to begin company-specific onboarding (Two weeks or more).  Could include:\n\n-   Laptop\n\n-   Network Credentials and access\n\n-   Background Check (On an “As needed basis based on the client)\n\n#### Will there be training?\n\nEach client is different based on the task needed to be done. Our client and Topcoder will always be available to support you in this process.  \n\nHowever, you were selected for the skills you already possess, and the expectation is that you will be able to complete the work that you are already skilled in.\n\n#### Would I get health insurance?\n\nYou would not be provided an insurance plan when you are working on a Gig, and you would need to seek your own private insurance.\n\n#### Do we have any clients that would be interested in offering internships?\n\nNot at this time. But we recommend students spend time with Topcoder challenges to help build their resume.\n\n#### How do I get paid?\n\nYou will be paid weekly, per your offer letter from Topcoder. We have a link to more specifics on how to set that up. [Information on How do I get paid](https://www.topcoder.com/thrive/tracks?track=Topcoder&tax=Getting%20Paid).\n\n#### What support do you give your candidates while they are working in a Gig?\n\nTopcoder is a community and we always want to make sure that you feel you are a valued member of the community. We are always here to help and assist and point you in the direction of where to get your answer.\n\nWe have [Topcoder forums](http://discussions.topcoder.com), [other ways to contact us](https://www.topcoder.com/community/contact), [weekly community chats](https://us02web.zoom.us/meeting/register/tZMsdO-rrDMiHNPnEbEksD-259GbzAuTbid7) on Mondays, a [Topcoder Nation Facebook group](https://www.facebook.com/groups/topcoder.nation), and so much more! Our community team is always here to help you so please take advantage of that and all the networking opportunities we have.\n\n#### What is expected of me?\n\nAs a member of Topcoder, you will need to decide if you are willing to make the commitment to a given project and/or customer depending on how the opportunity is outlined. If you are not able to accept an assignment, there is no obligation. However, if you do accept an assignment, it is expected that you adhere to the requirements of the assignment. Most gigs will require full time hours for a certain amount of weeks. Some gigs will also require certain time zone restrictions to be adhered to.\n\n#### What do I do if I am having technical issues and need help?\n\nIf there are any technical issues that are specific to client systems, software, hardware, your client-side manager or handler is your point of contact.  If you are having trouble understanding who your point of contact is, please consult your Customer Success Manager.  \n\n#### Do I have to interact directly with the customer?\n\nYou should expect to have direct interaction with the client on these projects. In some rare cases, you may become part of an existing project team that is a blend of Topcoder members and other resources. We feel that the members that are able to present themselves well, communicate consistently and often, and are willing to participate in client meetings/standups/etc will have the most impact on these opportunities. Since every customer is different, forms of communication and collaboration will also vary.\n\nIt’s also important to note that professionalism while on a Topcoder gig really matters. Please be sure to follow proper business etiquette as you are representing Topcoder and yourself. If you are ever unsure of something, we are happy to help. Please email the gig work team at gigwork@topcoder.com.\n\n#### Why do we have gig work for members?\n\nGig Work becomes more relevant in situations where public challenges are not ideal. For example, when certain work requires developers to gain access to client environments or when the customer prefers to work in more of a one on one situation with a resource. Also, some work may be more efficient to complete in a collaborative manner rather than in a competition style. In these cases, having a group of skilled members working together with the customer’s team may be more practical.\n\n#### Are you obligated to participate in a Gig Work opportunity you are offered?\n\nNo. Even if you are in a pool, you are still a community member, not an employee so you can participate in other work at the same time. \n\nHowever, some things to consider:\n\n-   In some of these engagements, we may invest in background checks or other types of certifications. Please consider the level of commitment before signing up, or just do not sign up if you feel you do not have the skill or the time to do work. Keep in mind that many of these assignments will most likely be full-time work.\n\n-   Please consider your reputation as a community member if you pre-committed to any type of work. Informing those in charge that you will not be able to compete is better than walking away without telling anyone.\n\n-   Your performance on assignments will be tracked and will become part of your Topcoder profile. Therefore, it’s important to maintain a high level of professionalism and quality of work in order to gain more opportunities in the future.\n\n#### Why are there Identity checks and NDA’s?\n\nYou will likely be given access to the client’s secure environment for some of the gig related projects. Since this privilege is usually meant for cleared employees/contractors, any Topcoder member doing similar work will likely have to undergo an identity check and/or background check to ensure they are cleared to enter the client’s environment. Depending on the client, this can potentially be non-negotiable.\n\n#### Will I still be participating in Topcoder Challenges to do the work?\n\nNo. For these engagements, you will be assigned work directly by a customer resource.\n\n#### Can I still compete in regular Topcoder challenges if I’m doing a gig?\n\nSure! As long as it doesn’t interfere with your gig engagement we encourage all members to continue competing.\n\n#### How do I know if the customer is satisfied with me?\n\nFirst, just ask! Topcoder also performs regular outreach to customers to gain a measurement of customer satisfaction.\n\n#### What happens if the customer is disputing the work I’m delivering?\n\nIf the customer is unhappy with your work, you should first discuss it with the customer and try to find a solution. If you are unable to find a solution, contact the Success Manager that helped you with onboarding at the start of the gig. Be sure to include a full description and as many details as possible of the issue along with any supporting evidence.\n\n#### Are their criteria for being removed from an engagement?\n\nTopcoder prides itself on being fair, especially when it comes to our community. So, removing a member from an engagement would not be done without merit.  \n\nMembers may be removed for various reasons. Some of these reasons include:\n\n-   The member is no longer able to commit the agreed amount of time to the project.\n\n-   The customer is not satisfied with the work the member is delivering.\n\n-   Sometimes it’s just not a good fit. It happens.\n\n-   Client requirements have changed and the work is no longer required\n\n#### Will Copilots be involved in Gigs?\n\nNo. At this time, copilots will not be used to manage work with the Topcoder Community on gig projects. If you are a copilot and would like to work on a gig assignment, you may still do so but it would be in a non-copilot role.\n\n#### How does Payment work?\n\nOnce you receive your offer letter, you will be given instructions on how to set up payment with Topcoder.  Topcoder only uses three payment providers (Paypal, Payoneer, Western Union).  \n\nYou will be paid a fixed amount per week based on the role, your Topcoder merit-based accomplishments (i.e. [Ratings](https://www.topcoder.com/thrive/articles/Ratings), # of wins, etc.), your work experience, and the listed payment range on the Job Listing. **Note** - We are very transparent with our rates in the job listing.  If you are not comfortable with the payment range listed, do not apply for this position, as we will not negotiate above the maximum amount of a specific job listing.\n\nTopcoder pays gig workers weekly. Payments for a given week are entered into your Topcoder wallet by Tuesday of the following week. **Once payments are entered, they become available to withdraw after a 15 day hold period**.  The 15 day hold period is for some backend processing we have to go through to clear payments.  We are looking to lower this time in the future, but currently, it will stay at 15 days.  \n\nYou may see a pro-rated payment for your first and last gig payment, as well as potential days you may take leave.  For example, If you started work on a Friday, you would only get paid for ⅕ of the amount of your weekly payment, for that specific week.  \n\nBe sure your Success Manager is aware of your start date and be sure **not** to conduct any actual work unless you have confirmation that billing has commenced.\n\n#### What if I work a lot more than the expected time on an engagement?\n\nMany projects experience weeks that are busier than normal and some that are slower than normal. We set the expectation with customers that these busy and slow times should balance out over the course of the project. We also track this through a survey we send you each week. There are a few things you can do if you believe you are working more than expected.\n\n1.  Complete the survey every week. It’s a simple 2 question survey so it won’t take much time. We monitor your responses and will contact you if you are consistently reporting working more than expected.\n\n2.  Discuss timelines and scope of work with the customer to come to an understanding. \n\n3.  Contact your Success Manager if you’re not able to find a solution with the customer. Be sure to provide as much information as you can about the situation.\n\n4.  Again - complete the survey every week. Your Success Manager will be able to support you much better if you have completed the surveys consistently. \n\n#### What if I am no longer able to work on an assignment?\n\nWe understand this will happen sometimes.\n\n1.  Try to avoid the situation by understanding how your schedule matches with the customer’s schedule.  \n\n2.  Alert your Success Manager and your customer as soon as possible.  \n\n3.  We require a minimum of 1-week notice if you need to leave an assignment, but we highly recommend providing at least 2 weeks’ notice.\n\n#### Do I need to go onsite with a customer?\n\nWe’re currently not supporting onsite resources in Topcoder gigs. All work is done virtually.\n\n#### Will I still get paid if I finish the gig early?\n\nYou will get paid for the work that you complete, when a gig closes early you will be paid for the work that you do\n\n#### What is the timeline and application process for getting a gig?\n\nGig’s timeline from application to finding out if you got the Gig is about 2 weeks. This can be longer depending on the client, the project, and how many candidates are needed for the Gig. The process with be roughly as follows:\n\n1.  Apply for the Gig.\n\n2.  A Team member will review our application 24-48 hours after you submit it. We will review skills, professional experience, as well as Topcoder experience. If you are a match based on the job description you will be asked to set up a phone screen with a Gig Work Team member. \n\n3.  During your phone screen, you will be asked to verify your identity, location, availability, and that you have the skills listed in the job description. \n\n4.  We will then be sending your resume off to the client to evaluate if you’re a match for the specific project they are looking for work on. \n\n5.  If a match, Topcoder or the client will be asked to set up an interview with them. \n\n6.  If the interview is a success you will be given an offer via email.","featuredImage":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3TdAZLeLjjtJvf5Sux7sAx","type":"Asset","createdAt":"2020-01-23T08:33:47.104Z","updatedAt":"2020-01-23T08:33:47.104Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"photo-of-people-leaning-on-wooden-table-3183183","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3TdAZLeLjjtJvf5Sux7sAx/15435a836e6edea36635eee03e242034/photo-of-people-leaning-on-wooden-table-3183183.jpg","details":{"size":251590,"image":{"width":1280,"height":854}},"fileName":"photo-of-people-leaning-on-wooden-table-3183183.jpg","contentType":"image/jpeg"}}},"contentAuthor":[{"sys":{"type":"Link","linkType":"Entry","id":"4t9tk68FsQY2xMdLmqMMBg"}}],"upvotes":48,"downvotes":4}}],"Asset":[{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"13xehp2Kyjd978mQjPk2mK","type":"Asset","createdAt":"2022-09-13T16:53:42.698Z","updatedAt":"2022-09-14T06:52:14.883Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":2,"locale":"en-US"},"fields":{"title":"Want to become a ReactJs Developer? Here-s what you need to know","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/13xehp2Kyjd978mQjPk2mK/fadf465eb8afc41030cf76f5c08c1c00/Want_to_become_a_ReactJs_Developer.png","details":{"size":57946,"image":{"width":599,"height":355}},"fileName":"Want_to_become_a_ReactJs_Developer.png","contentType":"image/png"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"1p5SPbKkb5copVcMWjFCOO","type":"Asset","createdAt":"2020-08-31T18:15:02.663Z","updatedAt":"2020-08-31T18:15:02.663Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"Getting The Gig - Thrive","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/1p5SPbKkb5copVcMWjFCOO/b7f08624aec982f7dc2e3e02193ebfd2/Getting_The_Gig_-_Thrive.png","details":{"size":309498,"image":{"width":1024,"height":586}},"fileName":"Getting The Gig - Thrive.png","contentType":"image/png"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"2RmQNaqeMaNlQ5JUJ0l73S","type":"Asset","createdAt":"2022-09-13T16:25:55.460Z","updatedAt":"2022-09-13T16:25:55.460Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"React Developer- Let-s get started","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/2RmQNaqeMaNlQ5JUJ0l73S/efbfdd7e8ba9887570e6632f16db251d/React_Developer-_Let-s_get_started.jpeg","details":{"size":34438,"image":{"width":500,"height":500}},"fileName":"React Developer- Let-s get started.jpeg","contentType":"image/jpeg"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3TdAZLeLjjtJvf5Sux7sAx","type":"Asset","createdAt":"2020-01-23T08:33:47.104Z","updatedAt":"2020-01-23T08:33:47.104Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"locale":"en-US"},"fields":{"title":"photo-of-people-leaning-on-wooden-table-3183183","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3TdAZLeLjjtJvf5Sux7sAx/15435a836e6edea36635eee03e242034/photo-of-people-leaning-on-wooden-table-3183183.jpg","details":{"size":251590,"image":{"width":1280,"height":854}},"fileName":"photo-of-people-leaning-on-wooden-table-3183183.jpg","contentType":"image/jpeg"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3imV7SR3Ly1VxhRT5N6RD2","type":"Asset","createdAt":"2022-08-24T16:20:14.045Z","updatedAt":"2022-08-24T16:20:14.045Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"locale":"en-US"},"fields":{"title":"How to set up and Implement Material UI with React.js","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3imV7SR3Ly1VxhRT5N6RD2/8dec95094c196f9b37739627382953bd/How_to_set_up_and_Implement_Material_UI_with_React.js.jpg","details":{"size":61935,"image":{"width":640,"height":425}},"fileName":"How to set up and Implement Material UI with React.js.jpg","contentType":"image/jpeg"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"3u4KFOvYOsgyZqe1J7EBoq","type":"Asset","createdAt":"2020-01-09T21:31:14.833Z","updatedAt":"2023-09-10T04:07:48.728Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":2,"locale":"en-US"},"fields":{"title":"red-lights-in-line-on-black-surface-158826","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/3u4KFOvYOsgyZqe1J7EBoq/92b9be82c1204b787577948ba7e0172e/Banner_Thrive.png","details":{"size":160048,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive.png","contentType":"image/png"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"5qQeFHrh1febAp4AYPeiNW","type":"Asset","createdAt":"2022-09-13T16:43:57.238Z","updatedAt":"2023-09-20T16:59:26.502Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":2,"locale":"en-US"},"fields":{"title":"A guide to become a React Developer","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/5qQeFHrh1febAp4AYPeiNW/39ebd19c0a125eb462ac82bbcd9e990b/Banner_Thrive__1_.png","details":{"size":160048,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive (1).png","contentType":"image/png"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"6nCaCYxOpz6ody4U5cGIbd","type":"Asset","createdAt":"2019-09-18T22:05:07.141Z","updatedAt":"2021-09-13T03:51:41.089Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":90,"revision":14,"locale":"en-US"},"fields":{"title":"Topcoder Generic Banner","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/6nCaCYxOpz6ody4U5cGIbd/1b0d2bb3e83f8a58f2ffc9bcab941480/Banner_Thrive.png","details":{"size":160141,"image":{"width":455,"height":355}},"fileName":"Banner Thrive.png","contentType":"image/png"}}},{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"piwi0eufbb2g"}},"id":"7yO45g1yJfxerGOktJVufM","type":"Asset","createdAt":"2022-10-18T14:37:19.496Z","updatedAt":"2023-09-15T21:03:26.749Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":2,"locale":"en-US"},"fields":{"title":"Being a Successful Topcoder Freelancer","description":"","file":{"url":"//images.ctfassets.net/piwi0eufbb2g/7yO45g1yJfxerGOktJVufM/a283509c9e75aeb72730662fb1bc989a/Banner_Thrive.png","details":{"size":160141,"image":{"width":455,"height":355}},"fileName":"Banner_Thrive.png","contentType":"image/png"}}}]}}