Skip to content Learn
Beginner
- React Express – “all-in-one guide to modern React application development.” – 7/2019.
- Leonardo Maldonado. A Complete React Boilerplate Tutorial–From Zero to Hero. freecodecamp, 1/2019.
- Kent C. Dodds. JavaScript to Know for React. 8/2019.
- Recommends knowing Template Literals, shorthand property names, arrow functions, destructuring, parameter defaults, rest/spread, esmodules, ternaries, array methods (find, some, every, includes, map, filter, reduce), nullish coalescing operator, optional chaining, promises, async/await, and closures.
Projects
- reactsweeper – (Codesandbox) The classic Minesweeper game in React/TypeScript.
- Awesome React – Stars: 41.5k – Updated: 2/2021 – Checked: 2/2021.
Tooling
Testing
UI
Desktop
- NodeGUI – “Build performant, native and cross-platform desktop applications with native React + powerfull CSS like styling. – 3/2020.
Other
Key Concepts
JSX
Elements
Components
Props
State
- Official React Tutorial: State and Lifecycle.
- Covers
- Converting a Function to a Class (in Five Steps)
- Adding Local State to a Class (in Three Steps)
- Some Key Information
- “State is similar to props, but it is private and fully controlled by the component.”
- “The render method will be called each time an update happens, but as long as we render…into the same DOM node, only a single instance of the…class will be used.”
- “Class components should always call the base constructor with props.”
Lifecycle
- Official React Tutorial: State and Lifecycle.
- Covers
- Adding Lifecycle Methods to a Class
componentDidMount()
componentWillUnmount()
- Using State Correctly
- Do Not Modify State Directly
- State Updates May Be Asynchronous
- State Updates Are Merged
- The Data Flows Down
- Some Key Information
- “The
componentDidMount()
method runs after the component output has been render to the DOM.” - “While
this.props
is set up by React itself and this.state
has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).” - “If the…component is ever removed from the DOM, React calls the
componentWillUnmount
lifecycle method…” - “Do not modify state directly..instead use
setState()
“. - “The only place where you can assign
this.state
is the constructor.” - “State updates may be asynchronous…React may batch multiple
setState()
calls into a single update for performance.” - “Because
this.props
and this.state
may be updated asynchronously, you should not rely on their values for calculating the next state.” - “[Instead] use a second form of
setState()
that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument…” - “State updates are merged…when you call
setState()
, React merges the object you provide into the current state.” - “[Y]our state may contain several independent variables…you can update them independently with separate
setState()
calls…The merging is shallow…” (that is, it does not replace the entire State, only the specified portions of the state). - “Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn’t care whether it is defined as a function or a class…This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.”
- “A component may choose to pass its state down as props to its child components…”
- “Any state is always owned by some specific component, and any data or UI derived from that state can only affect components ‘below’ them in the tree.”
Events
- Covers
- Handling Events
- Passing Arguments to Event Handlers
- Some Key Information
- “React events are named using camelCase, rather than lowercase.”
- “With JSX you pass a function as the event handler, rather than a string.”
- “[Y]ou cannot return
false
to prevent default behavior in React. You must call preventDefault
explicitly.” - “When using React, you generally don’t need to call
addEventListener
to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.” - “When you defined a component using an ES6 class, a common pattern is for an event handler to be a method on the class.”
- “In JavaScript, class methods are not bound by default. If you forget to bind
this.handleClick
and pass it to onClick
, this
will be undefined
when the function is actually called.”this.handeClick = this.handleClick.bind(this)
- “Generally, if you refer to a method without
()
after it, such as onClick={this.handleClick}
, you should bind that method.” - Alternatively:
- (experimental) “use class fields to correctly bind callbacks”
- “use an arrow function in the callback” (not recommended)
- “Inside a loop it is common to want to pass an extra parameter to an event handler.”
- Can be accomplishing using arrow functions or
Function.prototype.bind
.
Conditional Rendering
- Covers
- Element Variables
- Inline If with Logical && Operator
- Inline If-Else with Conditional Operator
- Preventing Component from Rendering
- Key Thoughts
- “You may embed any expressions in JSX by wrapping them in curly braces.”