Skip to content

Instantly share code, notes, and snippets.

Robin Ricard rricard

Block or report user

Report or block rricard

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View react-course-outline.md
  • React: the principles
    • Declarative UI programming: don't say how to get the UI in a given state, define what you'd like the UI to be and let React do it for you
    • f(data) -> UI is a React Component
    • Like functions components can be composed
  • Create a new React R+ project with VSCode (and the R+ extension)
  • First component: return JSX and R+ UI widgets in a function: the function is the component!
  • R+ Layout in React: use child properties and other R+ layout idioms like you would do with BML
  • Compenents can take props: parameterize our first component: map data to UI!
  • Introducing state through the useState hook: we still map data to UI!
  • Use any JS expression to model the UI output: conditional rendering with ternary operator and repeated rendering with Array.prototype.map
View TodoWithReact.jsx
function Todo({todo, onToggle}) {
return (
<li>
<input
type="checkbox"
onClick={onToggle}
checked={todo.done}
/>
{todo.done ?
<span style={{textDecoration: 'line-through'}}>{todo.title}</span> :
View TodoWithoutReact.js
function Todo({todo, key, onToggle}) {
const onToggleEvent = `__Todo_${key}_onCheckEvent`;
window[onToggleEvent] = onToggle;
return `
<li>
<input
type="checkbox"
onclick="${onToggleEvent}()"
${todo.done ? 'checked' : ''}
/>
View DescribeHero.graphql
fragment DescribeHero on Character {
name
appearsIn
isJarJar
# [eslint] Cannot query field "isJarJar" on type "Character". (graphql/template-strings)
}
View typeErrors.js
import {
HeroNameQueryVariables,
HeroNameQuery,
} from './schema';
// ...
const variables: HeroNameQueryVariables = {
episode: 'JARJAR',
};
View generateAnnotations.sh
apollo-codegen generate **/*.graphql --schema schema.json --target ts --output schema.ts
View downloadSchema.sh
apollo-codegen download http://localhost:8080/graphql --output schema.json
View schema.ts
// This file was automatically generated and should not be edited.
// The episodes in the Star Wars trilogy
export type Episode =
"NEWHOPE" | // Star Wars Episode IV: A New Hope, released in 1977.
"EMPIRE" | // Star Wars Episode V: The Empire Strikes Back, released in 1980.
"JEDI"; // Star Wars Episode VI: Return of the Jedi, released in 1983.
export interface HeroNameQueryVariables {
View serverTypeDefinitions.graphql
enum Episode {
NEWHOPE
EMPIRE
JEDI
}
type Character {
id: ID!
name: String!
friends: [Character]
View DescribeHero.graphql
fragment DescribeHero on Character {
name
appearsIn
}
You can’t perform that action at this time.