Building SPA’s using ReactJS and ASP NET Core
Download as PPTX, PDF2 likes980 views
The document discusses the construction of single-page applications (SPAs) using JavaScript and React, highlighting that all necessary resources can be dynamically loaded without page reloads. It includes a brief overview of components in React, emphasizing their functionality in rendering, receiving props, and maintaining state. Additionally, various external links and tools related to SPA development are mentioned.
Building SPA’s using ReactJS and ASP NET Core
- 1. Building SPA’s using + by Jose Barbosa | @kidchenko
- 3. “…In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process…”
- 4. Benefits!?
- 16. Software Engineer at Jetabroad; Agile Advocate (Scrum/Lean); Digital Entrepreneur; JavaScript Lover; C# Lover; Ex-Lambda3 from Brazil; Crazy `Farang` @kidchenko github.com/kidchenko OLÁ!
- 21. Nops!
- 28. SPA
- 31. <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script> </body> </html>
- 32. <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script> </body> </html>
- 36. Using Components
- 39. A Component do 3 things:
- 40. A Component do 3 things: •Render •Receive Props •Maintain State
- 42. Controllers
- 43. Routing Return code 201 and add location headerData coming from JSON
- 46. dotnet add package Swashbuckle.AspNetCore --version 1.1.0
- 48. Virtual DOM
- 51. Composition
- 53. Tooling
- 57. Thank you! Obrigado! Gracias! Khob khun krab! Questions? @kidchenko github.com/kidchenko
Editor's Notes
- #3: Single Page Application(SPA) is a web application that fits on a single web page with dynamic actions without refreshing the page. Single Page Application interactions can be handle without reaching server. SPA can improve performance in several ways like loading time, using AJAX, easy to navigate pages etc. Users will be more comfortable with Single Page Application, It is very easy to navigate to different page and filter content.
- #5: Benefits: No extra queries to the server to download pages. User friendly. Performance Improvement, Single Page Application can improve performance in many ways, Single time file load each of HTML, CSS, JS. SPAs did get adopted a lot over the last few years for building the private dashboard part of SaaS (Software as a Service) platforms or Internet services in general, as well as for building enterprise data-driven and form-intensive applications.
- #7: days without accident sign In the JavaScript community they create frameworks by accident
- #8: days without accident sign In the JavaScript community they create frameworks by accident
- #11: SPAs não são nada novo! Apenas react é uma nova ferramenta para SPA
- #28: Dotnet core are just console apps, in the main, we build our web host and run to start listening from request.
- #29: 3 frameworks, similar but different. Each of these frameworks works great for what they are built for but there is a lack of alignment. Web Pages and MVC both use razor. Share HTML Helpers, MVC and Web API is more similar, share a lot of stuffs.
- #37: Components are the single building block of react library
- #40: Components are the single building block of react library
- #41: Components are the single building block of react library
- #42: JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSXbut JSX makes React a lot more elegant. Just like XML, JSX tags have a tag name, attributes, and children