Book Image

Hands-on Web Development with React [Video]

By : Filip Danić
Book Image

Hands-on Web Development with React [Video]

By: Filip Danić

Overview of this book

<p>The best way to explore React is to dive in, build realistic interfaces, and unravel its secrets one by one. This video course is designed to take you on a journey from a fascinated newbie to an expert in advanced concepts and design patterns.</p> <p>You will work on an SPA project from start to finish and learn how to implement features and interfaces based on real-world requirements. Facing every challenge head-on, you will slowly dissect React and expose its features. Each section will take you through one web development feature with React. You will write components that are maintainable, reusable, stylish (based on CSS-in-JS concepts), and easy to compose. You will tie together all the concepts by turning your small React app into a fully featured Single-Page Application. You will also understand how to add routing, networking, and session management to your project.</p> <p>By the end of the course, you will be well on your way to becoming a React expert, armed with strong fundamentals and clear conceptual knowledge of advanced patterns.</p> <p>The code bundle for this video course is available at:&nbsp;<a href="https://github.com/PacktPublishing/Hands-on-Web-Development-with-React" target="_blank">https://github.com/PacktPublishing/Hands-on-Web-Development-with-React</a></p> <h1>Style and Approach</h1> <p>Through a series of videos, we explore React by diving in and building UI components and implementing realistic features. There is no need to get stuck explaining concepts before they're needed; we will unravel the complexity behind React (and its supporting tools) only when we need them.</p> <p>This step-by-step process allows you to follow along with full commitment. As you build your own app alongside these videos, you will enjoy a feeling of accomplishment and insight with every new trick you gradually add to your skill set.</p>
Table of Contents (7 chapters)
Chapter 4
Crafting Styled Components
Content Locked
Section 3
Getting Started with Styled Components
So, how do we get started with CSS-in-JS? We’ll install a library called styled-components and practice using it in an isolated environment from the rest of our app. - Install styled-components and setup a Playground - Create basic components with the styled-components library - Use props to add dynamic styles to components