React Prototype Tools

react-prototype-tools.md

Tools that you might want to use in order to populate and style your React (or any other JavaScript) project.

• Fake Data - Faker
• JSON Fake Data - Json Place Holder
• CSS - Semantic UI
• Rest testing

Fake Data - Faker

Fake address, emails, avatars etc

• project:
  • https://github.com/marak/Faker.js/
• faker cdn:
  • https://cdnjs.com/libraries/Faker
• Demo
  • https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/index.html

React jsx code:

import faker from 'faker'

...
<img src={faker.image.avatar()} alt="avatar" />

JSON Fake Data - Json Place Holder

• site
  • https://jsonplaceholder.typicode.com
• fake data for
  • todos, comments, albums, posts, users etc.

In js file:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

In react component class:

import axios from 'axios'

...
async componentDidMount() {
  const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
  this.setState({ posts: response.data})
}

result:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

CSS - Semantic UI

• site
  • https://semantic-ui.com
• cdn url (example, chose from cdn)
  • https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js
• example placeholder (clickL View Source)
  • https://semantic-ui.com/elements/placeholder.html

include in html

<link
  rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>

In react:

<div className="ui container">
  <div className="ui segment">
    <div className="ui form">
      <div className="field">
        <label>Search</label>
        <input type="input" />
      </div>
    </div>
  </div>
</div>

REST API testing

• http://mockbin.com

Use an REST API for testing if your requests are working.

import unirest from 'unirest'

it('simple rest query works', async () => {
  const result = await unirest
    .get('http://mockbin.com/request')
    .headers({ 'Accept': 'application/json', 'Content-Type': 'application/json' })
    .send({ "parameter": 23, "foo": "bar" })
    .then((response) => {
      console.log(response.body)
      return response.body
    })
  console.log("result", result)
  expect(result).not.toBeNull()
})