»I heard React was good« – An Introduction to ReactJS

GitHub repo: https://github.com/fabe/react-portfolio

Since its initial release by Facebook two years ago, React has made massive waves in the world of front-end development. Companies like Instagram, Facebook, Airbnb, Netflix, or Dropbox since rely on the Javascript library for building user interfaces.

This talk covers the basic ideas, concepts and advantages of React. After that, a simple portfolio is built, that applies these concepts in practice.

––––

Seit der Veröffentlichung durch Facebook vor zwei Jahren schlägt React.js immer größere Wellen in der Welt der Webentwicklung. Unternehmen wie Instagram, Facebook, Airbnb, Netflix, oder Dropbox setzen seither auf die Javascript-Bibliothek zum Erstellen von User Interfaces.

In diesem Vortrag werden die grundlegenden Konzepte, Prinzipien, und Vorteile von React erklärt und anhand von Beispielen erläutert. Anschließend wird im Workshop ein einfaches Portfolio gebaut, das die Grundlagen von React praktisch anwendet.

Transcript

1. An introduction to ReactJS I heard React was good.
2. Fabian Schultz 3rd semester Interfacedesign
3. What is React?
4. Javascript Library
5. for building User Interfaces
6. Who is using it?
7. Airbnb, Whatsapp, Dropbox, Netflix, Reddit, and more.
8. It’s not a Framework
11. React takes care of the View Layer
12. “React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.” https://facebook.github.io/react/docs/why-react.html
14. <PhotoGrid/>
15. <PhotoCard/>
16. <PhotoCard/>
17. <Photo/> <LikeBtn/> <CartBtn/>
18. Writing HTML inside Javascript with JSX
20. Writing HTML inside Javascript with JSX
21. <div className="container"> <h1>Super Bowl 50</h1> <h3>February 7, 2016 at 3:25PM</h3> </div>
22. React.createElement( "div", { className: "container" }, React.createElement( "h1", null, "Super Bowl 50" ), React.createElement( "h3", null, "February 7, 2016 at 3:25PM" ) );
23. “We strongly believe that components are the right way to separate concerns rather than ‘templates’ and ‘display logic.’ We think that markup and the code that generates it are intimately tied together.” https://facebook.github.io/react/docs/displaying-data.html
24. Props & State Manage the data of your components
25. Props <Photo image="turtle.jpg" />
26. Can only be changed inside the component State Internal, private data Can change it
27. Props > State
28. Events onClick, onChange, onSubmit…
29. $(".clickme").click(function() { // and so on… });
30. <Photo image="turtle.jpg" onClick={ this.handleEvent } />
31. <form onSubmit={ this.handleSubmit }> <!-- and so on… --> </form>
32. A lightweight copy of the DOM The Virtual DOM
34. jQuery DOM (Browser) builds/ modifies
35. React App Virtual DOM (Javascript) DOM (Browser) builds/ modifies builds/ modifies
36. “DOM manipulation by the browser is slow. ReactJS introduced the new idea of using a Virtual DOM. By calculating the difference between the future state and the current one, it can minimize the amount of DOM requests.” http://blog.500tech.com/is-reactjs-fast/
37. How does it look like?
38. Let’s get to work!
39. nodejs.org/en/download/ (Installing Node)
40. github.com/fabe/react-portfolio git clone
41. cd react-portfolio/ change directory
42. npm install install dependencies
43. Tooling
44. – Babel: Compiles our JSX to JS (ES5) – Browserify: Enables us to work modular – Gulp: our build system – Node/NPM: installing the dependencies
45. apm install react make Atom React friendly
46. fb.me/react-devtools React Devtools (not a requirement)
47. npm start start gulp with
48. Cons to React
49. React is only the View Layer
50. React is still young
51. reactforbeginners.com reactfordesigners.com ~20-30 Videos, $50 Blog post, free
52. Steep Learning Curve
53. React is pretty big
54. Pros to React
55. To read Angular: Learn a long list of Angular-specific syntax. To read React: Learn JavaScript. https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51
56. Angular 2 continues to put “JS” into HTML. React puts “HTML” into JS. https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51
57. Unix philosophy http://hipertextual.com/archivo/2011/10/historia-del-software-dennis-ritchie/
58. The philosophy of small, composable, single-purpose tools never goes out of style. https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51
59. Structure & Functionality at one spot
60. Serverside rendering
61. React Native
63. Any Questions?