Downloaded 11 times
More Related Content
React js basics
- 1. ReactJS basics An enticingintroduction
- 2. We will talkabout 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 itfor a presentation library https://github.com/FormidableLabs/spectacle
- 5.
- 6. To build ashopping cart https://github.com/jeffersonRibeiro/react-shopping-cart
- 7.
- 8. Create physics basedanimation library https://github.com/react-spring/react-spring
- 9.
- 10. Mobile apps andgames of course
- 11. And many morecool things…
- 12. Why do peopleuse 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.
- 14. Don’t believe meon this though… https://2018.stateofjs.com/front-end-frameworks/overview/
- 15. But, how isthe ReactJS market in India?
- 16. Ok, but howis it in Ahmedabad?
- 17. Prerequisites Basic would suffice Advancedwould help grab faster
- 18.
- 19. React ecosystem Lets understandthrough 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 maybeusing 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 isJSX? 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 JavaScriptwas 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 areconfusing. 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 alternativeis 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 needto 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 learningcurve so steep? https://github.com/kamranahmedse/developer-roadmap
- 27. Do not feelso 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.
- 31. Some basic concepts Functionto 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…