Intro to React

Rohit Rai

Software Engineer @ Red Hat

github.com/rohitkrai03

@rohitkrai293

Why do JavaScript frameworks exists? 

Every framework can be viewed as an attempt to say "the hardest part of writing a webapp is {X}, so here's some code to make that easier".

- Reddit /u/Cody_Chaos

  • Knockoutjs
    • The hardest part of writing a webapp is implementing two-way data binding.
  • Backbonejs
    • ​The hardest parts are fetching and persisting models to a REST API, and client side routing.
  • Angular
    • ​Angular is what you get if you think the biggest problem with writing webapps is that Javascript isn't Java.
    • The hardest part of writing a webapp is data-binding, decouped modular architecture that supports unit testing, and having to do XHR with callbacks.
  • React + Redux
    • ​The hardest part of writing webapps is non-deterministic behaviour and unclear data flow.
  • Why do frameworks exist?
    • Keep state out of the DOM
    • Higher-level abstractions
    • Code organization
  • Pros
    • Common concepts that can be shared between apps and developers
    • Large communities, shared knowledge, documentation, bug fixes
    • Better app structure through tools and guidelines
  • Cons
    • Learning curve
    • Minimum requirements for size
    • Setup and infrastructure

What is React?

  • "A Javascript library for creating user interfaces"

  • "The 'V' in 'MVC'"

  • "A library, not a framework"

  • In React, you describe what to render (instead of telling the browser how to do it).
  • This also means that the amount of boilerplate is greatly reduced.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug

- React Documentation

Declarative

  • Components are like custom, reusable HTML elements, to quickly and efficiently build user interfaces.
  • They can also define how data is stored and handled using state and props.

Component Based

Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

- React Documentation

$('form').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: '/customers',
        type: 'POST',
        data: $(this).serialize(),
        success: function(data) {
            $('.status')
                .append('<h3>' + data + '</h3>');
        }
    });
});

Imperative

class NoteBox extends React.Component {
    // ... more code ...
    render() {
        return (
            <div className="NoteBox">
                <h1>Notes</h1>
                <NoteList data={this.state.data} />
                <NoteForm onPost={this.handlePost} />
            </div>
        );
    }
};

Declarative

 

  • React is an abstraction away from the DOM
  • Encourages you to think of your application and UI in terms of state, rather than UI manipulations
  • Allows a simplified mental model for data flow
  • Re-render the whole app on every update
  • Mix and match components to build UIs

How does that help me?

How does React manages your UI?

Declarative Rendering

  • Completely recreating the entire UI on every update is not efficient

  • Rendering a component returns descriptions of what the UI should look like now

  • React uses those descriptions to update the UI efficiently

One Way Data Flow

  • Components pass data to their children
  • Component rendering is based on internal state plus data from parent
  • Predictable top-down data flow makes it easier to understand reason for UI contents

Why Choose React ? 

  • Declarative

    • Write code that describes what you want, but not necessarily how to get it.

  • Clear syntax

    • JSX in React feels just like HTML, there’s no special syntax to learn.

const Greetings = ({ firstName }) => (
   <div>Hi, {firstName}</div>
);

  • Learning curve

    • ​React has the least abstractions. If you know JavaScript then you can probably start writing React code in a single day.

  • Functional

    • In React, all of the UI can be expressed as a set of pure functions, and using pure functions to render the UI feels like a breath of fresh air.

Declarative → Predictable → Confidence → Reliability

Why is this Compelling?

React Components

Components === State Machines

React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent. In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way

Components === Functions

Just like functions take parameters and return a result, components take in values and return UI output. Given the same input values, a component will return the same UI output.

Often described as UI = f(state)

Hello World Component

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);
const HelloMessage = (props) => (
  <div>
    Hello {props.name}
  </div>
);

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

Class Components

Functional Components

Intro to React

By Rohit Rai

Made with Slides.com

Intro to React

  • 481

More from Rohit Rai