React Conferences

React Summit US 2023

React Summit US 2023

English versionEN

Video: Why Redwood Adopted React Server Components

David S. Price

Сo-founder of RedwoodJS

Read FAQ and transcription

react components redwoodjs

Video Summary and Transcription

Redwood's decision to adopt React Server Components marks a significant step in its development journey. The talk highlights the Bighorn Epoch in Redwood's roadmap, emphasizing its commitment to React and collaboration with the React team. By integrating React Server Components, Redwood enhances its functionality, offering seamless data fetching from any source, not just GraphQL. This shift makes it easier for developers who want to use a transparent API without the complexities of GraphQL. The introduction of Redwood Server Components (RSC) aligns perfectly with Redwood's architecture, combining server-centric and client-centric models for a robust development experience. The talk also introduces the concept of Redwood Cells, which streamline data fetching and state management, making them ideal for startups. With server-side rendering (SSR) capabilities using React streaming and suspense, Redwood offers a powerful toolset for building full-stack applications. The open-source nature of Redwood, along with its unique community participation, provides developers with an opportunity to influence the project's direction and explore new features through forums and tutorials.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

Available in Español: Por qué Redwood Adoptó los Componentes del Servidor React

FAQ

Redwood is a full-stack JavaScript TypeScript web application framework that aims to be the best full-stack web app framework. Initially launched as a 'full stack for the Jamstack,' it has evolved to offer a comprehensive suite of tools and integrations.

Redwood integrates with various technologies, including React, GraphQL, Prisma, TypeScript, Vite CLI, and more. It also supports features like authentication, security, and real-time capabilities out of the box.

Yes, Redwood is an independent and open-source project. It is free to use, and the Redwood team is highly collaborative with the community and other technology teams.

Redwood supports server-side rendering (SSR) using React streaming and suspense. This allows for fast, real-time rendering and dynamic updates to the web application.

The 'Bighorn Epoch' is a major phase in Redwood's development focused on being 'all in on React.' This includes aligning closely with the React roadmap and integrating features like React Server Components.

Redwood Server Components (RSC) are an integration of React Server Components into the Redwood framework. They aim to combine server-centric and client-centric models, providing seamless interactivity and efficient data fetching.

A Redwood cell is a higher-order component that handles data fetching and component state in one place. It simplifies the lifecycle management of fetching data and rendering components.

Yes, with the introduction of React Server Components, Redwood aims to offer a transparent API that allows fetching data from any source, not just GraphQL. This makes it easier for developers who prefer not to use GraphQL.

You can get started with Redwood by visiting the official Redwood tutorial, which serves as a comprehensive course on full-stack development with Redwood. For the latest experimental features, you can also check the Redwood community forums.

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS

GraphQL Galaxy 2021

32 min

From GraphQL Zero to GraphQL Hero with RedwoodJS

Top Content

Tom Preston-Werner

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.

frameworks graphql redwoodjs builders and founders

RedwoodJS: The Full-Stack React App Framework of Your Dreams

React Summit Remote Edition 2021

43 min

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Top Content

Tom Preston-Werner

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

jamstack fullstack frameworks redwoodjs react full stack framework

Case Study: Building Accessible Reusable React Components at GitHub

React Summit 2024

29 min

Case Study: Building Accessible Reusable React Components at GitHub

Watch video: Case Study: Building Accessible Reusable React Components at GitHub

Siddharth Kshetrapal

Siddharth Kshetrapal

The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.

react components react accessibility

React Server Components in AI Applications

React Advanced 2024

17 min

React Server Components in AI Applications

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

Today we will discuss React server components with AI and how to build a better search experience using them. We will learn how to make a Next.js app AI-enabled using the Vercel AI SDK. The Vercel AI SDK's streamUI function with the GPT 4.0 model will be used to make suggestions interactive. We will explore the use of history and conversation in AI and how to continue the conversation and read the result. The concept of generative UI with the vector database will be introduced, along with querying the database for movies. We will process user queries and return movies based on them. The power of React server components in enhancing UI will be demonstrated. In summary, the Talk covers vector embeddings, natural language search, and generative UI.

react components artificial intelligence

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

React Summit 2022

17 min

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Top Content

Thomas Findlay

Findlay Web Tech

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

react components component library architecture programming concepts react composition react fiber

The Worlds Most Expensive React Component and How to Stop Writing It

React Advanced 2021

23 min

The Worlds Most Expensive React Component and How to Stop Writing It

Top Content

Michael Chan

Today's Talk discusses expensive React components and API design, with a focus on the cost of coordination and overcoming imposter syndrome. The speaker shares a story about a cat trying to fix salted coffee, highlighting the importance of finding simple solutions. The billion dollar component on ReactJS.org is examined as an example of an expensive component. Techniques for customizing messages, improving accessibility, and using polymorphic props are discussed. The Talk concludes by emphasizing the cost of communication and the need to evaluate if props and components are the right tools for the job.

react best practices react components

Workshops on related topic

Hands-on with AG Grid's React Data Grid

React Summit 2022

147 min

Hands-on with AG Grid's React Data Grid

Top Content

WorkshopFree

Sean Landsman

Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components

react components api development aggrid react react table

Practice TypeScript Techniques Building React Server Components App

TypeScript Congress 2023

131 min

Practice TypeScript Techniques Building React Server Components App

Workshop

Maurice de Beijer

Maurice de Beijer

In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.

During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types

Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.

Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.

react typescript react components react with typescript best practices

From Idea to Production: React Development with a Visual Twist

React Summit 2023

31 min

From Idea to Production: React Development with a Visual Twist

WorkshopFree

Omer Kenet

Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code.
Table of the contents: - Download & Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&A

react react components web development

Crash Course into TypeScript for content from headless CMS

React Summit 2022

98 min

Crash Course into TypeScript for content from headless CMS

WorkshopFree

Ondrej Polesny

In this workshop, I’ll first show you how to create a new project in a headless CMS, fill it with data, and use the content in your project. Then, we’ll spend the rest of time in code, we will:- Generate strongly typed models and structure for the fetched content.- Use the content in components- Resolve content from rich text fields into React components- Touch on deployment pipelines and possibilities for discovering content-related issues before hitting production
You will learn:- How to work with content from headless CMS- How content model can be leveraged to generate TS types and what benefits it brings to your project- How not to use string literals for content in code anymore- How to do rich text resolution into React components- How to minimize or avoid content-related issues before hitting production

typescript react components