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

»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.

Bb730d46c4d58c3c5785ada8bccc0007?s=128

Fabian Schultz

January 28, 2016
Tweet

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

  9. None
  10. None
  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
  13. None
  14. <PhotoGrid/>

  15. <PhotoCard/>

  16. <PhotoCard/>

  17. <Photo/> <LikeBtn/> <CartBtn/>

  18. Writing HTML inside Javascript with JSX

  19. None
  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

  33. None
  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

  62. None
  63. Any Questions?