/react-play

react-play is an opensource platform that helps you learn ReactJS faster with hands-on practice model. It is a collection of projects that you can use to learn ReactJS.

Primary LanguageJavaScriptMIT LicenseMIT

ReactPlay(Repo: react-play)

All Contributors

react-play

Learn . Create . Share about your ReactJS Development Journey

react-play licence react-play forks react-play stars react-play issues react-play pull-requests

View Demo Β· Report Bug Β· Request Feature

Open in Gitpod

πŸ‘‹ Introducing ReactPlay

name

react-play is an open-source web app that helps you learn ReactJS faster with a hands-on practice model. It is a collection of ReactJS projects that you can use to learn ReactJS.

Is that all? Nope. You can also create your projects and share them with the world. The best part is that the ReactJS experts will review your project code before it gets part of the ReactPlay app. Isn't that a pure WIN-WIN?

πŸ”₯ Demo

Here is the link to the app. We hope you enjoy it.

The ReactPlay app Link

Who doesn't want motivation and support? Many Thanks to all the Stargazers who have supported this project with stars(⭐). You all are amazing!!!

Stargazers repo roster for @reactplay/react-play

Please support the work by giving the repository a ⭐, contributing to it, and/or sponsoring using the Sponsor button at the top 😍. You can also follow us on Twitter @reactplayio.

πŸ—οΈ How to Set up ReactPlay for Development?

You may want to set up the react-play repo for the following reasons:

  • You want to create a new play (A play is a React project) or want to edit an existing play as a contributor. Please check the Create a Play Guide for more details. Also, please check the Contribution Guide to get started.

  • You want to contribute to the react-play repo in general. Please check the Contribution Guide to get started.

Here is a quick overview of the react-play repo setup:

🍴 Fork and Clone the Repo

First, you need to fork the react-play repo. You can do this by clicking the Fork button on the top right corner of the repo. If you are new to forking, please watch this YouTube Guide to get started.

Once forked, you can clone the repo by clicking the Clone or Download button on the top right corner of the forked repo.

Please change the directory after cloning the repository using the cd <folder-name> command.

Note: Please do not remove the .env.development file from the root folder. It contains all the environment variables required for development.

⬇️ Install Dependencies

Next, install the dependencies by running the following command in the react-play repo. we recommend using yarn but you can install using npm too

yarn install

Or

npm install

if you don't have yarn installed on your PC, follow the steps below to install it..

Windows

  1. open your command prompt as administrator.
  2. write corepack enable and hit enter.
  3. then npm install --global yarn

Linux

  1. open terminal and hit npm install --global yarn

MacOS

  1. open terminal and hit npm install --global yarn or brew install yarn

Or Download Package If you are unable to install yarn following the above-mentioned process, then you can simply download the package and install it. Visit the official website of Yarn; there you can just expand the "Alternative" section and it will ask for the version to download for Windows, Linux, or Mac. https://classic.yarnpkg.com/en/docs/install#windows-stable

Note: ReactPlay runs on React 18. However, some of our dependencies are yet to upgrade to version 18. So please use the following command when you face difficulties installing the dependencies. Also, ensure to use Node.js version >= 16.x

npm install --legacy-peer-deps

πŸ¦„ Start the Development Mode

Use the following command to start the app in the development mode:

yarn start

or if you installed dependencies using npm use below command

npm start

Note: The start script automatically invokes "linters" process. Should you need to run the app without lint the use start:nolint instead. However make sure that you run start script at least once before committing your code. Code with linter error may not be reviewed.

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

The page will reload when you make changes. You may also see any lint errors in the console.

✨ Format and lint the code

Use the following command to format and lint the code:

Format the code

yarn run format

OR

npm run format

Lint the code

to check the linting issue

yarn run lint

OR

npm run lint

to fix the linting issue

yarn run lint:fix

OR

npm run lint:fix

🧱 Build the App for Production

Use the following command to build the app for production:

yarn build

OR

npm build

It builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

πŸ§ͺ Test App Locally (E2E with Cypress)

Use the following command to run cypress locally:

yarn cypress:open

OR

npm run cypress:open

It will open the cypress dashboard, through which you need to select E2E Testing. Once you are done with the selection you will get options to choose your preferred browser in which you want to run the test.! Once you select the browser you need to click on Start E2E Testing in <SELECTED_BROWSER_NAME>. The chosen browser will pop up you can see a list of cypress tests, click on the test to start testing.!

πŸš€ Deploy

You can deploy the app to Vercel or Netlify with a single click.

🀝 Contributing to ReactPlay

Any kind of positive contribution is welcome! Please help us to grow by contributing to the project.

If you wish to contribute, you can,

  • Create a Play
  • Suggest a Feature
  • Test the app, and help it improve.
  • Improve the app, fix bugs, etc.
  • Improve documentation.
  • Create content about ReactPlay and share it with the world.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

πŸ†• New to Open Source? πŸ’‘ Follow this guide to jumpstart your Open Source journey πŸš€.

Launching reactplay Rewards

