You're reading from ASP.NET Core 5 and React Full-stack web development using .NET 5, React 17, and TypeScript 4

Product type Paperback

Published in Jan 2021

Publisher Packt

ISBN-13 9781800206168

Length 568 pages

Edition 2nd Edition

Languages

Tools

.NET

Concepts

Full Stack Web Development

Author (1):

Carl Rippon

View More author details

Table of Contents (21) Chapters

Preface

1. Section 1: Getting Started

2. Chapter 1: Understanding the ASP.NET 5 React Template FREE CHAPTER

3. Chapter 2: Creating Decoupled React and ASP.NET 5 Apps

4. Section 2: Building a Frontend with React and TypeScript

5. Chapter 3: Getting Started with React and TypeScript

6. Chapter 4: Styling React Components with Emotion

7. Chapter 5: Routing with React Router

8. Chapter 6: Working with Forms

9. Chapter 7: Managing State with Redux

10. Section 3: Building an ASP.NET Backend

11. Chapter 8: Interacting with the Database with Dapper

12. Chapter 9: Creating REST API Endpoints

13. Chapter 10: Improving Performance and Scalability

14. Chapter 11: Securing the Backend

15. Chapter 12: Interacting with RESTful APIs

16. Section 4: Moving into Production

17. Chapter 13: Adding Automated Tests

18. Chapter 14: Configuring and Deploying to Azure

19. Chapter 15: Implementing CI and CD with Azure DevOps

20. Other Books You May Enjoy

Leave a review - let other readers know what you think

Styling components with Emotion

In this section, we're going to style the App, Header, and HomePage components with a popular CSS-in-JS library called Emotion. Along the way, we will discover the benefits of CSS-in-JS over CSS modules.

Installing Emotion

With our frontend project open in Visual Studio Code, let's install Emotion into our project by carrying out the following steps:

Open the terminal, make sure you are in the frontend folder, and execute the following command:
```
> npm install @emotion/react @emotion/styled
```
There is a nice Visual Studio Code extension that will provide CSS syntax highlighting and IntelliSense for Emotion. Open the Extensions area (Ctrl + Shift + X on Windows or Cmd + Shift + X on Mac) and type styled components in the search box at the top left. The extension we are looking for is called vscode-styled-components and was published by Julien Poissonnier:
Figure 4.6 – Styled components Visual Studio Code extension
Important...