JumpStart – React Intro

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7

React

React is a Javascript library for UI/ frontend for web apps. (There’s also React Native for building mobile apps, which we will get to at a later date.

Why use React?

Faster renders:

DOM operations can be unwieldy and slow in pure JS. React sidesteps this problem by having a virtual DOM that uses a diffing algorithm under the hood, which updates only necessary parts of the DOM tree that have changed.

React does this by implementing a heuristic algorithm base on two assumptions:

1. Two elements of different types will produce different trees.
2. The developer can hint at which child elements may be stable across different renders with a key prop.

Modular:

React introduces components, which are reusable units of UI with content that can be modified by passing them props (short for properties). For instance, a ‘card’ or ‘modal’ component can be created once and used throughout the site. This also means that web design remains consistent throughout, and that unit tests are easier to write.

Easy to learn:

Your mileage may vary. Having little to no experience in jQuery and AJAX before this, the concepts were foreign to me. Even so, it was easy to get things started with Create React App’s boilerplate, and compared to Vue or Angular, React is NOT a framework. It also is the most popular amongst the Vue/ Angular/ React trio and has the highest user retention.

Drawbacks

Longer initial load time:

Because React loads all its component on the first load, it has a slow initial load. You don’t have to use React throughout a huge, sprawling website, and you can also do code splitting. Here’s an article on how to solve this.

Dependency on third-party libraries:

React, compared to Angular, is lightweight as it is an UI kit, but does not provide a complete solution. Therefore, devs usually rely on 3rd-party libraries for some functionalities.

For more information on the pros/ cons of React: visit here.

 

Prerequisites: JS ES6

JS fundamentals you need: https://www.robinwieruch.de/javascript-fundamentals-react-requirements/
1. JS classses
2. Arrow functions for handlers (https://frontarm.com/james-k-nelson/when-to-use-arrow-functions/)

// JavaScript ES6 arrow function
const Greeting = (props) => {
  return

{props.greeting}

; } // JavaScript ES6 arrow function without body and implicit return const Greeting = (props) =>

{props.greeting}

React function component: stateless
React class components: stateful

3. .map(), .reduce(), .filter()

class App extends Component {
  render() {
    var users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
{users.map(user =>{user.name})}
); } }

4. Ternary, && operators

You can’t use if-else in JSX, but you can use ternary and && operators :

 return (

{ showUsers ? ( {users.map(user =>{user.name})} ) : ( null ) }
{ showUsers && ({users.map(user =>{user.name})} ) }

 

Planning before diving in:
Step 1: Draw the browser DOM representation to determine components

Step 2: Draw the React components tree, decide whether you need Redux

Step 3: Code your way up the tree

Note: Hierarchy of components matters. For sibling components to share data, states and handlers should be in a parent, and the parent can’t affect child component if it already has its own state.

 

Additional Resources:

https://hackernoon.com/how-and-why-to-use-d3-with-react-d239eb1ea274

https://itnext.io/using-advanced-design-patterns-to-create-flexible-and-reusable-react-components-part-1-dd495fa1823