React

Overview

Mock app

What is React?

Design patterns

Assessment criteria

DotReact

Get the repo at

https://github.com/sarahdherr/dotreact

> git clone https://github.com/sarahdherr/dotreact
> cd DotReact
> npm install
> npm run build
> npm start

What is React?

What is React?

React is a JavaScript library created by Facebook in 2011 and first deployed in 2013 at JSConf

 

It is used by many large tech companies, including Netflix, Paypal, AirBnB and Dropbox

 

Note: React is not a full framework. It corresponds to the View in the Model-View-Controller (MVC) pattern.

 

Learn Once, Write Anywhere

Writing cross platform applications is easier with React because you don't have to learn a new framework

 

Many companies adopted React due to mobile first design

 

It is not fully "write once, run anywhere", but once you learned React writing different implementations is not bad

 

Design Patterns

Composition

React favors composition over inheritance. 

 

Making contained and specialized components over extending an existing component.

Dialog(props) =>
  <FancyBorder color="blue">
    <h1 className="dialog-title>
      {props.title}
    </h1>
    <p className="dialog-msg">
      {props.message}
    </p>
  </FancyBorder>

WelcomeDialog(props) =>
  <Dialog
    title="Welcome"
    message="We have cookies"
  />

Component-based

Components are encapsulated to manage their own state

 

Since the UI logic is separated from the JSX, you can pass rich data to child components while keeping state out of the DOM

Virtual DOM

React creates an in-memory data structure cache and computes the diff for re-rendering

 

It updates the browsers DOM efficiently

 

React only re-renders sub components that actually changed

Unidirectional Data Flow

React has data flow down to children components through props - ideally immutably

 

Properties flow down, actions flow up

class ListContainer extends React.Component {
  constructor(props : ListContainerProps) {
    super(props);
    this.state = {
      items: []
    }
  }

  componentDidMount() {
    axios.get(`url.com/{this.props.apiCall}`)
      .then((items : Array<any>) => 
        this.setState({ items }))
  }

  render() {
    return (
      <List items={this.state.items} />
    )
  }
}
const List = (props : ListProps) =>
  <div>
  {
    props.items.map(el =>
      <ListItem item={el} />)
  }
  </div>
const ListItem = (props : ListItemProps) =>
  <div>
    <h1>{ item.name }</h1>
    <p>{ item.companyName }</p>
    <Score score={ item.score } />
  </div>

Flexible

Because it is only defining the "view" of the application, it doesn't care where the data is coming from or going to

 

It is fully JavaScript, so anything that interacts with other JS libraries can interact easily with React

 

React is not very opinionated. So you can take what you want and leave the rest

Assessment Criteria

Debugging Experience

There are dev tools

Debugging

  • Devtools
  • console.log()
  • Linters
  • Typescript

Reusability

Great potential for modularity

Modularity

  • Separates the UI logic from the HTML elements
  • The components are meant to be used like legos
  • Higher order components allow you to use the same logic for any component passed in

Maintainable

If done correctly...

Maintainability

      How easy is it to add functionality?
           Once you set it up, adding functionality is quick and easy
​

      How difficult is it to add bad code?
           It is just as easy to write bad code as good code
 

      How easy is it to read the code?
           React is easy to read once you know it​
 

      How difficult is it to break something unintentionally?
           Typescript helps decrease accidentally breaking something

Type Safety

Typescript!

Typescript

A library that allows you to use a type system in JavaScript

// Vanilla JS

function includes(name, names) {
  let index = names.indexOf(name);
  return index != -1;
}
// Typescript

function includes(name : string, names : Array<string>) : boolean {
  let index : number = names.indexOf(name);
  return number != -1;
}

Performance

Not bad

Performance

Renders pretty quickly

However, there is some criticism of React due to high memory requirements from the virtual DOM

Lines of code: 475

Other Criteria

Other criteria

Community

The React community is huge.  The github repo has been starred 92,695 times and is backed by Facebook

 

Flexibility

Any JS library integrates well with React. And since it is so popular, many have made React versions of popular libraries

Other criteria

Learning Curve

The learning curve can be steeper because you need to understand all the nuances of JS (ie.  this) as well

 

Testability

There are many testing frameworks that work well with React, specifically Enzyme (made by AirBnB) which have implementations with Jest, Mocha and many more

Overall

React has a huge community supporting it

 

Good React code is modular and maintainable

 

We can take what we want and leave the rest

 

Learn once, write anywhere

References

  • React docs: https://reactjs.org/docs (many of the pages)
  • https://medium.freecodecamp.org/evolving-patterns-in-react-116140e5fe8f
  • http://www.culttt.com/2014/12/03/6-principles-writing-maintainable-code/
  • https://github.com/facebook/react
  • https://www.quora.com/How-flexible-is-React
  • https://en.wikipedia.org/wiki/React_(JavaScript_library)
  • https://thenewstack.io/react-native-learn-write-anywhere/
Made with Slides.com