Introduction to React
@GoyeSays
Carlos Goyeneche
@GoyeSays
https://github.com/Goye
What is ReactJS?
A library for creating user interfaces
but is more about the same?
https://facebook.github.io/react/
+
What is ReactJS?
https://facebook.github.io/react/
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...
- Custom Elements
- Shadow DOM
- HTML Imports
- HTML Templates
The first library based on Web Components was released by Google in 2013
What is ReactJS?
JSX
What is ReactJS?
Markup with code
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
What is ReactJS?
JSX
That's ugly but functional
What is ReactJS?
Everything is a component!
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
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/
Use next generation JavaScript, today.
What's WebpackJS?
https://webpack.js.org/
- Bundle your styles
- Bundle your scripts
- Bundle your assets
More cool stuff!
Questions?
https://github.com/Goye
Thanks a lot!
https://github.com/Goye