├── Chapter02 ├── builtin-html-tags │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── describing-ui-structures │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── dynamic-property-values-and-text │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── encapsulating-html │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── handling-events │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── hello-jsx │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── html-tag-conventions │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── jsx-fragments │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── WithFragments.jsx │ │ ├── WithoutFragments.jsx │ │ └── main.jsx │ └── vite.config.js ├── mapping-collections-to-elements │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── main.jsx │ └── vite.config.js ├── namespaced-components │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyComponent.jsx │ │ └── main.jsx │ └── vite.config.js └── nested-elements │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── MyButton.jsx │ ├── MySection.jsx │ └── main.jsx │ └── vite.config.js ├── Chapter03 ├── cancelling-requests-and-resetting-state │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.jsx │ │ ├── Timer.jsx │ │ └── main.jsx │ └── vite.config.js ├── fetching-component-data │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.jsx │ │ └── main.jsx │ └── vite.config.js ├── initial-state-values │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.jsx │ │ └── main.jsx │ └── vite.config.js ├── optimizing-side-effect-actions │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.jsx │ │ └── main.jsx │ └── vite.config.js ├── passing-property-values │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyButton.jsx │ │ ├── MyComponent.jsx │ │ ├── MyList.jsx │ │ └── main.jsx │ └── vite.config.js ├── updating-state-values │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.jsx │ │ └── main.jsx │ └── vite.config.js └── what-are-component-properties │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── MyComponent.jsx │ └── main.jsx │ └── vite.config.js ├── Chapter04 ├── declaring-handler-functions │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyButton.jsx │ │ └── main.jsx │ └── vite.config.js ├── event-pooling │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyButton.jsx │ │ └── main.jsx │ └── vite.config.js ├── inline-event-handlers │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyButton.jsx │ │ └── main.jsx │ └── vite.config.js └── multiple-event-handlers │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── MyInput.jsx │ └── main.jsx │ └── vite.config.js ├── Chapter05 ├── add-article-component │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── AddArticle.jsx │ │ ├── ArticleItem.jsx │ │ ├── ArticleList.jsx │ │ ├── MyFeature.jsx │ │ └── main.jsx │ └── vite.config.js ├── article-item-component │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── ArticleItem.jsx │ │ ├── ArticleList.jsx │ │ ├── MyFeature.jsx │ │ └── main.jsx │ └── vite.config.js ├── article-list-component │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── ArticleList.jsx │ │ ├── MyFeature.jsx │ │ └── main.jsx │ └── vite.config.js ├── monolithic-components │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyFeature.jsx │ │ └── main.jsx │ └── vite.config.js └── render-props │ ├── .eslintrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── AddArticle.jsx │ ├── ArticleItem.jsx │ ├── ArticleList.jsx │ ├── MyFeature.jsx │ └── main.jsx │ └── vite.config.js ├── Chapter06 ├── setting-up-typescript │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── using-typescript-in-react │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.tsx │ ├── Button.tsx │ ├── Counter.tsx │ ├── Greeting.tsx │ ├── InputField.tsx │ ├── InputWithRef.tsx │ ├── ThemeProvider.tsx │ ├── UserCard.tsx │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── Chapter07 ├── basic-linking │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── First.tsx │ │ ├── Layout.tsx │ │ ├── Second.tsx │ │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── decoupling-route-declarations │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── Layout.tsx │ │ ├── Redirect.tsx │ │ ├── main.tsx │ │ ├── one │ │ │ ├── First.tsx │ │ │ ├── Second.tsx │ │ │ └── index.tsx │ │ └── two │ │ │ ├── First.tsx │ │ │ ├── Second.tsx │ │ │ └── index.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── hello-route │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyComponent.tsx │ │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── query-parameters │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── MyComponent.tsx │ │ ├── Users.tsx │ │ ├── UsersContainer.tsx │ │ ├── api.ts │ │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── resource-ids-in-routes │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── User.tsx │ │ ├── UserContainer.tsx │ │ ├── Users.tsx │ │ ├── UsersContainer.tsx │ │ ├── api.ts │ │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── url-and-query-parameters │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.tsx │ ├── Echo.tsx │ └── main.tsx │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── Chapter08 ├── dynamic-imports-and-bundles │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── MyComponent.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── lazy-pages-and-routes │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── First.tsx │ │ ├── Second.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── making-components-lazy │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── MyComponent.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── top-level-suspense-component │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── MyFeature.tsx │ │ ├── MyPage.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── when-to-avoid-lazy-components │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── First │ │ │ ├── One.tsx │ │ │ ├── Three.tsx │ │ │ ├── Two.tsx │ │ │ └── index.tsx │ │ ├── Second │ │ │ ├── Five.tsx │ │ │ ├── Four.tsx │ │ │ ├── Six.tsx │ │ │ └── index.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── working-with-spinner-fallbacks │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.tsx │ ├── MyFeature.tsx │ ├── MyPage.tsx │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── Chapter09 ├── building-responsive-grid-layouts │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── checkboxes-and-radio-buttons │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── customizing-themes │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── making-styles │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── navigating-with-drawers │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── First.tsx │ │ ├── Second.tsx │ │ ├── Third.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── navigating-with-tabs │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── First.tsx │ │ ├── Second.tsx │ │ ├── Third.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── text-inputs-and-select-inputs │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── MySelect.tsx │ │ ├── MyTextInput.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── using-containers │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── working-with-buttons │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.tsx │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── Chapter10 ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── AsyncUpdates.tsx │ ├── BatchingUpdates.tsx │ ├── PrioritizingUpdates.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── Chapter11 ├── using-axios │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── GitHubUser.ts │ │ ├── UserInfo.tsx │ │ ├── api.ts │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── using-fetch-api │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── GitHubUser.ts │ │ ├── UserInfo.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── using-graphql │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── GitHubUser.ts │ │ ├── UserInfo.tsx │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── using-react-query │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.tsx │ ├── GitHubUser.ts │ ├── UserInfo.tsx │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── Chapter13 ├── react-server-components │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── next.svg │ │ └── vercel.svg │ ├── src │ │ ├── app │ │ │ ├── about │ │ │ │ ├── loading.tsx │ │ │ │ └── page.tsx │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── posts │ │ │ │ ├── [post] │ │ │ │ └── page.tsx │ │ │ │ └── page.tsx │ │ └── components │ │ │ └── Counter.tsx │ ├── tailwind.config.ts │ └── tsconfig.json └── using-nextjs │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── favicon.ico │ ├── next.svg │ └── vercel.svg │ ├── src │ ├── pages │ │ ├── _app.tsx │ │ ├── _document.tsx │ │ ├── about.tsx │ │ ├── api │ │ │ └── hello.ts │ │ ├── index.tsx │ │ └── posts │ │ │ ├── [post].tsx │ │ │ └── index.tsx │ └── styles │ │ └── globals.css │ ├── tailwind.config.ts │ └── tsconfig.json ├── Chapter14 └── testing-reactjs │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.test.tsx │ ├── App.tsx │ ├── ClassCheck.test.tsx │ ├── ClassCheck.tsx │ ├── Input.test.tsx │ ├── Input.tsx │ ├── basic.test.ts │ ├── basic.ts │ ├── main.tsx │ ├── useCounter.test.ts │ ├── useCounter.ts │ └── vite-env.d.ts │ ├── tests │ └── setup.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── Chapter17 └── my-project │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ └── tsconfig.json ├── Chapter18 ├── flexible-grids │ ├── .gitignore │ ├── App.tsx │ ├── Box.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── styles.ts │ ├── tsconfig.json │ └── yarn.lock ├── flexible-rows-and-columns │ ├── .gitignore │ ├── App.tsx │ ├── Box.tsx │ ├── Column.tsx │ ├── Row.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── styles.ts │ ├── tsconfig.json │ └── yarn.lock ├── flexible-rows │ ├── .gitignore │ ├── App.tsx │ ├── Box.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── styles.ts │ ├── tsconfig.json │ └── yarn.lock ├── improved-three-column-layout │ ├── .gitignore │ ├── App.tsx │ ├── Box.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── styles.ts │ ├── tsconfig.json │ └── yarn.lock ├── stylesheets │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── styles.ts │ ├── tsconfig.json │ └── yarn.lock └── three-column-layout │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── styles.ts │ ├── tsconfig.json │ └── yarn.lock ├── Chapter19 ├── file-based-router │ ├── .gitignore │ ├── app.json │ ├── app │ │ ├── _layout.tsx │ │ ├── index.tsx │ │ └── settings.tsx │ ├── assets │ │ ├── fonts │ │ │ └── SpaceMono-Regular.ttf │ │ └── images │ │ │ ├── adaptive-icon.png │ │ │ ├── favicon.png │ │ │ ├── icon.png │ │ │ └── splash.png │ ├── babel.config.js │ ├── components │ │ ├── EditScreenInfo.tsx │ │ ├── ExternalLink.tsx │ │ ├── StyledText.tsx │ │ ├── Themed.tsx │ │ └── __tests__ │ │ │ └── StyledText-test.js │ ├── constants │ │ └── Colors.ts │ ├── metro.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── navigation-basics │ ├── .gitignore │ ├── App.tsx │ ├── Home.tsx │ ├── Settings.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── router.ts │ ├── styles.ts │ └── tsconfig.json ├── navigation-header │ ├── .gitignore │ ├── App.tsx │ ├── Details.tsx │ ├── Home.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── router.ts │ ├── styles.ts │ └── tsconfig.json ├── route-parameters │ ├── .gitignore │ ├── App.tsx │ ├── Details.tsx │ ├── Home.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── router.ts │ ├── styles.ts │ └── tsconfig.json └── tab-navigation │ ├── .gitignore │ ├── App.tsx │ ├── Home.tsx │ ├── News.tsx │ ├── Settings.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── router.ts │ ├── styles.ts │ └── tsconfig.json ├── Chapter20 ├── fetching-list-data │ ├── .gitignore │ ├── App.tsx │ ├── List.tsx │ ├── ListContainer.tsx │ ├── ListControls.tsx │ ├── ListFilter.tsx │ ├── ListSort.tsx │ ├── api.ts │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── lazy-list-loading │ ├── .gitignore │ ├── App.tsx │ ├── List.tsx │ ├── ListContainer.tsx │ ├── api.ts │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.js │ └── tsconfig.json ├── rendering-data-collections │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── sorting-and-filtering-lists │ ├── .gitignore │ ├── App.tsx │ ├── List.tsx │ ├── ListContainer.tsx │ ├── ListControls.tsx │ ├── ListFilter.tsx │ ├── ListSort.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── Chapter21 ├── plotting-overlays │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── plotting-points │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── whats-around-me │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── where-am-i │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── Chapter22 ├── collecting-date-time-input │ ├── .gitignore │ ├── App.tsx │ ├── DatePicker.android.tsx │ ├── DatePicker.ios.tsx │ ├── DatePickerProps.ts │ ├── TimePicker.android.tsx │ ├── TimePicker.ios.tsx │ ├── TimePickerProps.ts │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── collecting-text-inputs │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── selecting-options │ ├── .gitignore │ ├── App.tsx │ ├── Select.android.tsx │ ├── Select.ios.tsx │ ├── SelectProps.ts │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── toggling-on-and-off │ ├── .gitignore │ ├── App.tsx │ ├── Switch.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── Chapter23 ├── finger-scrolling │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── giving-touch-feedback │ ├── .gitignore │ ├── App.tsx │ ├── Button.tsx │ ├── PressableButton.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── swipable-and-cancellable │ ├── .gitignore │ ├── App.tsx │ ├── Swipeable.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── Chapter24 ├── indicating-progress │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── measuring-progress │ ├── .gitignore │ ├── App.tsx │ ├── ProgressBar.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── navigation-indicators │ ├── .gitignore │ ├── App.tsx │ ├── First.tsx │ ├── Second.tsx │ ├── Third.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── loading.tsx │ ├── package-lock.json │ ├── package.json │ ├── router.ts │ ├── styles.ts │ └── tsconfig.json └── step-progress-new │ ├── .gitignore │ ├── App.tsx │ ├── First.tsx │ ├── Fourth.tsx │ ├── ProgressBar.tsx │ ├── Second.tsx │ ├── Third.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── router.ts │ ├── styles.ts │ └── tsconfig.json ├── Chapter25 ├── activity-modals │ ├── .gitignore │ ├── Activity.tsx │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── error-confirmation │ ├── .gitignore │ ├── App.tsx │ ├── ErrorModal.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── passive-notifications │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.js │ └── tsconfig.json └── success-confirmation │ ├── .gitignore │ ├── App.tsx │ ├── ConfirmationModal.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── Chapter26 ├── animate-styling │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── layout-animation │ ├── .gitignore │ ├── App.tsx │ ├── TodoItem.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── Chapter27 ├── lazy-loading │ ├── .gitignore │ ├── App.tsx │ ├── Button.tsx │ ├── LazyImage.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ ├── placeholder.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── loading-images │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ ├── relay.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── rendering-icons │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── icon-names.ts │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── resizing-images │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── flux.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.js │ └── tsconfig.json ├── Chapter28 ├── network-state │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json ├── storing-data │ ├── .gitignore │ ├── App.tsx │ ├── Button.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── styles.ts │ └── tsconfig.json └── synchronizing-data │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── store.ts │ ├── styles.ts │ └── tsconfig.json ├── Chapter29 ├── application-containers │ ├── .gitignore │ ├── .tamagui │ │ └── tamagui.config.json │ ├── .vscode │ │ └── settings.json │ ├── App.tsx │ ├── AppContainer.tsx │ ├── ScreenContainer.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── tamagui.config.ts │ └── tsconfig.json ├── collecting-input │ ├── .gitignore │ ├── .tamagui │ │ └── tamagui.config.json │ ├── .vscode │ │ └── settings.json │ ├── App.tsx │ ├── AppContainer.tsx │ ├── ScreenContainer.tsx │ ├── SelectDemo.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── tamagui.config.ts │ └── tsconfig.json ├── headers-footers-navigation │ ├── .gitignore │ ├── .tamagui │ │ └── tamagui.config.json │ ├── .vscode │ │ └── settings.json │ ├── App.tsx │ ├── AppContainer.tsx │ ├── FooterButton.tsx │ ├── ScreenContainer.tsx │ ├── app.json │ ├── assets │ │ ├── adaptive-icon.png │ │ ├── favicon.png │ │ ├── icon.png │ │ └── splash.png │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── tamagui.config.ts │ └── tsconfig.json └── using-layout-components │ ├── .gitignore │ ├── .tamagui │ └── tamagui.config.json │ ├── .vscode │ └── settings.json │ ├── App.tsx │ ├── AppContainer.tsx │ ├── CardItem.tsx │ ├── ScreenContainer.tsx │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── package.json │ ├── tamagui.config.ts │ └── tsconfig.json ├── LICENSE └── README.md /Chapter02/builtin-html-tags/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter02/builtin-html-tags/src/main.jsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | 3 | const root = ReactDOM.createRoot(document.getElementById("root")); 4 | 5 | root.render( 6 |
7 | ; 10 | }; 11 | 12 | export default Button; 13 | -------------------------------------------------------------------------------- /Chapter06/using-typescript-in-react/src/Greeting.tsx: -------------------------------------------------------------------------------- 1 | type GreetingProps = { 2 | name: string; 3 | }; 4 | 5 | const Greeting = ({ name }: GreetingProps) => { 6 | return

Hello, {name}!

; 7 | }; 8 | 9 | export default Greeting; 10 | -------------------------------------------------------------------------------- /Chapter06/using-typescript-in-react/src/UserCard.tsx: -------------------------------------------------------------------------------- 1 | type UserProps = { 2 | user: { 3 | name: string; 4 | email: string; 5 | }; 6 | }; 7 | 8 | const UserCard = ({ user }: UserProps) => { 9 | return ( 10 |
11 |

{user.name}

12 |

{user.email}

13 |
14 | ); 15 | }; 16 | 17 | export default UserCard; 18 | -------------------------------------------------------------------------------- /Chapter06/using-typescript-in-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /Chapter06/using-typescript-in-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter06/using-typescript-in-react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter06/using-typescript-in-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter07/basic-linking/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter07/basic-linking/src/First.tsx: -------------------------------------------------------------------------------- 1 | function First() { 2 | return

First

; 3 | } 4 | 5 | export default First; 6 | -------------------------------------------------------------------------------- /Chapter07/basic-linking/src/Second.tsx: -------------------------------------------------------------------------------- 1 | function First() { 2 | return

Second

; 3 | } 4 | 5 | export default First; 6 | -------------------------------------------------------------------------------- /Chapter07/basic-linking/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | ReactDOM.createRoot(document.getElementById("root")!).render(); 5 | -------------------------------------------------------------------------------- /Chapter07/basic-linking/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/basic-linking/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { App } from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/src/one/First.tsx: -------------------------------------------------------------------------------- 1 | export default function First() { 2 | return

Feature 1, page 1

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/src/one/Second.tsx: -------------------------------------------------------------------------------- 1 | export default function Second() { 2 | return

Feature 1, page 2

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/src/two/First.tsx: -------------------------------------------------------------------------------- 1 | export default function First() { 2 | return

Feature 2, page 1

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/src/two/Second.tsx: -------------------------------------------------------------------------------- 1 | export default function Second() { 2 | return

Feature 2, page 2

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/decoupling-route-declarations/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter07/hello-route/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter07/hello-route/src/MyComponent.tsx: -------------------------------------------------------------------------------- 1 | export default function MyComponent() { 2 | return

Hello Route!

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter07/hello-route/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/hello-route/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter07/query-parameters/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter07/query-parameters/src/MyComponent.tsx: -------------------------------------------------------------------------------- 1 | export default function MyComponent() { 2 | return

Hello Route!

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter07/query-parameters/src/Users.tsx: -------------------------------------------------------------------------------- 1 | type UsersProps = { 2 | users: string[]; 3 | }; 4 | 5 | function Users({ users }: UsersProps) { 6 | return ( 7 |
    8 | {users.map((user) => ( 9 |
  • {user}
    • 10 | ))} 11 |
12 | ); 13 | } 14 | 15 | export default Users; 16 | -------------------------------------------------------------------------------- /Chapter07/query-parameters/src/api.ts: -------------------------------------------------------------------------------- 1 | const users = ["User 1", "User 2", "User 3"]; 2 | 3 | export type SortOrder = "asc" | "desc"; 4 | 5 | export function fetchUsers(order: SortOrder): Promise { 6 | return new Promise((resolve) => { 7 | order === "desc" ? resolve(users.slice(0).reverse()) : resolve(users); 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /Chapter07/query-parameters/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/query-parameters/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter07/resource-ids-in-routes/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter07/resource-ids-in-routes/src/User.tsx: -------------------------------------------------------------------------------- 1 | import { User } from "./api"; 2 | 3 | type UserDataProps = { 4 | user: User; 5 | }; 6 | 7 | function UserData({ user }: UserDataProps) { 8 | return ( 9 |
10 |

{user.first}

11 |

{user.last}

12 |

{user.age}

13 |
14 | ); 15 | } 16 | 17 | export default UserData; 18 | -------------------------------------------------------------------------------- /Chapter07/resource-ids-in-routes/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | ReactDOM.createRoot(document.getElementById("root")!).render(); 5 | -------------------------------------------------------------------------------- /Chapter07/resource-ids-in-routes/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/resource-ids-in-routes/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter07/url-and-query-parameters/src/Echo.tsx: -------------------------------------------------------------------------------- 1 | import { useParams, useSearchParams } from "react-router-dom"; 2 | 3 | function Echo() { 4 | const params = useParams(); 5 | const [searchParams] = useSearchParams(); 6 | 7 | return

{params.msg || searchParams.get("msg")}

; 8 | } 9 | 10 | export default Echo; 11 | -------------------------------------------------------------------------------- /Chapter07/url-and-query-parameters/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter07/url-and-query-parameters/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter08/dynamic-imports-and-bundles/src/MyComponent.tsx: -------------------------------------------------------------------------------- 1 | export default function MyComponent() { 2 | return

My Component

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/dynamic-imports-and-bundles/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = ReactDOM.createRoot(document.getElementById("root")!); 5 | 6 | root.render(); 7 | -------------------------------------------------------------------------------- /Chapter08/dynamic-imports-and-bundles/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/dynamic-imports-and-bundles/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/dynamic-imports-and-bundles/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/src/First.tsx: -------------------------------------------------------------------------------- 1 | export default function First() { 2 | return

First

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/src/Second.tsx: -------------------------------------------------------------------------------- 1 | export default function Second() { 2 | return

Second

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = ReactDOM.createRoot(document.getElementById("root")!); 5 | 6 | root.render(); 7 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/lazy-pages-and-routes/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const MyComponent = React.lazy(() => import("./MyComponent")); 4 | 5 | function App() { 6 | return ; 7 | } 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/src/MyComponent.tsx: -------------------------------------------------------------------------------- 1 | export default function MyComponent() { 2 | return

My Component

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = ReactDOM.createRoot(document.getElementById("root")!); 5 | 6 | root.render(); 7 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/making-components-lazy/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import MyPage from "./MyPage"; 3 | 4 | function App() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/src/MyFeature.tsx: -------------------------------------------------------------------------------- 1 | export default function MyFeature() { 2 | return

My Feature

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/src/MyPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const MyFeature = React.lazy(() => import("./MyFeature")); 4 | 5 | function MyPage() { 6 | return ( 7 | <> 8 |

My Page

9 | 10 | 11 | ); 12 | } 13 | 14 | export default MyPage; 15 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = ReactDOM.createRoot(document.getElementById("root")!); 5 | 6 | root.render(); 7 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/top-level-suspense-component/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/First/One.tsx: -------------------------------------------------------------------------------- 1 | export default function One() { 2 | return

One

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/First/Three.tsx: -------------------------------------------------------------------------------- 1 | export default function Three() { 2 | return

Three

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/First/Two.tsx: -------------------------------------------------------------------------------- 1 | export default function Two() { 2 | return

Two

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/First/index.tsx: -------------------------------------------------------------------------------- 1 | import One from "./One"; 2 | import Two from "./Two"; 3 | import Three from "./Three"; 4 | 5 | export default function First() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/Second/Five.tsx: -------------------------------------------------------------------------------- 1 | export default function Five() { 2 | return

Five

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/Second/Four.tsx: -------------------------------------------------------------------------------- 1 | export default function Four() { 2 | return

Four

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/Second/Six.tsx: -------------------------------------------------------------------------------- 1 | export default function Six() { 2 | return

Six

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/Second/index.tsx: -------------------------------------------------------------------------------- 1 | import Four from "./Four"; 2 | import Five from "./Five"; 3 | import Six from "./Six"; 4 | 5 | export default function Second() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = ReactDOM.createRoot(document.getElementById("root")!); 5 | 6 | root.render(); 7 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/when-to-avoid-lazy-components/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { FadeLoader } from "react-spinners"; 3 | import MyPage from "./MyPage"; 4 | 5 | function App() { 6 | return ( 7 | }> 8 | 9 | 10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/src/MyFeature.tsx: -------------------------------------------------------------------------------- 1 | export default function MyFeature() { 2 | return

My Feature

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/src/MyPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const MyFeature = React.lazy(() => import("./MyFeature")); 4 | 5 | function MyPage() { 6 | return ( 7 | <> 8 |

My Page

9 | 10 | 11 | ); 12 | } 13 | 14 | export default MyPage; 15 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = ReactDOM.createRoot(document.getElementById("root")!); 5 | 6 | root.render(); 7 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/working-with-spinner-fallbacks/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/building-responsive-grid-layouts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/building-responsive-grid-layouts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/building-responsive-grid-layouts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/building-responsive-grid-layouts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/checkboxes-and-radio-buttons/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/checkboxes-and-radio-buttons/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/checkboxes-and-radio-buttons/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/checkboxes-and-radio-buttons/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/customizing-themes/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/customizing-themes/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/customizing-themes/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/customizing-themes/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/customizing-themes/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/making-styles/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/making-styles/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/making-styles/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/making-styles/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/making-styles/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/src/First.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "@mui/material/Typography"; 2 | 3 | export default function First() { 4 | return First; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/src/Second.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "@mui/material/Typography"; 2 | 3 | export default function Second() { 4 | return Second; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/src/Third.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "@mui/material/Typography"; 2 | 3 | export default function Third() { 4 | return Third; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-drawers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/src/First.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "@mui/material/Typography"; 2 | 3 | export default function First() { 4 | return First; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/src/Second.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "@mui/material/Typography"; 2 | 3 | export default function Second() { 4 | return Second; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/src/Third.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "@mui/material/Typography"; 2 | 3 | export default function Third() { 4 | return Third; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/navigating-with-tabs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/text-inputs-and-select-inputs/src/App.tsx: -------------------------------------------------------------------------------- 1 | import FormGroup from "@mui/material/FormGroup"; 2 | import MyTextInput from "./MyTextInput"; 3 | import MySelect from "./MySelect"; 4 | 5 | export default function App() { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter09/text-inputs-and-select-inputs/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/text-inputs-and-select-inputs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/text-inputs-and-select-inputs/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/text-inputs-and-select-inputs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/using-containers/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/using-containers/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/using-containers/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/using-containers/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/using-containers/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter09/working-with-buttons/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter09/working-with-buttons/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom/client"; 2 | import App from "./App"; 3 | import "@fontsource/roboto/300.css"; 4 | import "@fontsource/roboto/400.css"; 5 | import "@fontsource/roboto/500.css"; 6 | import "@fontsource/roboto/700.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")!).render(); 9 | -------------------------------------------------------------------------------- /Chapter09/working-with-buttons/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter09/working-with-buttons/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/working-with-buttons/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter10/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter10/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /Chapter10/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter10/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter10/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter11/using-axios/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/using-axios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Using Tools 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter11/using-axios/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /Chapter11/using-axios/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/using-axios/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter11/using-axios/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter11/using-fetch-api/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/using-fetch-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fetch API 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter11/using-fetch-api/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /Chapter11/using-fetch-api/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/using-fetch-api/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter11/using-fetch-api/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter11/using-graphql/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/using-graphql/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Using Graphql 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter11/using-graphql/src/GitHubUser.ts: -------------------------------------------------------------------------------- 1 | export interface GitHubUser { 2 | login: string; 3 | id: number; 4 | avatarUrl: string; 5 | name: string; 6 | company: string | null; 7 | location: string | null; 8 | bio: string | null; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter11/using-graphql/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/using-graphql/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter11/using-graphql/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter11/using-react-query/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter11/using-react-query/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Chapter11/using-react-query/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter11/using-react-query/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: "https", 7 | hostname: "avatars.githubusercontent.com", 8 | port: "", 9 | pathname: "/**", 10 | }, 11 | ], 12 | }, 13 | }; 14 | 15 | export default nextConfig; 16 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/src/app/about/loading.tsx: -------------------------------------------------------------------------------- 1 | export default function Loading() { 2 | return ( 3 |
4 |

Loading

5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter13/react-server-components/src/app/favicon.ico -------------------------------------------------------------------------------- /Chapter13/react-server-components/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | h1 { 7 | @apply text-2xl font-bold; 8 | } 9 | 10 | a { 11 | @apply underline; 12 | } 13 | 14 | button { 15 | @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { Counter } from "@/components/Counter"; 2 | 3 | export default function Home() { 4 | return ( 5 |
6 |

Home Page

7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /Chapter13/react-server-components/src/components/Counter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | 5 | export const Counter = () => { 6 | const [count, setCount] = React.useState(0); 7 | 8 | return ; 9 | }; 10 | -------------------------------------------------------------------------------- /Chapter13/using-nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter13/using-nextjs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter13/using-nextjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter13/using-nextjs/public/favicon.ico -------------------------------------------------------------------------------- /Chapter13/using-nextjs/src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from "next/document"; 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter13/using-nextjs/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | export default function Home() { 2 | return ( 3 |
4 |

Home Page

5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /Chapter13/using-nextjs/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | h1 { 7 | @apply text-2xl font-bold; 8 | } 9 | 10 | a { 11 | @apply underline; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import { describe, it, expect } from "vitest"; 3 | import { App } from "./App"; 4 | 5 | describe("App", () => { 6 | it("should be in document", () => { 7 | render(); 8 | expect(screen.getByText("Hello world")).toBeInTheDocument(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/App.tsx: -------------------------------------------------------------------------------- 1 | export function App() { 2 | return

Hello world

; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/Input.tsx: -------------------------------------------------------------------------------- 1 | export function Input() { 2 | return ; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from 'vitest'; 2 | import { squared } from './basic'; 3 | 4 | test('Squared', () => { 5 | expect(squared(2)).toBe(4); 6 | expect(squared(3)).toBe(9); 7 | expect(squared(4)).toBe(16); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/basic.ts: -------------------------------------------------------------------------------- 1 | export const squared = (n: number) => n * n 2 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { App } from "./App.tsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/useCounter.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export function useCounter(initialValue: number = 0) { 4 | const [count, setCount] = useState(initialValue); 5 | 6 | const increment = () => setCount((c) => c + 1); 7 | const decrement = () => setCount((c) => c - 1); 8 | 9 | return { count, increment, decrement }; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers"; 3 | 4 | declare global { 5 | namespace jest { 6 | interface Matchers 7 | extends TestingLibraryMatchers {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/tests/setup.ts: -------------------------------------------------------------------------------- 1 | import { expect, afterEach } from "vitest"; 2 | import { cleanup } from "@testing-library/react"; 3 | import * as matchers from "@testing-library/jest-dom/matchers"; 4 | 5 | expect.extend(matchers); 6 | 7 | afterEach(() => { 8 | cleanup(); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /Chapter14/testing-reactjs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react-swc"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | test: { 8 | globals: true, 9 | environment: "jsdom", 10 | setupFiles: "./tests/setup.ts", 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /Chapter17/my-project/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter17/my-project/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter17/my-project/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter17/my-project/assets/favicon.png -------------------------------------------------------------------------------- /Chapter17/my-project/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter17/my-project/assets/icon.png -------------------------------------------------------------------------------- /Chapter17/my-project/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter17/my-project/assets/splash.png -------------------------------------------------------------------------------- /Chapter17/my-project/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter17/my-project/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter18/flexible-grids/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-grids/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter18/flexible-grids/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-grids/assets/favicon.png -------------------------------------------------------------------------------- /Chapter18/flexible-grids/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-grids/assets/icon.png -------------------------------------------------------------------------------- /Chapter18/flexible-grids/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-grids/assets/splash.png -------------------------------------------------------------------------------- /Chapter18/flexible-grids/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter18/flexible-grids/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter18/flexible-rows-and-columns/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows-and-columns/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows-and-columns/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows-and-columns/assets/favicon.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows-and-columns/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows-and-columns/assets/icon.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows-and-columns/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows-and-columns/assets/splash.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows-and-columns/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter18/flexible-rows-and-columns/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter18/flexible-rows/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View } from "react-native"; 3 | import styles from "./styles"; 4 | import Box from "./Box"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 | #1 10 | #2 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter18/flexible-rows/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows/assets/favicon.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows/assets/icon.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/flexible-rows/assets/splash.png -------------------------------------------------------------------------------- /Chapter18/flexible-rows/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter18/flexible-rows/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View } from "react-native"; 3 | import styles from "./styles"; 4 | import Box from "./Box"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 | #1 10 | #2 11 | #3 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/improved-three-column-layout/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/improved-three-column-layout/assets/favicon.png -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/improved-three-column-layout/assets/icon.png -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/improved-three-column-layout/assets/splash.png -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter18/improved-three-column-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter18/stylesheets/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Text, View } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function App() { 6 | return ( 7 | 8 | 9 | I'm in a box 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /Chapter18/stylesheets/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/stylesheets/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter18/stylesheets/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/stylesheets/assets/favicon.png -------------------------------------------------------------------------------- /Chapter18/stylesheets/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/stylesheets/assets/icon.png -------------------------------------------------------------------------------- /Chapter18/stylesheets/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/stylesheets/assets/splash.png -------------------------------------------------------------------------------- /Chapter18/stylesheets/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter18/stylesheets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter18/three-column-layout/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/three-column-layout/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter18/three-column-layout/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/three-column-layout/assets/favicon.png -------------------------------------------------------------------------------- /Chapter18/three-column-layout/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/three-column-layout/assets/icon.png -------------------------------------------------------------------------------- /Chapter18/three-column-layout/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter18/three-column-layout/assets/splash.png -------------------------------------------------------------------------------- /Chapter18/three-column-layout/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter18/three-column-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/app/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { Stack } from "expo-router"; 2 | 3 | export default function RootLayout() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/assets/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/file-based-router/assets/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /Chapter19/file-based-router/assets/images/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/file-based-router/assets/images/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter19/file-based-router/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/file-based-router/assets/images/favicon.png -------------------------------------------------------------------------------- /Chapter19/file-based-router/assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/file-based-router/assets/images/icon.png -------------------------------------------------------------------------------- /Chapter19/file-based-router/assets/images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/file-based-router/assets/images/splash.png -------------------------------------------------------------------------------- /Chapter19/file-based-router/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | // Required for expo-router 7 | 'expo-router/babel', 8 | ], 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/components/StyledText.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TextProps } from './Themed'; 2 | 3 | export function MonoText(props: TextProps) { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/components/__tests__/StyledText-test.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | 4 | import { MonoText } from '../StyledText'; 5 | 6 | it(`renders correctly`, () => { 7 | const tree = renderer.create(Snapshot test!).toJSON(); 8 | 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/metro.config.js: -------------------------------------------------------------------------------- 1 | // Learn more https://docs.expo.io/guides/customizing-metro 2 | const { getDefaultConfig } = require('expo/metro-config'); 3 | 4 | /** @type {import('expo/metro-config').MetroConfig} */ 5 | const config = getDefaultConfig(__dirname, { 6 | // [Web-only]: Enables CSS support in Metro. 7 | isCSSEnabled: true, 8 | }); 9 | 10 | module.exports = config; 11 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | alignItems: "center", 7 | justifyContent: "center", 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter19/file-based-router/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | }, 6 | "include": [ 7 | "**/*.ts", 8 | "**/*.tsx", 9 | ".expo/types/**/*.ts", 10 | "expo-env.d.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /Chapter19/navigation-basics/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-basics/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter19/navigation-basics/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-basics/assets/favicon.png -------------------------------------------------------------------------------- /Chapter19/navigation-basics/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-basics/assets/icon.png -------------------------------------------------------------------------------- /Chapter19/navigation-basics/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-basics/assets/splash.png -------------------------------------------------------------------------------- /Chapter19/navigation-basics/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter19/navigation-basics/router.ts: -------------------------------------------------------------------------------- 1 | export type RootStackParamList = { 2 | Home: undefined; 3 | Settings: undefined; 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter19/navigation-basics/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | alignItems: "center", 7 | justifyContent: "center", 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter19/navigation-basics/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter19/navigation-header/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-header/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter19/navigation-header/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-header/assets/favicon.png -------------------------------------------------------------------------------- /Chapter19/navigation-header/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-header/assets/icon.png -------------------------------------------------------------------------------- /Chapter19/navigation-header/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/navigation-header/assets/splash.png -------------------------------------------------------------------------------- /Chapter19/navigation-header/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter19/navigation-header/router.ts: -------------------------------------------------------------------------------- 1 | export type RoutesParams = { 2 | Home: undefined; 3 | Details: { title: string; stock: number; content: string }; 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter19/navigation-header/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | alignItems: "center", 7 | justifyContent: "center", 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter19/navigation-header/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter19/route-parameters/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/route-parameters/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter19/route-parameters/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/route-parameters/assets/favicon.png -------------------------------------------------------------------------------- /Chapter19/route-parameters/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/route-parameters/assets/icon.png -------------------------------------------------------------------------------- /Chapter19/route-parameters/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/route-parameters/assets/splash.png -------------------------------------------------------------------------------- /Chapter19/route-parameters/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter19/route-parameters/router.ts: -------------------------------------------------------------------------------- 1 | export type RootStackParamList = { 2 | Home: undefined; 3 | Details: { title: string }; 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter19/route-parameters/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | alignItems: "center", 7 | justifyContent: "center", 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter19/route-parameters/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/Home.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function Home() { 6 | return ( 7 | 8 | Home Content 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/News.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function News() { 6 | return ( 7 | 8 | News Content 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/Settings.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function Settings() { 6 | return ( 7 | 8 | Settings Content 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/tab-navigation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter19/tab-navigation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/tab-navigation/assets/favicon.png -------------------------------------------------------------------------------- /Chapter19/tab-navigation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/tab-navigation/assets/icon.png -------------------------------------------------------------------------------- /Chapter19/tab-navigation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter19/tab-navigation/assets/splash.png -------------------------------------------------------------------------------- /Chapter19/tab-navigation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | plugins: ["react-native-reanimated/plugin"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/router.ts: -------------------------------------------------------------------------------- 1 | export type Routes = { 2 | Home: undefined; 3 | News: undefined; 4 | Settings: undefined; 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | alignItems: "center", 7 | justifyContent: "center", 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter19/tab-navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View } from "react-native"; 3 | import styles from "./styles"; 4 | import ListContainer from "./ListContainer"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/fetching-list-data/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/fetching-list-data/assets/favicon.png -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/fetching-list-data/assets/icon.png -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/fetching-list-data/assets/splash.png -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter20/fetching-list-data/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View } from "react-native"; 3 | import styles from "./styles"; 4 | import ListContainer from "./ListContainer"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/lazy-list-loading/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/lazy-list-loading/assets/favicon.png -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/lazy-list-loading/assets/icon.png -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/lazy-list-loading/assets/splash.png -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter20/lazy-list-loading/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter20/rendering-data-collections/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/rendering-data-collections/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter20/rendering-data-collections/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/rendering-data-collections/assets/favicon.png -------------------------------------------------------------------------------- /Chapter20/rendering-data-collections/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/rendering-data-collections/assets/icon.png -------------------------------------------------------------------------------- /Chapter20/rendering-data-collections/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/rendering-data-collections/assets/splash.png -------------------------------------------------------------------------------- /Chapter20/rendering-data-collections/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter20/rendering-data-collections/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View } from "react-native"; 3 | import styles from "./styles"; 4 | import ListContainer from "./ListContainer"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/sorting-and-filtering-lists/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/sorting-and-filtering-lists/assets/favicon.png -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/sorting-and-filtering-lists/assets/icon.png -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter20/sorting-and-filtering-lists/assets/splash.png -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter20/sorting-and-filtering-lists/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter21/plotting-overlays/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-overlays/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter21/plotting-overlays/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-overlays/assets/favicon.png -------------------------------------------------------------------------------- /Chapter21/plotting-overlays/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-overlays/assets/icon.png -------------------------------------------------------------------------------- /Chapter21/plotting-overlays/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-overlays/assets/splash.png -------------------------------------------------------------------------------- /Chapter21/plotting-overlays/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter21/plotting-overlays/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter21/plotting-points/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-points/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter21/plotting-points/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-points/assets/favicon.png -------------------------------------------------------------------------------- /Chapter21/plotting-points/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-points/assets/icon.png -------------------------------------------------------------------------------- /Chapter21/plotting-points/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/plotting-points/assets/splash.png -------------------------------------------------------------------------------- /Chapter21/plotting-points/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter21/plotting-points/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | backgroundColor: "ghostwhite", 9 | }, 10 | mapView: { 11 | alignSelf: "stretch", 12 | height: 450, 13 | margin: 30, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /Chapter21/plotting-points/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter21/whats-around-me/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/whats-around-me/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter21/whats-around-me/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/whats-around-me/assets/favicon.png -------------------------------------------------------------------------------- /Chapter21/whats-around-me/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/whats-around-me/assets/icon.png -------------------------------------------------------------------------------- /Chapter21/whats-around-me/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/whats-around-me/assets/splash.png -------------------------------------------------------------------------------- /Chapter21/whats-around-me/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter21/whats-around-me/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | backgroundColor: "ghostwhite", 9 | }, 10 | 11 | mapView: { 12 | alignSelf: "stretch", 13 | height: 450, 14 | margin: 30, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter21/whats-around-me/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter21/where-am-i/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/where-am-i/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter21/where-am-i/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/where-am-i/assets/favicon.png -------------------------------------------------------------------------------- /Chapter21/where-am-i/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/where-am-i/assets/icon.png -------------------------------------------------------------------------------- /Chapter21/where-am-i/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter21/where-am-i/assets/splash.png -------------------------------------------------------------------------------- /Chapter21/where-am-i/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter21/where-am-i/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/DatePickerProps.ts: -------------------------------------------------------------------------------- 1 | export type DatePickerProps = { 2 | label: string; 3 | value: Date; 4 | onChange: (date: Date) => void; 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/TimePickerProps.ts: -------------------------------------------------------------------------------- 1 | export type TimePickerProps = { 2 | label: string; 3 | value: Date; 4 | onChange: (date: Date) => void; 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-date-time-input/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-date-time-input/assets/favicon.png -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-date-time-input/assets/icon.png -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-date-time-input/assets/splash.png -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter22/collecting-date-time-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter22/collecting-text-inputs/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-text-inputs/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter22/collecting-text-inputs/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-text-inputs/assets/favicon.png -------------------------------------------------------------------------------- /Chapter22/collecting-text-inputs/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-text-inputs/assets/icon.png -------------------------------------------------------------------------------- /Chapter22/collecting-text-inputs/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/collecting-text-inputs/assets/splash.png -------------------------------------------------------------------------------- /Chapter22/collecting-text-inputs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter22/collecting-text-inputs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter22/selecting-options/SelectProps.ts: -------------------------------------------------------------------------------- 1 | import { PickerProps } from "@react-native-picker/picker"; 2 | 3 | export type SelectItem = { 4 | label: string; 5 | value: T; 6 | }; 7 | 8 | export type SelectProps = PickerProps & { 9 | label: string; 10 | items: SelectItem[]; 11 | }; 12 | -------------------------------------------------------------------------------- /Chapter22/selecting-options/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/selecting-options/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter22/selecting-options/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/selecting-options/assets/favicon.png -------------------------------------------------------------------------------- /Chapter22/selecting-options/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/selecting-options/assets/icon.png -------------------------------------------------------------------------------- /Chapter22/selecting-options/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/selecting-options/assets/splash.png -------------------------------------------------------------------------------- /Chapter22/selecting-options/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter22/selecting-options/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/toggling-on-and-off/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/toggling-on-and-off/assets/favicon.png -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/toggling-on-and-off/assets/icon.png -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter22/toggling-on-and-off/assets/splash.png -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | backgroundColor: "ghostwhite", 9 | }, 10 | 11 | customSwitch: { 12 | alignItems: "center", 13 | margin: 10, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /Chapter22/toggling-on-and-off/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter23/finger-scrolling/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/finger-scrolling/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter23/finger-scrolling/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/finger-scrolling/assets/favicon.png -------------------------------------------------------------------------------- /Chapter23/finger-scrolling/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/finger-scrolling/assets/icon.png -------------------------------------------------------------------------------- /Chapter23/finger-scrolling/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/finger-scrolling/assets/splash.png -------------------------------------------------------------------------------- /Chapter23/finger-scrolling/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter23/finger-scrolling/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter23/giving-touch-feedback/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/giving-touch-feedback/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter23/giving-touch-feedback/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/giving-touch-feedback/assets/favicon.png -------------------------------------------------------------------------------- /Chapter23/giving-touch-feedback/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/giving-touch-feedback/assets/icon.png -------------------------------------------------------------------------------- /Chapter23/giving-touch-feedback/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/giving-touch-feedback/assets/splash.png -------------------------------------------------------------------------------- /Chapter23/giving-touch-feedback/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter23/giving-touch-feedback/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter23/swipable-and-cancellable/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/swipable-and-cancellable/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter23/swipable-and-cancellable/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/swipable-and-cancellable/assets/favicon.png -------------------------------------------------------------------------------- /Chapter23/swipable-and-cancellable/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/swipable-and-cancellable/assets/icon.png -------------------------------------------------------------------------------- /Chapter23/swipable-and-cancellable/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter23/swipable-and-cancellable/assets/splash.png -------------------------------------------------------------------------------- /Chapter23/swipable-and-cancellable/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter23/swipable-and-cancellable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter24/indicating-progress/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, ActivityIndicator } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function App() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter24/indicating-progress/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/indicating-progress/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter24/indicating-progress/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/indicating-progress/assets/favicon.png -------------------------------------------------------------------------------- /Chapter24/indicating-progress/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/indicating-progress/assets/icon.png -------------------------------------------------------------------------------- /Chapter24/indicating-progress/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/indicating-progress/assets/splash.png -------------------------------------------------------------------------------- /Chapter24/indicating-progress/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter24/indicating-progress/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | backgroundColor: "ghostwhite", 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /Chapter24/indicating-progress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter24/measuring-progress/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/measuring-progress/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter24/measuring-progress/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/measuring-progress/assets/favicon.png -------------------------------------------------------------------------------- /Chapter24/measuring-progress/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/measuring-progress/assets/icon.png -------------------------------------------------------------------------------- /Chapter24/measuring-progress/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/measuring-progress/assets/splash.png -------------------------------------------------------------------------------- /Chapter24/measuring-progress/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter24/measuring-progress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/navigation-indicators/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/navigation-indicators/assets/favicon.png -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/navigation-indicators/assets/icon.png -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/navigation-indicators/assets/splash.png -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/router.ts: -------------------------------------------------------------------------------- 1 | export type Routes = { 2 | First: undefined; 3 | Second: undefined; 4 | Third: undefined; 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter24/navigation-indicators/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/First.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function First() { 6 | return ( 7 | 8 | First Content 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/Fourth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | 5 | export default function Fourth() { 6 | return ( 7 | 8 | Fourth Content 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/Second.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | import ProgressBar from "./ProgressBar"; 5 | 6 | export default function Second() { 7 | return ( 8 | 9 | Second Content 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/Third.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text } from "react-native"; 3 | import styles from "./styles"; 4 | import ProgressBar from "./ProgressBar"; 5 | 6 | export default function Third() { 7 | return ( 8 | 9 | Third Content 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/step-progress-new/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter24/step-progress-new/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/step-progress-new/assets/favicon.png -------------------------------------------------------------------------------- /Chapter24/step-progress-new/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/step-progress-new/assets/icon.png -------------------------------------------------------------------------------- /Chapter24/step-progress-new/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter24/step-progress-new/assets/splash.png -------------------------------------------------------------------------------- /Chapter24/step-progress-new/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/router.ts: -------------------------------------------------------------------------------- 1 | export type Routes = { 2 | First: { progress: number }; 3 | Second: { progress: number }; 4 | Third: { progress: number }; 5 | Fourth: { progress: number }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter24/step-progress-new/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter25/activity-modals/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/activity-modals/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter25/activity-modals/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/activity-modals/assets/favicon.png -------------------------------------------------------------------------------- /Chapter25/activity-modals/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/activity-modals/assets/icon.png -------------------------------------------------------------------------------- /Chapter25/activity-modals/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/activity-modals/assets/splash.png -------------------------------------------------------------------------------- /Chapter25/activity-modals/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter25/activity-modals/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter25/error-confirmation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/error-confirmation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter25/error-confirmation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/error-confirmation/assets/favicon.png -------------------------------------------------------------------------------- /Chapter25/error-confirmation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/error-confirmation/assets/icon.png -------------------------------------------------------------------------------- /Chapter25/error-confirmation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/error-confirmation/assets/splash.png -------------------------------------------------------------------------------- /Chapter25/error-confirmation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter25/error-confirmation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter25/passive-notifications/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/passive-notifications/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter25/passive-notifications/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/passive-notifications/assets/favicon.png -------------------------------------------------------------------------------- /Chapter25/passive-notifications/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/passive-notifications/assets/icon.png -------------------------------------------------------------------------------- /Chapter25/passive-notifications/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/passive-notifications/assets/splash.png -------------------------------------------------------------------------------- /Chapter25/passive-notifications/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter25/passive-notifications/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter25/success-confirmation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/success-confirmation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter25/success-confirmation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/success-confirmation/assets/favicon.png -------------------------------------------------------------------------------- /Chapter25/success-confirmation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/success-confirmation/assets/icon.png -------------------------------------------------------------------------------- /Chapter25/success-confirmation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter25/success-confirmation/assets/splash.png -------------------------------------------------------------------------------- /Chapter25/success-confirmation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter25/success-confirmation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter26/animate-styling/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/animate-styling/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter26/animate-styling/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/animate-styling/assets/favicon.png -------------------------------------------------------------------------------- /Chapter26/animate-styling/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/animate-styling/assets/icon.png -------------------------------------------------------------------------------- /Chapter26/animate-styling/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/animate-styling/assets/splash.png -------------------------------------------------------------------------------- /Chapter26/animate-styling/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | plugins: ["react-native-reanimated/plugin"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /Chapter26/animate-styling/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter26/layout-animation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/layout-animation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter26/layout-animation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/layout-animation/assets/favicon.png -------------------------------------------------------------------------------- /Chapter26/layout-animation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/layout-animation/assets/icon.png -------------------------------------------------------------------------------- /Chapter26/layout-animation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter26/layout-animation/assets/splash.png -------------------------------------------------------------------------------- /Chapter26/layout-animation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | plugins: ["react-native-reanimated/plugin"], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /Chapter26/layout-animation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter27/lazy-loading/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/lazy-loading/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter27/lazy-loading/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/lazy-loading/assets/favicon.png -------------------------------------------------------------------------------- /Chapter27/lazy-loading/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/lazy-loading/assets/icon.png -------------------------------------------------------------------------------- /Chapter27/lazy-loading/assets/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/lazy-loading/assets/placeholder.png -------------------------------------------------------------------------------- /Chapter27/lazy-loading/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/lazy-loading/assets/splash.png -------------------------------------------------------------------------------- /Chapter27/lazy-loading/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter27/lazy-loading/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter27/loading-images/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/loading-images/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter27/loading-images/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/loading-images/assets/favicon.png -------------------------------------------------------------------------------- /Chapter27/loading-images/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/loading-images/assets/icon.png -------------------------------------------------------------------------------- /Chapter27/loading-images/assets/relay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/loading-images/assets/relay.png -------------------------------------------------------------------------------- /Chapter27/loading-images/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/loading-images/assets/splash.png -------------------------------------------------------------------------------- /Chapter27/loading-images/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter27/loading-images/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | backgroundColor: "ghostwhite", 9 | }, 10 | 11 | image: { 12 | width: 100, 13 | height: 100, 14 | margin: 20, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter27/loading-images/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter27/rendering-icons/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/rendering-icons/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter27/rendering-icons/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/rendering-icons/assets/favicon.png -------------------------------------------------------------------------------- /Chapter27/rendering-icons/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/rendering-icons/assets/icon.png -------------------------------------------------------------------------------- /Chapter27/rendering-icons/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/rendering-icons/assets/splash.png -------------------------------------------------------------------------------- /Chapter27/rendering-icons/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter27/rendering-icons/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter27/resizing-images/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/resizing-images/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter27/resizing-images/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/resizing-images/assets/favicon.png -------------------------------------------------------------------------------- /Chapter27/resizing-images/assets/flux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/resizing-images/assets/flux.png -------------------------------------------------------------------------------- /Chapter27/resizing-images/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/resizing-images/assets/icon.png -------------------------------------------------------------------------------- /Chapter27/resizing-images/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter27/resizing-images/assets/splash.png -------------------------------------------------------------------------------- /Chapter27/resizing-images/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter27/resizing-images/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from "react-native"; 2 | 3 | export default StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: "center", 7 | alignItems: "center", 8 | backgroundColor: "ghostwhite", 9 | }, 10 | 11 | slider: { 12 | width: 100, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter27/resizing-images/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter28/network-state/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/network-state/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter28/network-state/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/network-state/assets/favicon.png -------------------------------------------------------------------------------- /Chapter28/network-state/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/network-state/assets/icon.png -------------------------------------------------------------------------------- /Chapter28/network-state/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/network-state/assets/splash.png -------------------------------------------------------------------------------- /Chapter28/network-state/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter28/network-state/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter28/storing-data/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/storing-data/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter28/storing-data/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/storing-data/assets/favicon.png -------------------------------------------------------------------------------- /Chapter28/storing-data/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/storing-data/assets/icon.png -------------------------------------------------------------------------------- /Chapter28/storing-data/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/storing-data/assets/splash.png -------------------------------------------------------------------------------- /Chapter28/storing-data/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter28/storing-data/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter28/synchronizing-data/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/synchronizing-data/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter28/synchronizing-data/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/synchronizing-data/assets/favicon.png -------------------------------------------------------------------------------- /Chapter28/synchronizing-data/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/synchronizing-data/assets/icon.png -------------------------------------------------------------------------------- /Chapter28/synchronizing-data/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter28/synchronizing-data/assets/splash.png -------------------------------------------------------------------------------- /Chapter28/synchronizing-data/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter28/synchronizing-data/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter29/application-containers/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter29/application-containers/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/application-containers/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter29/application-containers/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/application-containers/assets/favicon.png -------------------------------------------------------------------------------- /Chapter29/application-containers/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/application-containers/assets/icon.png -------------------------------------------------------------------------------- /Chapter29/application-containers/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/application-containers/assets/splash.png -------------------------------------------------------------------------------- /Chapter29/application-containers/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter29/application-containers/tamagui.config.ts: -------------------------------------------------------------------------------- 1 | import { config } from "@tamagui/config/v2"; 2 | import { createTamagui } from "tamagui"; 3 | 4 | const appConfig = createTamagui(config); 5 | 6 | export type AppConfig = typeof appConfig; 7 | 8 | declare module "tamagui" { 9 | interface TamaguiCustomConfig extends AppConfig {} 10 | } 11 | 12 | export default appConfig; 13 | -------------------------------------------------------------------------------- /Chapter29/application-containers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter29/collecting-input/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter29/collecting-input/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/collecting-input/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter29/collecting-input/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/collecting-input/assets/favicon.png -------------------------------------------------------------------------------- /Chapter29/collecting-input/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/collecting-input/assets/icon.png -------------------------------------------------------------------------------- /Chapter29/collecting-input/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/collecting-input/assets/splash.png -------------------------------------------------------------------------------- /Chapter29/collecting-input/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter29/collecting-input/tamagui.config.ts: -------------------------------------------------------------------------------- 1 | import { config } from "@tamagui/config/v2"; 2 | import { createTamagui } from "tamagui"; 3 | 4 | const appConfig = createTamagui(config); 5 | 6 | export type AppConfig = typeof appConfig; 7 | 8 | declare module "tamagui" { 9 | interface TamaguiCustomConfig extends AppConfig {} 10 | } 11 | 12 | export default appConfig; 13 | -------------------------------------------------------------------------------- /Chapter29/collecting-input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/headers-footers-navigation/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/headers-footers-navigation/assets/favicon.png -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/headers-footers-navigation/assets/icon.png -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/headers-footers-navigation/assets/splash.png -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/tamagui.config.ts: -------------------------------------------------------------------------------- 1 | import { config } from "@tamagui/config/v2"; 2 | import { createTamagui } from "tamagui"; 3 | 4 | const appConfig = createTamagui(config); 5 | 6 | export type AppConfig = typeof appConfig; 7 | 8 | declare module "tamagui" { 9 | interface TamaguiCustomConfig extends AppConfig {} 10 | } 11 | 12 | export default appConfig; 13 | -------------------------------------------------------------------------------- /Chapter29/headers-footers-navigation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter29/using-layout-components/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /Chapter29/using-layout-components/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/using-layout-components/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Chapter29/using-layout-components/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/using-layout-components/assets/favicon.png -------------------------------------------------------------------------------- /Chapter29/using-layout-components/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/using-layout-components/assets/icon.png -------------------------------------------------------------------------------- /Chapter29/using-layout-components/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-and-React-Native-5E/e4b8310558bcd07b348f81aad5e9037edec1d3fb/Chapter29/using-layout-components/assets/splash.png -------------------------------------------------------------------------------- /Chapter29/using-layout-components/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /Chapter29/using-layout-components/tamagui.config.ts: -------------------------------------------------------------------------------- 1 | import { config } from "@tamagui/config/v2"; 2 | import { createTamagui } from "tamagui"; 3 | 4 | const appConfig = createTamagui(config); 5 | 6 | export type AppConfig = typeof appConfig; 7 | 8 | declare module "tamagui" { 9 | interface TamaguiCustomConfig extends AppConfig {} 10 | } 11 | 12 | export default appConfig; 13 | -------------------------------------------------------------------------------- /Chapter29/using-layout-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | --------------------------------------------------------------------------------