ReactJS Meeting

04/14/15

Came late.

ReactJS is only for the view. ReactJS is not a framework. It's a library. It eschews best-practices.

Traditional MVC/MVVM shown. There's a distance between controller and view, which has problems at scale. React fixes this by making each controller and view a component.

React is awesome in that everything about it is just JS. Actually the best JavaScript, as it fully embraces ES6 (next version of JavaScript).

React is insanely fast. Renders to virtual DOM and batches updates to actual DOM. Only updates when changed. React vs Angular shown.

React gives you event delgation and synthetic events. Events are not consistent across browsers, React fixes that for you.

It makes your dev process simple.

Question: says that React isn't supposed to replace Angular, but React is being compared to Angular. React could be used with Angular, speaker is of opinion that that isn't ideal. What would you use with React? React is commonly paired with Backbone.js. Flux is their opinated thing you should use with React.

ReactJS has a simple structure (tree shown). Components enforce a uni-directional data flow. Useful for design purposes. Data in a component only comes from parents and self. This is setup as states and props. This allows a great means to find where some piece of data came from. Easy to build upon.

ReactJS syntax is... kinda simple? (Example JSX syntax shown.) That gets compiled into some basic javascript. Use JSX, it's weird for a few minutes and it's better than writing the complied JS by hand.

Component Life Cycle is only 7 methods.

Show and Tell

Code is available on github. Given tour of each piece of code.

Code forked. Starting to look at code... Missing some questions.

What is the order of functions called by ReactJS? All will's happen before render. Render gets called multiple times. Every setting of state makes state dirty, and then render is called. Props and state exist for rendering to change when state changes.

Most important part of the container is the getData method.

This is to showcase the app itself, but is not a proper architecture.

Usually there's a model.fetch that will get the data for you.

Cool ES6 example being described:


            ...this.props

This... does something magical that I will have to look up later. The explanation doesn't really make sense to me. Some sort of parent inheritance thing. I commented on my confusion and was told it was called the Spread Operator. Will definitely explore that further.

You can define default things in ReactJS and it'll basically do some type-checking for you and report type errors. Can make good assumptions about what to do with data. In ES6 these are static methods.

React animations are super fast, and CSS transitions leave you wanting more, so good React animation libraries are really powerful for good animation stuff.

Best practices (maybe outdated): if something shouldn't be rendered, don't set display to null, just don't render it in ReactJS.


//are we trending in a direction?

let trending;

if ( this.props.trendingDown ) {

    trending = <TrendingDownArrow/>;

}

if ( this.props.trendingUp ) {

    trending = <TrendingUpArrow/>;

}



return (<li className="media">

    <div className="media-left">

        <a href={this.props.repo.html_url}>

            <img className="media-object" style={mediaObjectStyle} src={this.props.repo.owner.avatar_url} alt="avatar"/>

        </a>

    </div>

    <div className="media-body">

        <h4 className="media-heading">{this.props.repo.name}  

            <small>

                <span className="label label-info">

                    <span className="glyphicon glyphicon-star" aria-hidden="true">{this.props.repo.stargazers_count}</span>

                </span>

                {trending}

            </small>

        </h4>

        {this.props.repo.description}

    </div>

</li>);

I think it might be beneficial for me to run this code.

Don't need anything else for a class than just render.

If you just want to generate HTML, you can do it. Doesn't have to be dynamic (seems like a good place to start for an enthusiast like moi).

How ReactJS implements components is the future of web components. It's the beginning of getting it right.

Soon, the old convention of keeping CSS, HTML, and JavaScript separate may be combined into components, and then they'll be properly portable bits of website development.

BrowserSync is recommended for use to everyone.

You can not return multiple children at once, there needs to be a single returned child to the parent.

State is yours, props should be treated as immutable.

At what point you stop breaking down the code into components is up to the discretion of the user. It can all be contained in one div, but at some point you lose the power of ReactJS.

Example of rendering only new data shown with app.

Question: waiting? Can't force thing to wait for render. Can't say best way to implement that with just armchair thinking.

Next talk will be about ReactJS unit-testing. Unit-testing tool is called Jest. Person who will give talk says it was overtly slow.

Size? 708 KB. A little bulky, but pretty good.

Error mapping back to uncompiled code? Not sure.

Facebook tooling is amazing.

Nothing about the main React API is dependent on the DOM. You can render on the Server, to Canvas, or to Native.

Faster rendering? A lot of this is going over my head. Haven't paid attention to this stuff, yet. Rendering on server is faster.

Upcoming topics:

Unit testing React
Flux architecture and Server-Side Rendering
Animation using ReactJS