Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Yesterday at RNCK I demoed our new React Native IDE project we developed Software Mansion. Check out the thread for details on each specific feature from the clip

333,256 görüntüleme • 2 yıl önce •via X (Twitter)

10 Yorum

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

1/ Our project is a Code extension that can launch RN projects and display iOS/Android emulator side-by-side. The build is “isolated” meaning it spins its own metro/debug session/etc taking away all the tooling complexity you need to learn when starting with React Native.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

2/ The example project I’m using is a Airbnb clone by @schlimmson (thanks for publishing such a great project!). The app uses @expo router and the IDE integrates with it by showing you a URL bar that you can use to jump between screens and navigate back in the history.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

3/ Our extension has an integrated inspector button that makes it possible to jump directly from the simulator to your component’s code.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

4/ When you use console from your application’s code, it outputs to the built-in VSCode console. It comes bundled with logs filtering functionality and displays links back to the source code with the log statement.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

5/ Without doing anything extra, the simulator/emulator session is equipped with an integrated debugger that stops at breakpoints. Uncaught exceptions instead of displaying red box will navigate you to the file and line responsible for an error.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

6/ We developed a new React Native Preview package that allows you to define individual component previews in your code. With a click-to-open link from the editor, the component renders in isolation allowing you to iterate on it without being distracted by the rest of your app.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

7/ Device settings are available right in the preview window. You can adjust text size or light/dark mode. This works for both the component previews and for the main application project.

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

8/ Finally, the Editor Follow functionality tries to figure out the screen you want to look at when making changes in your project (based on edition/inspect history). It automatically moves between the screens when you switch between different files in your project.

Marc profil fotoğrafı
Marc2 yıl önce

@swmansion truly a gamechanger, nice work Krzysztof! 🤯😍

Krzysztof Magiera profil fotoğrafı
Krzysztof Magiera2 yıl önce

@swmansion Thanks 🙌

Benzer Videolar