Tools and Projects Dec 2018 Edition
2 likes297 views
This document provides information on various tools and projects, including: - JSON Server for creating a REST API from a JSON database - JSON GraphQL Server for creating a GraphQL API from JSON - react-jsonschema-form for building forms from JSON schemas in React - docz for creating documentation sites from MDX files - Additional resources like CodeSandbox, Runkit, Prisma, and Visual Studio Code are also mentioned.
![Local installation
npm install -g json-server
Create a db.json file with some data
{
"posts": [
{ "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123 },
{ "id": 2, "title": "Sic Dolor amet", "views": 65, "user_id": 456 }
],
"users": [
{ "id": 123, "name": "John Doe" },
{ "id": 456, "name": "Jane Doe" }
],
"comments": [
{ "id": 987, "post_id": 1, "body": "Consectetur adipiscing elit” },
{ "id": 995, "post_id": 1, "body": "Nam molestie pellentesque dui"}
]
}](https://image.slidesharecdn.com/tools-projects-dec-2018-181229214040/85/Tools-and-Projects-Dec-2018-Edition-8-320.jpg)
![Local installation
npm install -g json-graphql-server
Create a db.js file with some data
module.exports = {
{
"posts": [
{ "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123 },
{ "id": 2, "title": "Sic Dolor amet", "views": 65, "user_id": 456 }
],
"users": [
{ "id": 123, "name": "John Doe" },
{ "id": 456, "name": "Jane Doe" }
],
"comments": [
{ "id": 987, "post_id": 1, "body": "Consectetur adipiscing elit” },
{ "id": 995, "post_id": 1, "body": "Nam molestie pellentesque dui"}
]
}
}](https://image.slidesharecdn.com/tools-projects-dec-2018-181229214040/85/Tools-and-Projects-Dec-2018-Edition-12-320.jpg)
![Schema
# forms/todo.js
export const schema = {
title: "Todo Form",
type: "object",
required: ["title"],
properties: {
title: {type: "string", title: "Title", default: "A new task"},
done: {type: "boolean", title: "Done?", default: false}
}
};](https://image.slidesharecdn.com/tools-projects-dec-2018-181229214040/85/Tools-and-Projects-Dec-2018-Edition-16-320.jpg)
Tools and Projects Dec 2018 Edition
- 1. Tools & Projects Dec 2018 Edition by Jesus Manuel Olivas / weKnow
- 2. $ whoami Jesus Manuel Olivas jmolivas@weknowinc.com jmolivas jmolivas drupal.org/u/jmolivas jmolivas.weknowinc.com
- 3. Mexicali Mexico + California Calexico California + Mexico $ ifconfig
- 4. weAre
- 5. weKnow
- 8. Local installation npm install -g json-server Create a db.json file with some data { "posts": [ { "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123 }, { "id": 2, "title": "Sic Dolor amet", "views": 65, "user_id": 456 } ], "users": [ { "id": 123, "name": "John Doe" }, { "id": 456, "name": "Jane Doe" } ], "comments": [ { "id": 987, "post_id": 1, "body": "Consectetur adipiscing elit” }, { "id": 995, "post_id": 1, "body": "Nam molestie pellentesque dui"} ] }
- 9. Start JSON Server json-server --watch db.json Resources * http://localhost:3000/posts * http://localhost:3000/users * http://localhost:3000/comments Home * http://localhost:3000
- 10. Add records using lowDB curl -X POST "http://localhost:3000/posts" -H "accept: application/json" -H "Content-Type: application/json" -d '{ "title": "Post created from the CLI", "views":100, "user_id":123}' https://github.com/typicode/lowdb
- 12. Local installation npm install -g json-graphql-server Create a db.js file with some data module.exports = { { "posts": [ { "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123 }, { "id": 2, "title": "Sic Dolor amet", "views": 65, "user_id": 456 } ], "users": [ { "id": 123, "name": "John Doe" }, { "id": 456, "name": "Jane Doe" } ], "comments": [ { "id": 987, "post_id": 1, "body": "Consectetur adipiscing elit” }, { "id": 995, "post_id": 1, "body": "Nam molestie pellentesque dui"} ] } }
- 13. Start JSON GraphQL Server { allPosts { id title User { id name } } } json-graphql-server db.js
- 15. Create React App npx create-react-app my-app Add react-jsonschema-form dependency $ npm install react-jsonschema-form --save Add react-jsonschema-form-semanticui dependency $ npm install react-jsonschema-form-semanticui —-save
- 16. Schema # forms/todo.js export const schema = { title: "Todo Form", type: "object", required: ["title"], properties: { title: {type: "string", title: "Title", default: "A new task"}, done: {type: "boolean", title: "Done?", default: false} } };
- 17. Render using ReactJS import React, { Component } from "react"; import Form from "react-jsonschema-form"; import {schema} from ‘./forms/todo'; const log = (type) => console.log.bind(console, type); class App extends Component { render() { return ( <div className="App"> <Form schema={schema} onChange={log(“changed")} onSubmit={log(“submitted”) onError={log("errors")} /> </div> ) } } export default App;
- 18. Schema + uiSchema + formData # forms/registration.js export const schema = { title: "Todo Form", type: “object" } }; export const uiSchema = { "firstName": { "ui:autofocus": true, "ui:emptyValue": "" } } export const formData = { "firstName": "Chuck", "lastName": “Norris" }
- 19. Render using ReactJS import React,{ Component } from "react"; import Form from "react-jsonschema-form"; import {schema, formData, uiSchema} from './forms/registration'; const log = (type) => console.log.bind(console, type); class App extends Component { render() { return ( <div className="App"> <Form schema={schema} uiSchema={uiSchema} formData={formData} onChange={log(“changed")} onSubmit={log(“submitted”) onError={log("errors")} /> </div> ) } } export default App;
- 20. JSON Schema Resources > http://json-schema.org > https://mozilla-services.github.io/react-jsonschema-form > https://react.semantic-ui.com/layouts/theming > https://nilportugues.github.io/react-jsonschema-form-semanticui
- 22. Getting Started mkdir docz Add dependencies (make sure you add `docz-theme-default`) yarn add docz yarn add docz-theme-default Run it yarn docz dev
- 23. hello-world.mdx --- name: Hello world route: /hello-world --- # Hello world Hello, I'm a mdx file! > Lorem ipsum
- 24. hello-world-textarea.mdx — name: Hello textarea route: /hello-textarea --- # Hello world Hello, I'm still a mdx file, but now I have a textarea element ``` <textarea> Hello there, this is some text in a text area </textarea> ``` <textarea> Hello there, this is some text in a text area </textarea>
- 25. components/Button.mdx — name: Button menu: Components --- import { Playground, PropsTable } from 'docz' import { Button } from './Button' # Button Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. <Button>Click me</Button>
- 26. Other tools
- 27. Other tools > https://codesandbox.io > https://runkit.com > https://www.prisma.io > https://code.visualstudio.com > https://www.netlify.com
- 28. Thank you … Questions?