Get Started With React Credit Card
In this tutorial, we’ll learn about an interesting React npm package called react-credit-card.
• Demo
First, we create a React app with the npm command line. Open your terminal, and run npx create-react-app myapp after you create your React app. Then type the command npm start. Before you start your app, you need to go to the project directory with cd myapp, and then you run your app.
OK, now let’s move onto our react-credit-card project.
Install
npm install --save react-credit-cardsAfter you install, you need to start your app again with npm start.
SetUp
Now we create a components folder in your src directory. In this folder, we create a file and name it MyCards.js. Now our folder structure looks like this:
Open your MyCards.js file, and create a simple functional React component. Now our MyCards.js file looks like this:
OK, now we’ll import some things from our react-credit-cards package. We import two things from react-credit-cards and place our Mycards.js file at the top.
- Cards:
import Cards from "react-credit-cards" - Style sheet:
import "react-credit-cards/es/styles-compiled.css"
So far, our MyCards.js file looks this:
After we successfully import the cards and the style sheet, we move onto actually coding.
- Create a state, and define the default value as an object
- Create a form, and also create a change handler
So now our MyCards.js look like this:
After you successfully do this step, it’s time to implement our Cards component which provided our react-credit-cards package.
The card component accepts four arguments as props: CVC, expire, name, and number. This pass our value from input box to this component’s props using the state.
So far, our MyCards.js file has all of this code:
OK, now our work is done in the App.js file. We import the MyCards.js file and render. So open your App.js file in the src directory, and paste this code. This code just imports our MyCards.js components.
Styling
In App.css, just grab this code, and paste it. It’s made fun.
We completed our app now. Open terminal, and run npm start. I hope you can see your output like this:
