25:["$","title",null,{"children":"React intro | Steven Robison | Observable"}] 4c:T5ad,md `[React](https://reactjs.org/docs/getting-started.html) is the JavaScript library/framework we use to write PM UI. #### Example \`\`\` class Counter extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; } increment() { this.setState(state => ({ counter: state.counter + 1 })); } render() { return (

{this.props.title}

Count: {this.state.counter}

this.increment()}>Increase

); } } \`\`\` React gives you UI/DOM as the result of a function where the input is the app's state. The UI is broken down into small components. Each component has it's own function for rendering the UI. In React the input to this function are represented by \`\`state\`\` and \`\`props\`\` (more on this later). React uses JSX for modeling the HTML returned. It is it's own thing and not HTML. It's useful for templating as you can inline javascript using curly braces '\`\`{ }\`\`' JSX represents HTML but also our custom components. We could include our \`\`Example\`\` component above in another component (\`\`BugCounter\`\`) \`\`\` class BugCounter extends React.Component { render() { return (

); } } \`\`\` `4d:[] 48:{"id":"364fd6cd8270f5b5","slug":"react-intro","title":"React intro","thumbnail":"3fde10be5e0f17efff11fbe1146e03fb642902637faa371ecc1535a909d5ea4e","access_level":"public","create_time":"$D2020-04-06T12:20:35.393Z","update_time":"$D2020-04-08T08:01:43.488Z","view_time":null,"first_public_time":"$D2020-04-07T14:37:46.515Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"886c43393cb620b8","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":136,"publish_version":136,"role":null,"authored":false,"authors":[{"type":"individual","id":"a275b212c4a7db45","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a275b212c4a7db45","login":"sgr","name":"Steven Robison","avatar_url":"https://avatars-next.observableusercontent.com/2d5ce11d04a6ee71aa134a8fed2bb09e2a1a5e7ac016cbf6e8960e7776535e30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"36c10a92785fefc1","slug":"insyn-pm-ui-refresher","title":"InSyn PM UI Refresher 🦎 🍭","owner":{"id":"886c43393cb620b8","login":"sgr","name":"Steven Robison"}},"type":"notebook","body":{"titling":"auto","title":"React intro","cells":[{"id":0,"value":"md`# React intro`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n---\n### Components\nYou can write React components in two ways. \n\nThe first uses the \\`\\`class\\`\\` syntax seen in the example above. The main benefits are it's familiarity (if you're used to writting classes) and having the features of React baked in - e.g. In the above example you can see references to \\`\\`state\\`\\` and \\`\\`props\\`\\` which we get from extending \\`\\`React.Component\\`\\`\n\nThe second way uses JavaScript's \\`\\`function\\`\\` syntax. This is the prefered way of writting components as it's simpler and more compatible with new React functionality.\n\nAs of newer versions of React the two ways of writting components are equivalent\n\n> ##### Tip\n> We're using a lot of class based components in PM UI but this workbook will mainly use function based components as they're what we should be aspiring to \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`### Function Components\nIn order for a JavaScript function to be used as a react component it must accept a single argument for any props passed into the component (more on that later) and return some DOM (this is usally JSX but there are [alternatives](https://reactjs.org/docs/react-without-jsx.html)).\n\n#### Example\n\\`\\`\\`\n function Welcome(props) {\n return

Hello, {props.name}

;\n }\n\\`\\`\\`\n\n> ##### Tip:\n> You can [destructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators>/Destructuring_assignment#Object_destructuring) (see \"Unpacking fields from objects passed as function parameter\") the props which I personally prefer as it reduces boilerplate. We do this some places in PM UI (e.g. PartnersList.jsx)\n>\n> \\`\\`\\`\n> function Welcome({ name }) {\n> return

Hello, {name}

;\n> }\n> \\`\\`\\`\n\n---\n\nFunction style components are compatible with this Notebook and are written in the following manner:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function Welcome(props) {\n return jsx`

Hello, ${props.name}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"render(() => jsx`<${Welcome} name=\"world\" />`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`Notice the slightly different use of JSX - templates need a dollar as well as curly braces and the JSX must be notated by \"\\`\\`jsx\\` \\` \\`\\`\". This is for the purposes of this notebook only and not when we write PM UI code. Additionally note how we render the result in this notebook and then include our custom components (seen here with a '\\`\\`name\\`\\`' prop). \n\nYou can mess with the JavaScript directly in this notebook. \n\n> #### Exrecise\n> Try changing the returned JSX of the welcome component to include a picture. It will run in this notebook\n\n> \\`\\`

\\`\\`\n\n> ** Don't forget to press the run button if it doesnt update **\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md `##### Ignore the following (used to import react into this workbook)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {\n render,\n component,\n jsx,\n memo,\n forwardRef,\n React,\n ReactDOM,\n createElement,\n Children,\n createRef,\n createContext,\n lazy,\n Fragment,\n StrictMode,\n Suspense,\n cloneElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n useDebugValue,\n createPortal,\n __SECRET_SWITCHER\n} from '@j-f1/react'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null