Downloaded 73 times
Uploaded byEric Westfall
Intro to React
React is a library for building user interfaces using components. It uses a virtual DOM for rendering components, which are pieces of UI defined as classes or functions. Components receive data via props and local state, and can be nested to build complex UIs. The component lifecycle includes mounting, updating, and unmounting phases. Data flows unidirectionally down the component tree. React has a vibrant ecosystem and community for continued learning.
TechnologyâŠ
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![Full Stack React Workshop [CSSC x GDSC]](https://cdn.slidesharecdn.com/ss_thumbnails/fullstackreactworkshopcsscxgdsc-230221003415-b512c1cf-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Intro to React
- 1.
- 2. What is React? Libraryfor building user interfaces
- 4.
- 5.
- 6.
- 7.
- 8.
- 10. Component Props { ⊠} <Element/> State {⊠} There are actually a few different ways to create components
- 11.
- 12.
- 13. Strive to use statelessfunctional components whenever possible.
- 14.
- 15.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. Data flow isunidirectional. All data flows down the component hierarchy
- 25. Virtual DOM âYouâre ona need-to-know basis⊠and you donât need to know.â
- 26.
- 27.
- 28.
Editor's Notes
- #2 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
- #4Â Itâs not a framework! Unlike AngularJS Itâs also not MVC
- #5Â Many people think of React as the âVâ in MVC, it for building application UIâs â
- #6Â Create your apps as a hierarchy of components
- #7Â 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
- #8Â 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
- #14Â 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
- #21Â 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
- #22Â These methods are called when an instance of a component is being created and inserted into the DOM
- #25Â 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
- #28Â 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