gem-hunter
主要言語: JavaScript
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.
View Demo · Report Bug · Request Feature
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?
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(⭐). You all are amazing!!!
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.
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:
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: Copy
.env.exampleto.env.developmentand add your API keys. The.env.developmentfile is git-ignored to keep secrets secure.
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
corepack enable and hit enter.npm install --global yarnLinux
npm install --global yarnMacOS
npm install --global yarn
or
brew install yarnOr 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:
ReactPlayruns 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
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.
Use the following command to format and lint the code:
yarn run format
OR
npm run format
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
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.
Use the following command to install browser(s) binaries to test locally:
yarn install playwright
OR
npm install playwright
Use the following command to run Playwright tests:
yarn e2e
OR
npm run e2e
👀 Read more about testing in react-play
👀 Read more about playwright: https://playwright.dev/
You can deploy the app to Vercel or Netlify with a single click.
Any kind of positive contribution is welcome! Please help us to grow by contributing to the project.
If you wish to contribute, you can,
Please read
CONTRIBUTINGfor details on ourCODE OF CONDUCT, and the process for submitting pull requests to us.
🆕 New to Open Source? 💡 Follow this guide to jumpstart your Open Source journey 🚀.
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 !
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.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind are welcome!
