From Idea to Production: React Development with a Visual Twist

Rate this content
Bookmark

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

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

FAQ

Omer, who has been with Wix for over four years, leads the Codex product team, which is part of the Core 3 team at Wix.

The Core 3 team at Wix develops two main products: Stylable, an open-source CSS preprocessor, and Codex, a visual IDE for React.

Codex supports various styling solutions including CSS, CSS modules, Sass, Sass modules, Stylable, and Tailwind. It allows you to directly edit styles in a visual environment while keeping the code clean and manageable.

Yes, Codex can be integrated with existing projects. You can open local projects from your machine, clone projects from Git, or start new projects using Codex templates.

To run Codex, you need to have Git and Node.js installed on your system. Codex is available for different operating systems and requires a Wix account for login.

Codex helps ensure code safety and maintainability by allowing you to visually edit components while reflecting changes in real-time code. It also provides tools for checking styles, managing Git, and creating documentation to facilitate collaboration.

Stylable is an open-source CSS preprocessor developed by the Core 3 team at Wix. It is one of the styling solutions supported by Codex, allowing developers to use advanced CSS features in their projects.

To get started with Codex, visit codex.com, download the application for your operating system, install it, and log in using your Wix account. Make sure you have Git and Node.js installed on your system.

Codex is a visual IDE for React that allows you to write and manage code while providing a visual approach to frontend development. It supports React components written in TypeScript and various styling solutions like CSS, Sass, Stylable, and Tailwind.

The purpose of Codex is to streamline the frontend development process by integrating code writing and visual design. It aims to simplify collaboration among developers, designers, and product managers by providing a unified environment.

Omer Kenet
Omer Kenet
31 min
29 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Wix has a cool team working on developer toolings, with main products being Stylable and CodeX. CodeX is a visual IDE for React that helps with code understanding, changing, and validation. It supports CSS, CSS modules, Sass, Sass models, and Styleable for styling. Codex allows for easy navigation, editing, and rendering of components, and can connect to external data sources. It can be installed by downloading from codex.com and requires a Wix account.

1. Introduction to CodeX and Wix

Short description:

Hi everyone! I'm Omer, the product lead for Codex. We have a cool team at Wix working on developer toolings. Our main products are Stylable and CodeX. Wix, founded in 2006, is an industry leader in web creation and business management. Today, we'll introduce CodeX, guide you through installation and usage, and value your feedback.

So, hi everyone. Super nice to be here. Starting with a quick introduction. I'm Omer, I lead the product of Codex from core three team. We're a cool team in Wix. I'll tell you a bit about in a second. Joined Wix over four years ago. Been working on Codex product more or less the whole time. Previously cofounded Rapid UI, which is a product that was in the very similar areas of Codex of front end tooling, working visually with code but still writing code at the same time. You'll see it in a second. More than eight years around front end tooling and coding through visual experiences.

Here with me today are some of our awesome team members of Core 3 to help around during the hands‑on session. Our company is working mainly ‑‑ our team is working mainly on developer toolings, tools for developing teams. We're a very technical team in Wix. And so does our products. We have two main products. One of them is Stylable. It's an open source CSS preprocessor. We're going to tell you a bit about it today. And CodeX, which is what we're here to talk about. You can see that we have someone joining us.

A bit about Wix. For those who don't know, Wix was founded in 2006 to make it possible for everyone to succeed online. Started with like just create a visual presence and later on added many ways to manage business and create whatever you need basically to have an online presence. Industry leaders in web creation and business management. 230 million users worldwide and we're spread around 17 countries. So we'll be showing you the brand new offering of Wix for development teams.

So today's goals, we're going to introduce CodeX and our visual approach for frontend. You're going to install the product. You're going to learn how to use it and hopefully enjoy doing it. We really appreciate your feedback.

2. Introduction to CodeX and the Development Process

Short description:

We'd love to hear your thoughts and help you implement CodeX. Today, we'll introduce CodeX, do a quick demo, and answer your questions. Later, we'll have a hands-on challenge. If interested, we can share more about building CodeX and the development process. It starts with a product need, followed by design and actual implementation using IDEs.

We'd love to hear whatever you have to say. And of course, we'd be happy to help you implement CodeX for your team and your needs if you're interested in at the end.

So this is what we're going to do today. We're going to start with a quick intro about the CodeX vision and what are we doing. I'm going to do a quick demo, show you how the product works, give you an option to ask questions. We'll be here answering. And we're going to take a few minutes break, come back and start doing real hands-on challenge at the end.

If you'll be interested, we can tell you a bit more about how we build CodeX. A bit about under the hood.

So, let's understand the playing field. The development process as we know it today and I'm going to start with a bit of intro to why we're building what we're building. So, we're all here working on front-end, right? Most of us are creating visual outputs for whatever we need to do. And usually we need to collaborate. We're working with multiple personas to deliver at the end of the day, something visual for our users.

So, it usually starts with a product need. Right? Something that we need to build. A business need or a product request. Something that we know that we need to build. Usually starts with the product manager or the product persona in the team that is in charge of like kind of figuring out that we need to build this thing.

Later on in the process, once we figure out what we need to build, usually we start playing around with how do we want it to behave, how do we want it to look like. This is where the design comes in. Right? We have the product requests and later on comes the design, kind of trying to figure it out hopefully or ideally together. Cracking it out. Usually in separated environments they have separated kind of concerns during their work. And this is the point in time where the design tool comes in.

And, of course, what we all know and love, step number three, we have to actually make the thing. So we have the product need and we kind of figure it out together, we start designing it, we crack the concept. But at the end of the day we need to actually make it work. We need it to run in real environments, write real code. So that's usually environment number three, our IDEs where we manage our code.

Watch more workshops on topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Next.js for React.js Developers
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js for React.js Developers
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions.
By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.
Concurrent Rendering Adventures in React 18
React Advanced 2021React Advanced 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.

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

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.