Intro to React
•Download as PPTX, PDF•
3 likes•2,168 views
The "Intro to React" session from the Kuali Days 2016 DevCon (http://kualidays.com)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Intro to React
Similar to Intro to React (20)
Recently uploaded
Recently uploaded (20)
Intro to React
- 2. What is React? Library for building user interfaces
- 4. View
- 7. But First… JSX and ES6
- 10. Component Props { … } <Element/> State { … } There are actually a few different ways to create components
- 11. Class Component
- 13. Strive to use stateless functional components whenever possible.
- 14. Rendering
- 15. Props
- 17. State
- 18. State
- 24. Data flow is unidirectional. All data flows down the component hierarchy
- 25. Virtual DOM “You’re on a need-to-know basis… and you don’t need to know.”
Editor's Notes
- Eric Westfall, Chief Software Architect at Indiana University and I’m going to introduce you all to React Before we get started, how many of you have used React or are using it? For those who don’t know, I spent a number of years working on Kuali software, and in the original Kuali software we used Java technologies and Apache Struts to implement our web application functionality. This included using JSP and taglibs, I remember thinking back then, “this is just horrible, there has to be a better way”. First of all the syntax and capabilities of JSP are just awful, second we were doing all of this work to track state in our server side code, we actually had code that would track the current state of things like tabs and whether they were open or not on the server side, it was awful I think that managing a large amount of state that can be modified or changed in multiple ways is one of the hardest things about programming and causes the bugs So I was wishing for that better way to develop user interfaces…React is that better way
- It’s not a framework! Unlike AngularJS It’s also not MVC
- Many people think of React as the “V” in MVC, it for building application UI’s ‘
- Create your apps as a hierarchy of components
- We’ve been using React for development on my team at IU for over a year now and it’s changed the way that we approach application development, it has truly been revolutionary and refreshing for our team It’s really a joy to work with It’s declarative – when you implement your components you are saying “this is how I want it to look”, you simply write your render method and you don’t have to worry about telling the system when it should be rendered It’s simple – there are really only a handful of concepts you have to understand to understand how react works, and I’m going to try to cover most all of those in this 20 minute segment It’s fast, both from a speed of development perspective, but also a performance/execution perspective, it utilizes a technique that I will talk about later which allows it to be very performant
- Our examples will contain javascript code that includes both JSX and ES6 JSX is a syntax extension to javascript which support and XML-like syntax ES6 (aka ES2015) is an updated version of javascript Includes classes, arrow notation for functions, and a bunch of other stuff So how does this stuff actually get executed by the browser? It doesn’t! we use a compiler called babel to transpile it specifics are beyond the scope of this intro Just know that you will see both of these in the examples, and I’ll explain it as we go through
- Pure functions are just simpler and easier to understand Avoids the use of classes Helps to spot code bloat by making it easier to see code that should be refactored into simpler components They are super easy to test
- Each component goes through a lifecycle and there are various hooks available that can be implemented on a component class for tapping into that lifecycle
- These methods are called when an instance of a component is being created and inserted into the DOM
- Benefits JS applications must manage more and more state these days, this ever changing state is hard to manage Leads to situations where it is difficult to understand what is happening with the state in your application Unidirectional data flow is much easier to reason about and program with because data flow is deterministic and predictable
- While the core of react is very simple, it has a large and vibrant ecosystem of other libraries that it can be paired with Including libraries to handle routing, forms, redux (which we already mentioned briefly), bootstrap, and much more