All Things React

Session 10

[Class Date]

Frontend Frameworks

  • Angular 2 (Google)
    • Stat
  • React (Facebook)
    • Component based
    • Virtual DOM
  • JQuery (JS Team)
    • Library not framework
    • ID based

What is react?

  • React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components.
  • It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes.
  • Does the least amount of DOM manipulation possible to keep thing east

Create React App

# Install the CLI tool
npm install -g create-react-app

# Create an app
create-react-app my-app-name

# Install Dependencies
cd my-app-name
npm install
  • Create React App is the easiest way to get up and going with react on your machine.

Create React App

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="myDiv"></div>
    <script type="text/babel">

    <!-- React Code Goes Here -->

    </script>
  </body>
</html>

JSX

  • It's called JSX, and it is a Javascript XML syntax transform. This lets you write HTML-ish tags in your Javascript. I say HTML-ish because there are a couple gotchas. You are really just writing XML based object representations.

JSX

  • For regular html tags, the class attribute is className and the for attribute is htmlFor in JSX because these are reserved words in Javascript. 

JSX

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

Components

  • When using the render method above, our first argument is the component we want to render, and the second is the DOM node it should mount to. We can use the createClass method to create custom component classes.

Components

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});
React.render(
    <MyComponent/>,
    document.getElementById('myDiv')
);

PROPs

  • When we use our defined components, we can add attributes called props. These attributes are available in our component as this.props and can be used in our render method to render dynamic data:

PROPs

var MyComponent = React.createClass({
     render: function(){
     return (
     <h1>Hello, {this.props.name}!</h1>
     );
     }
    });
    
    React.render(
    <MyComponent name="Handsome" />, 
  document.getElementById('myDiv'));

Questions?

Made with Slides.com