React
 |
React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. |
|---|---|
| wikipedia:: React (software) |
Meta
- Contra Separation of Concerns
- Since it bundles HTML, CSS & Javascript together
- Main goal is to do SPAs better by doing the V of the MVC better by doing a better version of what would be done by an HTML templating engine like mustache e.g.
- React Virtual DOM
- https://illustrated.dev/react-vdom
- Part of what makes React fast
- React’s own DOM that sits on top of the regular DOM
- When you’re doing React you are only interacting with this virtual DOM and then that DOM gets translated to the regular DOM
- React uses this to do smart/partial/differential updates to the page of state etc.
- Reconciliation
- The process of syncing up your app’s state with the real DOM
- This doesn’t help with initial page load rendering, only updates to it.
- React Developer Tools Chrome Extension
- You can view the props in a tab
- If you are using React client-side (via script tags instead of rendering it with Node on the server) I think you normally have to have it being served through a web server in order for the extension to work, so you could just start a local dev server like XAMP or MAMP and put the React files in there and load them like normal html files. Then the extension will work
- ES7 React/Redux/GraphQL/React-Native snippets Extension
- https://scotch.io/tutorials/the-best-react-extension-for-vs-code
- Supposedly the main one you should get currently
Environment
- 2 Ways of Using React
- Client-side/In-browser
- via CDN links to React files similar to Bootstrap
- Server-side Rendering
- with Node and related tools
- Create React App
- Client-side/In-browser
- React Native
Frameworks
Main
Styling
- HTML Style Block
- Just target the actual HTML DOM rendered elements via a regular ¶
<style>{=html} ¶ block - Usually not a good idea since there are better, more scalable ways
- Just target the actual HTML DOM rendered elements via a regular ¶
- JavaScript Object
- Recommended, normal way
- Put your styles in a JavaScript object and insert in your components
- CSS properties are slightly different:
- Instead of dashes you need camelCase
- Instead of the class attribute on HTML elements you need className since class is a reserved keyword in JavaScript
- JavaScript Template Literal
- What Dan figured out you could do
- You can put raw CSS in a js template literal and access it accordingly in React
- Hybrid Method Kirupa mentioned? Where you use files of components and files for style?
Components & Props
- https://reactjs.org/docs/components-and-props.html
- Think of components as functions - you compose them can instantiate/redner them and can use parameters, etc.
- Components should always be capitalized
- this.props
- this.state for managing state of the app after it is rendered. Contra this.props which is really just for rendering it at the beginning. Though it is kind of a fine line.
- this.props.greetTarget e.g. - the this.props refers to the parent element in the .render part
- this.props.children refers to anything inside that parent element, including
- There’s a one-way “chain of command” with props - they get passed in one direction and you have to pass them to each intermediate component
- You can use the spread operator … to avoid having to specify each individual prop each time
- Redux also solves some of these annoyances, e.g. being able to pass a prop directly to a component instead of having to send it all the way down the chain.
- Remember: You can put JSX anywhere, e.g. as the value of a variable
- React.Fragment
- Sort of a way to make returning arrays easier?
- Abbreviated Syntax:
- <>
- Comments
- {/* Some comments here */}
- /* Multi line comment */
- className=”someClass” //End of line comment
State & Lifecycle
- State Management (front end)
- https://reactjs.org/docs/state-and-lifecycle.html
- Redux
- https://en.wikipedia.org/wiki/Redux\_(JavaScript_library)
- It is influenced by the functional programming language Elm.
- constructor(props, context) { super
- this.state for managing state of the app after it is rendered. Contra this.props which is really just for rendering it at the beginning. Though it is kind of a fine line. So props are more for making sure that you can make reusable dynamically applied components as opposed to changing/responding/updating when the app is being used, I think.
- The key difference is that state is private and it can be changed from within the component itself. Props are external and not controlled by the component itself. It’s passed down from components higher up the hierarchy, which also control the data. A component can change its internal state directly. It can not change its props directly.
- Think of this.state as an object that you can then create and reference like you would a normal Javascript object and nest objects inside etc.
- The whole this bind thing and what that means
- Stateful components
- States hold values throughout the component and can be passed to child components through props
- Lifecycle methods
- Lifecycle methods are hooks that allow execution of code at set points during a component’s lifetime.
Events
Routing
Views
React Hooks
React Context
Inbox
- One-way data binding with props?
- Refs
- Dockerize your React app - DEV Community
Sources
React
Interactive graph
On this page
React
Meta
JSX
Environment
Frameworks
Static Site Generators (SSG)
Main
Styling
Components & Props
State & Lifecycle
Events
Routing
Views
React Hooks
React Context
Inbox
Sources