react-play
)
ReactPlay(Repo:
Learn . Create . Share about your ReactJS Development Journey
View Demo Β· Report Bug Β· Request Feature
π Introducing ReactPlay
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.
Who doesn't want motivation and support? Many Thanks to all the Stargazers who have supported this project with stars(
Please support the work by giving the repository a Sponsor
button at the top
ποΈ 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.
β¬οΈ Install Dependencies
Next, install the dependencies by running the following command in the react-play
repo:
npm install
Or
yarn install
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.
npm install --legacy-peer-deps
βοΈ Create a .env
file at the root of your project folder with the following content,
REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run/
REACT_APP_NHOST_VERSION=v1
REACT_APP_NHOST_ENDPOINT=graphql
π¦ Start the Development Mode
Use the following command to start the app in the development mode:
npm start
Or
yarn start
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.
𧱠Build the App for Production
Use the following command to build the app for production:
npm run build
Or
yarn 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:
npm run cypress:open
Or
yarn 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 ourCODE OF CONDUCT
, and the process for submitting pull requests to us.
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 !
Claim Now!
π Support
We all need support and motivation. ReactPlay
is not an exception. Please give this project a
If you found the app helpful, consider supporting us with a coffee.
βοΈ to ReactPlay is to make us more πͺ stronger and motivated.
A β¨
Contributors Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind are welcome!