React js basics
- 1. ReactJS basics An enticing introduction
- 2. We will talk about What is React? Why do people use React? Pre-requisites to learning React A tour of React eco-system React “Hello World” in 3 mins Some basic concepts The path forward
- 3. What is React? A declarative, efficient, and flexible JavaScript library for building user interfaces Designed for gradual adoption, and you can use as little or as much React as you need
- 4. People use it for a presentation library https://github.com/FormidableLabs/spectacle
- 5. Virtual Reality ReactVR rotating boxes
- 6. To build a shopping cart https://github.com/jeffersonRibeiro/react-shopping-cart
- 8. Create physics based animation library https://github.com/react-spring/react-spring
- 10. Mobile apps and games of course
- 11. And many more cool things…
- 12. Why do people use React? Awesome documentation & support That has led to a wonderful ecosystem Great dev tools Efficient DOM management Source: https://codesandbox.io/search?refinementList%5Btemplate%5D=&page=1
- 13. More numbers…
- 14. Don’t believe me on this though… https://2018.stateofjs.com/front-end-frameworks/overview/
- 15. But, how is the ReactJS market in India?
- 16. Ok, but how is it in Ahmedabad?
- 17. Prerequisites Basic would suffice Advanced would help grab faster
- 18. React eco-system
- 19. React ecosystem Lets understand through a discussion between two friends. Anil asks for suggestions from his friend Biju on technology he should use for fetching API data and displaying it on his web app. An animated version of blog How it feels to learn javascript in 2016
- 20. I was thinking maybe using jQuery to fetch and display the data? Oh my god no, no one uses jQuery anymore. You should try learning React, it’s 2016 Oh, OK. What’s React? A super cool library made by some guys at Facebook, it brings control & performance to your application, by allowing you to handle any view changes very easily That sounds neat. Can I use React to display data from the server? Yeah, but first you need to add React and React DOM as a library in your webpage. Why two libraries? So one is the actual library and the second one is for manipulating the DOM, which now you can describe in JSX.
- 21. JSX? What is JSX? JSX is just a JavaScript syntax extension that looks pretty much like XML. It’s kind of another way to describe the DOM, think of it as a better HTML. If I add these two libraries then I can use React? Not quite. You need to add Babel, and then you are able to use React. Another library? What’s Babel? Babel is a transpiler that allows you to target specific versions of JavaScript, while you code in any version of JavaScript. Babel allows you to code in ES2016+ rather than ES5 ES5, ES2016+? I’m getting lost over here. ES5 stands for ECMAScript 5. It’s the edition that has most people target since it has been implemented by most browsers nowadays.
- 22. ECMAScript? Its the scripting standard JavaScript was based on in 1999 after its initial release in 1995. We have, like, 7 editions of this implementation. 7 editions. For real. And ES5 and ES2016+ are? The fifth and seventh edition respectively. Wait, what happened with the sixth? Each edition is a superset of the previous one, so if you are using ES2016+, you are using all the features of the previous versions. And why use ES2016+ over ES6 then? You could use ES6, but to use cool features like async and await, you need to use ES2016+. Otherwise you are stuck with ES6 generators with coroutines to block asynchronous calls for proper control flow.
- 23. All these names are confusing. Look, I’m just loading a bunch of data from a server, I used to be able to just include jQuery from a CDN and just get the data with AJAX calls, why can’t I just do that? It’s 2016 man, no one uses jQuery anymore, it ends up in a bunch of spaghetti code. Everyone knows that.
- 24. Right. So my alternative is to load three libraries to fetch data and display a HTML table. Well, you include those three libraries but bundle them up with a module manager to load only one file. And what’s a module manager? The definition depends on the environment, but in the web we usually mean anything that supports AMD or CommonJS modules And AMD and CommonJS are… Ways to describe how multiple JavaScript libraries should interact. You know, import and requires? You can write multiple JavaScript files using AMD or CommonJS API & you can use something like Browserify to bundle them up OK, that makes sense… What is Browserify? A tool that allows you to bundle dependencies to files that can be run in the browser. It was created because most people publish those dependencies in the npm registry.
- 25. So I need to download the libraries from npm then? Yes. so if you want to use React , you download the React module and import it in your code. You can do that for almost every popular JavaScript library. Oh, like Angular! Angular is so 2015. But yes. Angular would be there, alongside VueJS or RxJS and other cool 2016 libraries. Want to learn about those? npm registry? It’s a very big public repository where smart people put code and dependencies as modules
- 26. Is the learning curve so steep? https://github.com/kamranahmedse/developer-roadmap
- 27. Do not feel so overwhelming. Not yet. https://www.youtube.com/watch?v=mbiryVTIJ4Q
- 28. React “Hello World” in 3 minutes
- 29. Some basic concepts React components – Describe how a section of UI will appear based on the props passed. Eg: Label, ShoppingCard, CreateUser - Component is just a function/class. props are arguments. Class in javascript are actually Functions And Functions in javascript are actually Objects - And so Class & Functions both can be stateful
- 30. Sample ReactJS component tree
- 31. Some basic concepts Function to add 2 nos add(2, 5) What if I want total of 3 & 7 add(3,7) React button component <Button>Submit</Button> What if I want to display a spinner on click? <Button spinner=true>Submit</Button>
- 32. The path forward JSX semantics Stateful & Stateless components State & how to change it React advanced patterns React life cycle Context & Ref React Hooks Using developer tools Redux (External library for state management) React Router And learning never stops…