Abstract
Hello everyone it’s me candle. Let’s try to use Faker.js in React.
I think that there are various purposes for using Faker.js.
In many cases you will use it for testing, but this time I’d like to create a dummy react state using Faker.js.
Condition
- You have a basic react skill
- create-react-app was installed
Create new project
First of all, create a react project. Execute the below command in your favorite directory and create a new react project.
create-react-app faker-demo cd faker-demo
Installation of faker
Install faker with this coommand.
yarn add --dev faker
it’s over.
Generate dummy data with faker
Open src/App.js
and write this.
import React, { Component } from 'react' import Faker from 'faker' class App extends Component { constructor(props) { super(props) this.state = { users: [], } } componentWillMount() { for (let i = 0; i < 5; i++) { const user = { name: Faker.internet.userName(), email: Faker.internet.email(), avatar: Faker.internet.avatar(), } this.setState(prevState => ({ users: [...prevState.users, user], })) } } renderUsers(user) { return ( <div style={{ border: 'solid 1px #eee' }}> <img src={user.avatar} alt={user.name} width="50" height="50" /> <h4>Name: {user.name}</h4> <h4>Email: {user.email}</h4> </div> ) } render() { return <div>{this.state.users.map(user => this.renderUsers(user))}</div> } } export default App
The place which generates the dummy data with Faker is componentWillMount()
part.
We made users
data for five people.
The place where Faker.internet.userName ()
or Faker.internet.email ()
actually generates dummy data in Faker.
componentWillMount() { for (let i = 0; i < 5; i++) { const user = { name: Faker.internet.userName(), email: Faker.internet.email(), avatar: Faker.internet.avatar(), } this.setState(prevState => ({ users: [...prevState.users, user], })) } }
Launch the server and check the data is generated or not.
yarn run start
Yes it pretty good.
Another Faker Data
The data provided by Faker is written in “NameSpaces” of the following URL.
http://marak.github.io/faker.js/index.html
You’ll find out a necessary dummy data.
Conclusion
As a way to utilize Faker, even if you do not have an API server, you can write a code only client side using this dummy data.