こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！ なぜbluesky-social/social-appを参考にするのか 多くのユーザーがいるサービスで、継続的に開発されている 実際に多くのユーザーがWebやアプリで利用しているサービスであり、それがOSSで公開されているのは凄いですよね。 ストアやWebで公開されているアプリケーションなので、実際にアプリをインストールして触りながら、この部分のコードはどうなっているんだろう？と確認することもできるのもキャッチアップしやすい点かと思います。 技術スタックがモダンな作りになっている Expoを利用しており、Webに関し
Claude Codeによる開発体験の変化 みなさんClaude Code使っていますか？ Clineやそのフォーク、Cursorなどが群雄割拠していたところからここ1ヶ月くらいで急激に話題の中心に躍り出たClaude Codeですが、便利なツールという評価を超えて、これまでの開発フローを一新しうる可能性を持ったツールだと思います。 特に、与えられたタスクを分解して様々なツールを使いながら順に機能を実装していく様子は経験を積んだエンジニアのやり方そのものです。 CLIベースのツールであることの利点として動かすコンピューターを選ばないので、公式のGitHub Actions連携をすれば手元に開発環境がなくてもIssueやPull Requestのチャットで会話をしながら開発を進めることまでできてしまいます。 Claude Codeとアプリ開発の相性 そうはいっても、Claude Codeをう
セットアップ yarn add react-dom react-native-web yarn add -D babel-plugin-react-native-web publicディレクトリを作り、中にファイルを追加 index.htmlを作る index.web.jsを作る webpack.config.jsを作る package.jsonにスクリプトを追加 "web": "webpack serve --mode=development --config ./public/webpack.config.js” public/webpack.config.jsのサンプル const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = r
As a newbie in React Native I found myself time after time going back to React Native layout docs, struggling to understand and master the difference between all the different props. justify vs align, relative vs absolute, items vs content, It was all very confusing… 😟 So I prepared this visual guide with all of the important props, including some playgrounds where you can play around with them.
A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with
React & React Native Components Library & PatternsComprehensive React and React Native component library for building modern, high-performance web and mobile apps. Copy-paste UI components library & patterns crafted with Tailwind CSS (NativeWind) May 15, 2023The Power of Positive ThinkingDiscover how the power of positive thinking can transform your life, boost your confidence, and help you overco
この記事はReact Native 全部俺 Advent Calendar 2日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。 Expoとは何か、どう使うべきか 今回はReact Nativeアプリを開発する際に避けては通れないExpoについて解説します。特に過去にReact Nativeを使っていた人はExpoについて「あくまでシンプルなアプリを作るときに使うものであって、複雑なケースには向かない」と思っている人も多いと思うので、Expoの現在の機能と立ち位置について詳しく説明したいと思います。 ExpoはReact Nativeとどう違うのか ExpoはReact Nativeの
Expoに関する詳しい内容は2日目の記事で紹介します。 仕組み React NativeはReactのコンポーネントをネイティブのプラットフォームコンポーネントにブリッジします。例えば以下のようなReactコードは import { View, Text } from 'react-native'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { f
なんだか最近React Nativeに関する投稿が増えている気がしますね。 筆者も本投稿を準備していたところ、先に投稿が増えてきたので二番煎じ感が否めませんが、少し俯瞰的な整理としてご覧いただければと思います。 React Native界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥 具体的にどのように盛り上がっているのか、 React Conf 2024のKeynote（Day 2） がYoutubeで公開されており、非常に分かりやすくまとまっていました。 本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。 ※React Conf 2024は5/15・16に開催されたものです 動画前半： React Nativeがいかに盛り上がってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
