Course structure

• Theoretical input
• Building an App
• Questions any time

made with reveal.js

Follow the presentation here

https://webplatformz.github.io/react-training-slides/

A quick overview

History

• Created in 2011 at facebook
• Made open source in 2013

React is a library, not a framework.

It handles rendering and state, but leaves other things like ajax and routing up to you.

Fortunately, thanks to the huge community, there are always many options to choose from.

A simple React Component

Setup

                    
                        $ mkdir react-component && cd react-component
                        $ touch index.html
                        $ touch MyComponent.js
                    
                

Include React & Your Component

index.html

                    
                        <div id="container"></div>

                        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
                        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
                        <script src="MyComponent.js"></script>
                    
                

Write your component

MyComponent.js

                    
function MyComponent() {
    return React.createElement(
        'h1',
        {},
        'Hello Component!'
    );
}

const container = document.querySelector('#container');
const element = React.createElement(MyComponent);

ReactDOM.render(element, container);