Contributed to reactplay? Here is a big thank you from our community to you. Claim your badge and showcase them with pride. Let us inspire more folks !

reactplay Badges

πŸ™ Support

We all need support and motivation. ReactPlay is not an exception. Please give this project a ⭐️ to encourage and show that you liked it. Don't forget to leave a star ⭐️ before you move away.

If you found the app helpful, consider supporting us with a coffee.


A ⭐️ to ReactPlay is to make us more πŸ’ͺ stronger and motivated.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tapas Adhikary
Tapas Adhikary

πŸ’»
Nirmal Kumar
Nirmal Kumar

πŸ’»
Murtuzaali Surti
Murtuzaali Surti

πŸ’»
Abhishek Khatri
Abhishek Khatri

πŸ’»
Abhishek Holani
Abhishek Holani

πŸ’»
Hasnain Makada
Hasnain Makada

πŸ’»
Shrilakshmi Shastry
Shrilakshmi Shastry

πŸ’»
Mohammed Taha
Mohammed Taha

πŸ’»
Dalpat Rathore
Dalpat Rathore

πŸ’»
Eray Alkış
Eray Alkış

πŸ’»
Nirban Chakraborty
Nirban Chakraborty

πŸ’»
Deepak Pundir
Deepak Pundir

πŸ’»
Vasanti Suthar
Vasanti Suthar

πŸ“–
Ahnaf Ahamed
Ahnaf Ahamed

πŸ’»
Shivam Katare
Shivam Katare

πŸ’»
Shyam Mahanta
Shyam Mahanta

πŸ’»
Koustov
Koustov

πŸ’»
Shri Om Trivedi
Shri Om Trivedi

πŸ’»
Naresh Naik
Naresh Naik

πŸ’»
Vincent Patoc
Vincent Patoc

πŸ’»
Sachin Chaurasiya
Sachin Chaurasiya

πŸ’»
Tejinder Sharma
Tejinder Sharma

πŸ’»
Ishrar G
Ishrar G

πŸ’»
Programming-School
Programming-School

πŸ’»
Valesh Gopal
Valesh Gopal

πŸ’»
Emdadul Haque
Emdadul Haque

πŸ’»
Olang Daniel
Olang Daniel

πŸ’»
Supriya M
Supriya M

πŸ’»
Saksham chandel
Saksham chandel

πŸ’»
Luca Pizzini
Luca Pizzini

πŸ’»
Shivam Bhasin
Shivam Bhasin

πŸ’»
Tejas Shekar
Tejas Shekar

πŸ’»
Anirban Pratihar
Anirban Pratihar

πŸ’»
Harsh Singh
Harsh Singh

πŸ’»
Franklin U.O. Ohaegbulam
Franklin U.O. Ohaegbulam

πŸ’»
Ammaar Aslam
Ammaar Aslam

πŸ’»
Mayukh Bhowmick
Mayukh Bhowmick

πŸ’»
Emmanuel O Eboh
Emmanuel O Eboh

πŸ’»
Shailesh Parmar
Shailesh Parmar

πŸ’»
dangvu0502
dangvu0502

πŸ’»
Ceesco
Ceesco

🎨
Hamza Ali
Hamza Ali

🎨
yash91989201
yash91989201

πŸ’»
Makdoom Shaikh
Makdoom Shaikh

πŸ’»
Muzaffar Hossain
Muzaffar Hossain

πŸ’»
Susmita Dey
Susmita Dey

πŸ’»
Sanjay Kumar
Sanjay Kumar

πŸ’»
Vinay Patil
Vinay Patil

πŸ’»
Abhilash
Abhilash

πŸ’»
Kashish Lakhara
Kashish Lakhara

πŸ’»
hiimnhan
hiimnhan

πŸ’»
Siddharth Khatri
Siddharth Khatri

πŸ’»
Emma Dawson
Emma Dawson

πŸ’»
Senali
Senali

πŸ’»
Nisha Sen
Nisha Sen

πŸ’»
Harshil Jani
Harshil Jani

πŸ’»
Oluka Isaac
Oluka Isaac

πŸ’»
NagarjunShroff
NagarjunShroff

πŸ’»
Aakash Vishwakarma
Aakash Vishwakarma

πŸ’»
Ankit Kumar
Ankit Kumar

πŸ’»
Keerthivasan D
Keerthivasan D

πŸ’»
Bhavika Tibrewal
Bhavika Tibrewal

πŸ’»
Abhi Patel
Abhi Patel

πŸ’»
Aimun Nahar
Aimun Nahar

πŸ’»
GodStarLord
GodStarLord

πŸ’»
Joe Shajan
Joe Shajan

πŸ’»
MohZaid Kapadia
MohZaid Kapadia

πŸ’»
Sam
Sam

πŸ’»
Sam
Trishna Kalita

πŸ’»
Sam
Wyarej Ali

πŸ’»
Sam
ZΓΌlal Nebin

πŸ’»
Sam
Nrshnaik

πŸ’»

This project follows the all-contributors specification. Contributions of any kind are welcome!