React

This page is a draft..

Concepts

JSX

  • Produces React Elements
  • Similar to a template language
  • You can put any valid JavaScript expression inside curly braces in JSX
  • After compilation (translation?) JSX expressions become JavaScript function calls and evaluate to JavaScript objects

Elements

  • Smallest building blocks of React apps
  • Immutable
  • Represents the UI in a certain moment

Components

  • Independent, reusable UI pieces
  • Takes arbitrary inputs called props
    • props must be immutable and Components must not mutate props
  • Return Elements
  • When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object
  • Always start component names with a capital letter
    • React treats components starting with lowercase letters as DOM tags
      • For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope

Function Components

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Function Component Example</title> 
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script> 
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const helloWorld = <Welcome name='Koray'/>
        ReactDOM.render(helloWorld, document.getElementById('app'));

        <!-- This is a function component -->
        function Welcome(props) {
            return <span>Welcome {props.name}</span>;
        }
    </script>
</body>
</html>

Class Components

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Function Component Example</title> 
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script> 
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        <!-- This is a class component  -->
        class Welcome extends React.Component {
            render() {
                return <span>Welcome {this.props.name}</span>;
            }
        }

        const helloWorld = <Welcome name='Koray'/>
        ReactDOM.render(helloWorld, document.getElementById('app'));
    </script>
</body>
</html>

Examples

Hello World

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Hello World</title> 
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script> 
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const helloWorld = React.createElement("h1", null, "Hello World");
        ReactDOM.render(helloWorld, document.getElementById('app'));
    </script>
</body>
</html>

Hello World - 2

<!DOCTYPE html>
<html>
<head>
    <title>Hello World - 2</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    class MyApp extends React.Component {
        alertHello() {
            alert('Hello');
        }

        render() {
            return (<h1 onClick={this.alertHello}>Hello World!</h1>);
        }
    }
    
    ReactDOM.render(<MyApp/>, document.querySelector('#app'));
</script>
</body>
</html>

Hello World - 3

<!DOCTYPE html>
<html>
<head>
    <title>Hello World - 3</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    let HelloWorld = React.createClass(
        {
            render: function () {
                return (
                    <p>
                        Hello {this.props.name}!
                    </p>
                );
            }
        }
    );
    ReactDOM.render(
        <div>
            <HelloWorld name={'Koray'}/>
            <HelloWorld name={'Deniz'}/>
            <HelloWorld name={'Toprak'}/>
        </div>
        , document.querySelector('#container')
    );
</script>
</body>
</html>

Hello World - 4

<!DOCTYPE html>
<html>
<head>
    <title>Hello World - 4</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    let MyClickableComponent = React.createClass(
        {
            render: function () {
                return (
                    <button onClick={this.props.behavior}>{this.props.children}</button>
                )
            }
        }
    );

    ReactDOM.render(
        <div>
            <MyClickableComponent behavior={() => {alert('Hello')}}>Hit Me!</MyClickableComponent>
        </div>
        , document.querySelector('#container')
    );
</script>
</body>
</html>

Styling in React Example

let letterStyle = {
    padding: 10,
    margin: 10,
    backgroundColor: '#ffde00',
    color: '#333',
    display: 'inline-block',
    fontFamily: 'monospace',
    fontSize: 32,
    textAlign: 'center'
};

let Letter = React.createClass(
    {
        render: function () {
            return (
                <div style={letterStyle}>Style applied!</div>
            );
        }
    }
);

Live Examples