Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts
- Length: 204 pages
- Edition: 1
- Language: English
- Publisher: BPB Publications
- Publication Date: 2020-02-26
- ISBN-10: 9389423597
- ISBN-13: 9789389423594
- Sales Rank: #3347369 (See Top 100 Books)
Level up your React and Next.js skills with advanced concepts about SSR and PWA
Key Features
- Covers latest and core React concepts including React hooks and React reconciler
- Covers about Server Side Rendering with React and how to use it using Next.js
- Covers about Progressive Web Apps in React and how to create them
- Covers intermediate and advanced React concepts like state management
- Covers overview of React for beginners to catch with advanced concepts later
- Covers bleeding-edge React concepts on the future of React and how it would work eventually
Description
The book starts by introducing the reader to React, what it is and why you need a library like React to work with medium to large scale applications. We then move on to implementing simple client-side programs with React, uncovering modern React practices like React hooks and diving deep into various kinds of hooks. We then move to implement React on the server using Server-Side Rendering to bring benefits of the SEO world to the dynamic rendering nature of front-end libraries. For this, we use Next.js, a very popular implementation of Server-Side Rendering which comes with tons of good practices already baked in. We also take a look at how Progressive Web Apps can be created out of existing React codebases and what benefits it provides us. Finally, we end the book with some React internals (how to React works) and some bleeding-edge features in React which are expected to roll out in 2-3 years fully and would impact how to React works under the hood.
What will you learn
- What React is and how to get started with it
- Modern ways to code React applications
- Implementing Server-Side rendering with/without Next.js on the top of React library
- Working with Progressive Web Apps in React
- How to React works under the hood
- Future of React and bleeding-edge React tech you can use today
Who this book is for
The reader is expected to have a decent understanding of JavaScript/HTML/CSS, and possibly, worked with React a little bit beforehand. Although the first 2 chapters cover basics of React, still it is recommended for users with at least a bit of knowledge and experience with React.
About the Author
Mehul Mohan is an entrepreneur, developer and a security researcher. Currently, he is pursuing his bachelor’s degree in CSE at BITS Pilani. He is a WWDC’19 Scholar, and runs codedamn – a platform for people to learn coding. You’ll often find him creating programming tutorials on his YouTube channel, codedamn, having over 100,000 subscribers. He has been acknowledged by companies such as Google, Microsoft, Sony, etc. for his contributions as a security researcher.
Your Blog links: https://codedamn.com https://mehulmohan.com
His LinkedIn Profile: https://linkedin.com/in/mehulmpt
Cover Page Title Page Copyright Page Dedication About the Author About the Reviewer Acknowledgements Preface Errata Table of Contents 1. React 101 Structure Objectives React is component-based React is declarative Quick JS revision this Arrow functions .map .reduce Classes Closures More JavaScript topics Conclusion 2. Setting up React Structure Objective Choosing a text editor #1 – VSCode #2 – Sublime Text #3 – Atom Setting up nNode and NPM Windows Setting up React projects #1 – Setting up with CDN #2 – Using create-react-app JSX Moving to TypeScript Conclusion 3. Components Structure Objectives About components Class versus functional components Functional Components Props Children Hooks useState useState is not synchronous useStatecallback useEffect useEffect dependencies useEffectcleanup useCallback Custom hooks Class components Props State Lifecycle methods constructor static getDerivedStateFromProps render getSnapshotBeforeUpdate componentDidMount componentDidUpdate componentWillUnmount Conclusion Questions 4. Application State Management in React Structure Objectives Communication between components Prop drilling Refs Context API Context.Provider useContexthook useReducer hook Conclusion Questions 5. Server Side React Structure Objective React on Server What is Server-Side Rendering? Why Server Side Rendering? Starting with SSR ReactDOM SSR project configuration Writing more components Routing in SSR Client-Side React ReactDOM.hydrate Fetching data Fetching data on the server Conclusion Questions 6. Introduction to Next.js Structure Objective What is Next.js? Why Next.js? Installation Next.js defaults Pages Hot code reloading Static file serving Routing Link Link is just HoC More on Link Next.js components Next.js + CSS Styled JSX Importing CSS files Conclusion Questions 7. More with Next.js Structure Objective Next.js application Getting project up Switching to TypeScript Redux getInitialProps Creating App APIs using Next.js Setting up Redux + Next.js _app.js File Dispatching Redux Actions useSelector and useDispatch Creating the Dashboard page Conditional routing Nested routes Dynamic routing Registration page Conclusion Questions 8. Progressive Web Apps Structure Objective What is a progressive web app? Hello World manifest.json file Service workers Lifecycle PWA using Next.js Custom Next.js Server next(config: object) getRequestHandler() serveStatic() _document.js Conclusion Questions 9. Bleeding Edge React Structure Objective How does React work? Reconciler Renderer Moving from classes Concurrent mode Opting in concurrent mode Suspense – Code fetching Suspense – Data fetching Conclusion Questions
Donate to keep this site alive
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.