Introduction to ReactJS
0 likes58 views
Daine Mawer, a front-end engineer, introduces React and its advantages, highlighting its efficiency and component-based structure for user interfaces. React is favored by major companies for its performance improvements, particularly in UI-focused applications. The document also covers JSX, component lifecycle, state management, and events in React programming.
Introduction to ReactJS
- 1. n introduction to ReAn introduction to React Daine Mawer, Front-end Engineer @ 10up
- 2. ReactReact A L I T T L E A B O U T M E My name is Daine Mawer, Im a Front-end Engineer at 10up. I’ve been working with web technologies for over 8 years now. Over the last few years I’ve worked on major international and minor local brands alike, as well as have written courses for Friends of Design. I regularly speak at conferences globally. O U R T O P I C S F O R T O D A Y Today we’re going to look at: - What does React actually do? - Why use React? - React paradigms explained REACTJSCAPETOWN W H A T W E A R E G O I N G T O T A L K A B O U T
- 3. What does React do?What does React do? M A J O R D I F F E R E N C E S 1) React is concerned with user interaction 2) It is the “V” in MVC (Model View Controller) 3) Its faster than vanilla Javascript because it uses the Virtual DOM 4) It only updates components that are subscribed to changes and not the entire document. 5) It takes a modular approach to building components and therefore applications. 6) React uses very different programming paradigms to what you would be use to in vanilla Javascript R E A C T V S V A N I L L A J A V A S C R I P T REACTJSCAPETOWN
- 4. Why use ReactWhy use React? Netflix, Yahoo, Facebook, Atlassian, Khan Academy, Uber and more - all use React. React has dramatic performance increases when it comes to websites that are focused on UI (User Interaction): - Social Platforms - Banking Interfaces - Dashboards - eCommerce - Native Apps - Smaller components (widgets) REACTJSCAPETOWN R E A D A R T I C L E I S I T W O R T H U S I N G R E A C T ?
- 5. React paradigms explaReact paradigms explained S O M E C O D E S A M P L E S JSX - Gist Lifecycle - Gist Components - Gist Props - Gist State - Gist Events - Gist J U M P I N G I N T O R E A C T REACTJSCAPETOWN
- 6. JSXJSX JSX simply makes React more elegant. It prevents us from having to write out bloated function calls when we want to use a component within our application. https://jsx.github.io/ REACTJSCAPETOWN V I E W G I S T R E A C T P A R A D I G M S
- 7. LifecycleLifeCycle Stateful components have methods we can use to update state. They are called at different points in the lifecycle. We can generally break those down into three groupings: Mounting, Updating and Unmounting. https://reactjs.org/docs/state-and-lifecycle.html REACTJSCAPETOWN V I E W G I S T R E A C T P A R A D I G M S
- 8. ComponentsComponents Components are the building blocks of React. One of the major mind-shifts when starting to use React is to start thinking about how your application implements components. https://reactjs.org/docs/components-and-props.html REACTJSCAPETOWN V I E W G I S T R E A C T P A R A D I G M S
- 9. PropsProps Components can accept props or properties. You can pass data-types (int, string, object, function) to props as values. Props can be any kind of data you wish to include on a component https://reactjs.org/docs/components-and-props.html REACTJSCAPETOWN V I E W G I S T R E A C T P A R A D I G M S
- 10. StateState Essentially state is just an object. This object determines how the component renders and behaves. state can be updated by certain events as well, a click or submission for instance. State is not a new concept for web development. You witness contrived examples all over the web: modals, dropdowns, tabs and accordions all have a state. A modal can either be open or closed. Thus it has a state. https://reactjs.org/docs/state-and-lifecycle.html REACTJSCAPETOWN V I E W G I S T R E A C T P A R A D I G M S
- 11. EventsEvents Events also work a little different in React. React provides what is known as Synthetic Events — you are probably already pretty familiar with all of them listed on the React website. https://reactjs.org/docs/handling-events.html REACTJSCAPETOWN V I E W G I S T R E A C T P A R A D I G M S
- 12. Thanks for listening!Thanks for listening! Q U E S T I O N S ? G E T I N T O U C H Web: https://10up.com || https://dainelindleymawer.me Twitter: @dainemawer Medium: @dainemawer LinkedIn: https://www.linkedin.com/in/dainemawer Github: https://github.com/dainemawer T H A N K Y O U REACTJSCAPETOWN