Before I started to use Stencil, I worked a lot with React (and am still working with the library). While developing React components, you often need to use a render prop, so I wanted to see how it would work in a Stencil environment. As you might figure, it works in Stencil and this gave me the idea to write a short post to explain how to use the render prop in Stencil.
A render prop is just a name for a simple technique in which you pass a function to a component which will be used in the component render function. The reason to use a render prop is the ability for a component to share its inner state without exposing it to the outside.
If you have been in the React ecosystem for a while, there is a possibility that you have heard about Higher Order Components. Let’s look at a simple implementation while also trying to explain the core idea. From here you should get a good idea of how they work and even put them to use.
Why Higher-Order Components?
As you build React applications, you will run into situations where you want to share the same functionality across multiple components…
The post What are Higher-Order Components in React? appeared first on CSS-Tricks.
I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.
Here’s a GIF that shows what I mean:
While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua:
The post How to Create a Component Library From SVG Illustrations appeared first on CSS-Tricks.
In this video tutorial, Wes Bos looks into the new context API and the problem that it’s trying to solve:
React 16.3 has a new Context API which makes accessing data and functions anywhere in your application a snap. If you ever find yourself passing data down via props 4-5 levels deep, context might be what you are looking for.
Don’t forget about Neal Fennimore’s recent post on putting things into context. It covers the concept in great detail …
The post React’s New Context API Explained appeared first on CSS-Tricks.
I’ve been having the time of my life with React lately. But on my journey, I’ve had a hard time finding good code style guidelines to keep the mix of JSX and JS clean and readable. I’ve been coming up with my own style guides that I’d love to share. Maybe these will be useful to you and, of course, feel free to share similar guidelines in the comment thread below.
Rule #1: Destructure your props
One of my favorite …
The post React Code Style Guide appeared first on CSS-Tricks.
Context is currently an experimental API for React – but soon to be a first class citizen! There are a lot of reasons it is interesting but perhaps the most is that it allows for parent components to pass data implicitly to their children, no matter how deep the component tree is. In other words, data can be added to a parent component and then any child can tap into it.
See the Pen React Context Lights by Neal …
The post Putting Things in Context With React appeared first on CSS-Tricks.
As you begin to learn React, you will be faced with understanding what state is. State is hugely important in React, and perhaps a big reason you’ve looked into using React in the first place. Let’s take a stab at understanding what state is and how it works.
What is State?
The post React State From the Ground Up appeared first on CSS-Tricks.
Streaming entertainment is a massive interest of mine as both a consumer and web developer. My love for streaming entertainment dates back to the early days of RealPlayer and the misery of a million codecs. Fast forward to today and I’m working a lot with ReactJS, as well as the dozens of streaming technologies like […]
The post React Video Player appeared first on David Walsh Blog.
Have you ever wanted to render a Preact component inside a React project?
It’s hard, right? First of all, why? Because. Second of all, how do you reconcile the two different implementations of JSX?
In this blog series, I’m going to create a small chat application using React and ASP.NET Core, to learn more about React and to learn how React behaves in an ASP.NET Core project during development and deployment. This Series is divided into 5 parts, which should cover all relevant topics:
React Chat Part 1: Requirements & Setup
React Chat Part 2: Creating the UI & React Components
React Chat Part 3: Adding Websockets using SignalR
React Chat Part 4: Authentication & Storage
React Chat Part 5: Deployment to Azure
I also set-up a GitHub repository where you can follow the project: https://github.com/JuergenGutsch/react-chat-demo. Feel free to share your ideas about that topic in the comments below or in issues on GitHub. Because I’m still learning React, please tell me about significant and conceptual errors, by dropping a comment or by creating an Issue on GitHub. Thanks.