Introduction to React
@GoyeSays
![](https://s3.amazonaws.com/media-p.slid.es/uploads/333422/images/3842738/pasted-from-clipboard.png)
Carlos Goyeneche
@GoyeSays
https://github.com/Goye
![](https://s3.amazonaws.com/media-p.slid.es/uploads/333422/images/1424478/pasted-from-clipboard.png)
What is ReactJS?
A library for creating user interfaces
but is more about the same?
https://facebook.github.io/react/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/333422/images/1424540/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/333422/images/1428634/pasted-from-clipboard.png)
+
![](https://raw.githubusercontent.com/emberjs/website/master/source/images/brand/ember_Ember-Light.png)
What is ReactJS?
https://facebook.github.io/react/
![](https://cdn.meme.am/cache/instances/folder164/500x/60551164/winter-is-coming-brace-yourself-a-new-javascript-framework-is-coming.jpg)
What is ReactJS?
https://facebook.github.io/react/
My MVC is better than your MVC
My MVVM is better than your MVC
My MVC is better than you MVVM
What is ReactJS?
Traditional MV* separation of concerns
Model | Controller | ModelView | View |
---|---|---|---|
Data | Display logic | Database data | Templates |
A lot of complexity
What is ReactJS?
https://facebook.github.io/react/
Why do people think that ReactJS is awesome?
https://blog.gyrosco.pe/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2
http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
What is ReactJS?
https://facebook.github.io/react/
What is ReactJS?
That's not a new idea...
![](https://web-components-resources.appspot.com/assets/images/introducing-the-element-registry.png)
- Custom Elements
- Shadow DOM
- HTML Imports
- HTML Templates
The first library based on Web Components was released by Google in 2013
What is ReactJS?
![](https://www.polymer-project.org/images/logos/p-logo.png)
JSX
What is ReactJS?
Markup with code
![](http://www.indiewire.com/wp-content/uploads/2016/08/cat_bread_face.gif?w=500)
What is ReactJS?
Markup with code
Markup and display logic both share the same concern
Pete hunt - Ex-Facebook and Instagram
What is ReactJS?
JSX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/333422/images/3856110/Captura_de_pantalla_2017-05-29_a_las_23.22.31.png)
What is ReactJS?
JSX
![](https://i.giphy.com/hvMTGSBJOQiLS.webp)
That's ugly but functional
What is ReactJS?
Everything is a component!
![](https://image.slidesharecdn.com/reactjs-150325042438-conversion-gate01/95/an-introduction-to-reactjs-44-638.jpg?cb=1427275873)
What is ReactJS?
Virtual DOM
Re-rendering everything on every update:
- Create lightweight description of component UI
- Diff it with the old one
- Compute minimal set of changes to apply to the DOM
What is ReactJS?
Virtual DOM
![](http://res.cloudinary.com/oyecode/image/upload/v1442789800/Virtual%20DOM.png)
Imperative vs Declarative programming
Imperative | Declarative |
---|---|
Explicit instructions | Describe the outcome |
The system is stupid, you're smart | The system is smart, you don't care |
Ultimate flexibility | Limited flexibility |
Rackspace
How vs What
What's NPM?
"Easy, fast, robust, and consistent package manager"
https://www.npmjs.com/
What's BabelJS?
https://babeljs.io/
![](https://raw.githubusercontent.com/babel/logo/master/babel.png)
Use next generation JavaScript, today.
What's WebpackJS?
https://webpack.js.org/
![](https://i.blogs.es/a4a869/webpack/original.png)
- Bundle your styles
- Bundle your scripts
- Bundle your assets
More cool stuff!
Questions?
https://github.com/Goye
![](https://cdn.meme.am/cache/instances/folder469/63969469.jpg)
Thanks a lot!
https://github.com/Goye
Introduction to React
By Carlos Goyeneche
Introduction to React
Introduction to reactJS
- 216