reactjs-id / meetup Goto Github PK

What is the title of your talk?

The title of your talk

How long will your talk be?

The duration of your talk (in minutes).

Brief description

Brief description that will fit on a tweet (no more than 300 characters).

Detailed Overview

An extended overview of your talk.

What is the title of your talk?

Building an Interactive Virtual Friend with React JS

How long will your talk be?

30-40 Mins

Brief description

Join us in building an interactive virtual friend with React JS! This session will show you how to implement the Gemini model for language processing, integrating it seamlessly with React JS to create a responsive and engaging user experience.

Detailed Overview

Discover how to create an interactive virtual friend using React JS. I will show you the process of integrating the powerful Gemini language model, enabling advanced conversational capabilities without starting from scratch.

Learn how to seamlessly connect the Gemini model with React JS, providing a responsive, engaging user interface to give the best experience for people to feel have a real friend. Whether you're looking to enhance a project or explore AI integration, this session introduce you to the knowledge to implement and customize LLM with a unique use case; virtual friend with Gemini.

I'll be doing live coding to demonstrate the implementation.

Introduction

1. What is Gemini?
2. Simple Prompting Techniques
3. Backend design overview
4. Give the overview of Gemini implementation using Express js

Show Time

1. API integration into React
2. Styling and Responsiveness
3. Live Demo

What is the title of your talk?

Demo: https://github.com/mhaidarhanif/demo-react-form

• "The Complete Guide to React Form Handling" 📖🙌
• "How to Handle Your Form Data in React" 📝👌
• "Kupas Tuntas Main Data Form di React" 🔪💪
  • "Dalam 1 SKS (Suka-Suka Saya)"
  • Voted by @zainfathoni 😂

Request to ask @r17x @resir014 @iamyuu to suggest more ideas. 🙏

How long will your talk be?

• 60 minutes - Demo, live coding, and pair programming with @zainfathoni @r17x
• 90 minutes - Including QA (question/answer)
• 120 minutes - Including in-depth discussion
• 120+ minutes - Including the super party mode

Brief description

English:

Let's end the insanity of form data handling in React. This is "The Complete Guide to React Form Handling". 😎

Indonesian:

Mari kita akhiri bencana mengatur data form di React. Ini adalah "Kupas Tuntas Main Data Form di React". 😎

Issue: #4
Repo: https://github.com/mhaidarhanif/demo-react-form

Detailed Overview

Problems

Handling form field data in React is sometimes confusing and the official docs are not really helping much. 🤷

• How to handle simple form fields?
• How to handle multiple complex form fields?
• How to submit the data through the network?
• How to implement the search form?
• How to submit and then navigate the pages?
• How to do autocomplete fields from the native browser and query params?
• How to implement the location/place search field?
• How to test if it works?
• How to do it better?
• How to do it faster?
• How to do it stronger?

Solutions

• Let it be like hell 😈
• First principles thinking
  • Identify and define your current assumptions
  • Breakdown the problem into its fundamental principles
  • Create new solutions from scratch
• Understand the native HTML form elements' behavior
  • form
  • input
  • label
  • select
  • textarea
  • button
  • fieldset
  • legend
  • datalist
  • output
  • option
  • optgroup
• Use TypeScript for safety
• Use an uncontrolled component approach with native form behavior 🧘
• Use a controlled component approach with a state 🏋️
• useState
• useReducer
• Patterns
  • Optimistic UI
• External library for submitting form data
  • React Hook Form (RHF)
    • Smart Form Component
  • Formik
  • React Router v6 to handle form
  • Tanstack React Form
  • Other alternatives
• External library for validating form data
  • Yup
  • Zod
  • Other resolvers
• External library for handling form fields with the UI
  • Downshift for autocomplete/Combobox or select dropdown components
  • Headless UI
  • Radix UI
  • Reach UI
• Specific cases
  • Client-side only
  • Framework-specific with server-side
    • Next.js
    • Remix
  • Network request
    • Subscribe to Newsletter
    • Authentication
  • Rich Text Editor
    • Tiptap
    • Lexical
    • Draft.js
  • Maps API
    • use-places-autocomplete
    • react-mapbox-autocomplete and react-map-gl
• Other suggestions are welcome

References

• https://jamesclear.com/first-principles
• https://fs.blog/first-principles
• https://reactjs.org/docs/forms.html
• https://swyx.io/no-controlled-forms
• https://github.com/react-hook-form/resolvers
• https://remix.run/docs/en/v1/guides/data-writes
• https://github.com/react-hook-form/resolvers
• https://web.facebook.com/groups/442974152553174/posts/2172423456274893
• https://twitter.com/zainfathoni/status/1547901484196511746

Discussions

• https://web.facebook.com/groups/442974152553174/posts/2177357949114777

What is the title of your talk?

Testing Practices in WargaBantuWarga

How long will your talk be?

60 minutes.

Brief description

• When to test?
• What should you test?
• Which types of test should you prioritize?
• How to test reliably?
• How to get the best bucks on your tests?

Detailed Overview

TBD (waiting for community members' inputs)

What is the title of your talk?

Effective React Development using Nx

How long will your talk be?

45 - 60 Minutes.

Brief description

Nx is a fast, smart, and extensible build system that helps teams develop
applications at any scale. It integrates with modern frameworks and libraries. It provides computation caching and smart rebuilds, as well as code generators. In this talk, we will explore how effectively scale React project using Nx.

Detailed Overview

Introduction

If you’ve ever worked at a company with more than one team, chances are
you’ve had to deal with some challenges when it comes to change management.

In a typical work setting, development teams are divided by domain or technology. For example, one team building the UI in React, and another one building the API in Express.

These teams usually have their own code repositories, so
changes to the software as a whole require juggling multiple repositories.

A few problems that arise from a multi-repository (often called “Polyrepo”)
setup include:
• Lack of collaboration because sharing code is hard and expensive.
• Lack of consistency in linting, testing, and release processes.
• Lack of developer mobility between projects because access may be unavailable or the development experience varies too greatly.
• Difficulty in coordinating changes across repositories.
• Late discovery of bugs because they can only occur at the point of integration rather than when code is changed.

Monorepo to the rescue!

A lot of successful organizations such as Google, Facebook, and Microsoft–and
also large open-source projects such as Babel, Jest, and React–are all using the
monorepo approach to software development.

What is a monorepo though? A monorepo is a single repository containing
multiple distinct projects, where we don’t just have code collocation, but well-defined relationships among these projects.

As you will see in this talk, the monorepo approach - when done correctly - can save developers a lot of headaches and wasted time.

Still, there are quite some misconceptions when it comes to monorepos.
• Monorepos are monolithic and not for building microservices and microfrontends1
• Continuous integration (CI) is slow
• “Everyone can change my code”
• Teams losing their autonomy

Scheduled

Mari kita bikin ONAR lagi!
Kali ini insya Allah kita akan membahas hasil survei State of CSS 2022.

Sampai jumpa besok Sabtu, jam 10:00 WIB di YouTube ya! 😉

https://s.reactjs.id/obrolan-2

What is the title of your talk?

The title of your talk

How long will your talk be?

The duration of your talk (in minutes).

Brief description

Brief description that will fit on a tweet (no more than 300 characters).

Detailed Overview

An extended overview of your talk.