Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Le Wagon - React 101

2,441 views

Published on

In 2013, Facebook released a new JavaScript framework which would soon be adopted by loads of companies to build complex Front-End web applications. React is now mature, a great community quickly formed and produced by-products and extension like Redux or React Native. This workshop aims at showcasing the basics of React and discuss when choosing it the most relevant.

Pre-requisites:
A beginner's knowledge on vanilla JavaScript & the DOM. This is not a JavaScript 101 for absolute beginners.

Le Wagon React track is now open in London and Paris, apply now: https://www.lewagon.com/react 

Published in: Education
  • Be the first to comment

Le Wagon - React 101

  1. 1. React 101 @ssaunier
  2. 2. React? A JavaScript library used to build HTML
  3. 3. Setup You need JavaScript in your terminal
  4. 4. Setup You need a dependency manager or
  5. 5. Quick Start yarn global add create-react-app npm install -g create-react-app or
  6. 6. Boilerplate
  7. 7. Create an app cd ~/code/lewagon create-react-app airbnb-clone cd airbnb-clone yarn start # or npm start
  8. 8. Structure
  9. 9. Our first Component
  10. 10. First Component mkdir src/components touch src/components/hello.js
  11. 11. First Component 1. Import React 2. Define component 3. Implement render 4. Export component
  12. 12. First Component 1. Import React 2. Define component 3. Implement render 4. Export component
  13. 13. First Component 1. Import React 2. Define component 3. Implement render 4. Export component
  14. 14. First Component 1. Import React 2. Define component 3. Implement render 4. Export component
  15. 15. Render it!
  16. 16. props
  17. 17. Planning
  18. 18. This is what we want to build:
  19. 19. What are the components?
  20. 20. What are the components? App Flat Map Marker
  21. 21. Flat
  22. 22. <div class="flat"> <div class="flat-picture"></div> <div class="flat-title"></div> </div> Flat Component
  23. 23. Flexbox <div class="app"> <div class="main"> <div class="search"> </div> <div class="flats"> </div> </div> <div class="map"> </div> </div> .app { display: flex; } .main { flex-basis: 60%; display: flex; flex-direction: column; } .map { flex-grow: 1; height: 100vh; top: 0; position: sticky; }
  24. 24. Flexbox <div class="flats"> <div class="flat"></div> <div class="flat"></div> <div class="flat"></div> <div class="flat"></div> </div> .flats { display: flex; flex-wrap: wrap; align-content: flex-start; } .flat { flex-basis: calc(50% - 20px); margin: 10px; }
  25. 25. React State
  26. 26. Constructor
  27. 27. Source github.com/lewagon/flats-boilerplate
  28. 28. Ajax
  29. 29. Map + Marker(s)
  30. 30. Google Map React
  31. 31. Event
  32. 32. Flat What should happen when clicking on a flat picture?
  33. 33. Controlled Component
  34. 34. Search <input type="text" placeholder="Search..." value={this.state.search} onChange={this.handleSearch} />
  35. 35. Thanks!
  36. 36. Going Further
  37. 37. Going Further lewagon.com/react

×