From 3f5ddfa3466f8a3be03a9463705a026d37e15766 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 27 Jun 2023 20:20:04 +0100 Subject: [PATCH] Add react native content --- .../100-what-is-react-native.md | 8 +- .../100-introduction/101-why-react-native.md | 10 +- .../102-react-native-alternatives.md | 8 +- .../content/100-introduction/index.md | 11 +- .../101-pre-requisites/100-javascript.md | 6 +- .../content/101-pre-requisites/101-css.md | 6 +- .../102-react/100-components.md | 7 +- .../101-pre-requisites/102-react/101-state.md | 52 ++++++- .../101-pre-requisites/102-react/102-props.md | 6 +- .../101-pre-requisites/102-react/103-jsx.md | 78 +++++++++- .../101-pre-requisites/102-react/index.md | 13 +- .../content/101-pre-requisites/index.md | 7 +- .../100-expo/100-create-expo-app.md | 6 +- .../100-expo/101-expo-snack.md | 6 +- .../100-expo/102-expo-tradeoffs.md | 30 +++- .../102-environment-setup/100-expo/index.md | 6 +- .../101-react-native-cli.md | 6 +- .../102-metro-bundler.md | 6 +- .../content/102-environment-setup/index.md | 16 +- .../100-running-on-device.md | 4 +- .../101-debugging/100-dev-menu.md | 9 +- .../101-debugging/101-fast-refresh.md | 6 +- .../101-debugging/102-logbox.md | 14 +- .../101-debugging/103-sourcemaps.md | 13 +- .../101-debugging/104-devtools.md | 6 +- .../101-debugging/index.md | 4 +- .../content/103-development-workflow/index.md | 4 +- .../content/104-core-components/100-text.md | 40 ++++- .../104-core-components/101-text-input.md | 38 ++++- .../content/104-core-components/102-button.md | 35 ++++- .../content/104-core-components/103-image.md | 52 ++++++- .../104-image-background.md | 39 ++++- .../content/104-core-components/105-switch.md | 35 ++++- .../104-core-components/106-status-bar.md | 44 +++++- .../107-activity-indicator.md | 24 ++- .../content/104-core-components/108-modal.md | 59 +++++++- .../104-core-components/109-pressable.md | 60 +++++++- .../110-view/100-safe-area-view.md | 31 +++- .../110-view/101-keyboard-avoiding-view.md | 46 +++++- .../104-core-components/110-view/index.md | 32 +++- .../111-listings/100-scroll-view.md | 30 +++- .../111-listings/101-list-views/flat-list.md | 41 ++++- .../111-listings/101-list-views/index.md | 104 ++++++++++++- .../101-list-views/section-list.md | 65 +++++++- .../111-listings/102-refresh-control.md | 46 +++++- .../104-core-components/111-listings/index.md | 83 ++++++++++- .../content/104-core-components/index.md | 66 +++++++- .../100-platform-module.md | 43 +++++- .../101-file-extensions.md | 69 ++++++++- .../102-react-native-web.md | 97 +++++++++++- .../105-platform-specific-code/index.md | 40 ++++- .../content/106-styling/100-stylesheets.md | 89 ++++++++++- .../content/106-styling/101-layouts.md | 58 ++++++- .../content/106-styling/102-accessibility.md | 90 ++++++++++- .../react-native/content/106-styling/index.md | 88 ++++++++++- .../107-networking/100-connectivity.md | 102 ++++++++++++- .../content/107-networking/101-fetch.md | 40 ++++- .../content/107-networking/102-websockets.md | 68 ++++++++- .../content/107-networking/index.md | 21 ++- .../content/108-push-notifications.md | 9 +- .../109-interactions/100-touchables.md | 78 +++++++++- .../content/109-interactions/101-gesture.md | 85 ++++++++++- .../109-interactions/102-scrolling-swiping.md | 93 +++++++++++- .../109-interactions/103-screen-navigation.md | 9 +- .../109-interactions/104-animations.md | 75 +++++++++- .../content/109-interactions/index.md | 141 +++++++++++++++++- .../react-native/content/110-deep-linking.md | 57 ++++++- .../111-security/100-authentication.md | 12 +- .../content/111-security/101-networking.md | 10 +- .../content/111-security/102-storage.md | 2 +- .../content/111-security/index.md | 85 ++++++++++- .../content/112-storage/100-async-storage.md | 6 +- .../112-storage/100-expo-secure-store.md | 67 ++++++++- .../112-storage/101-expo-file-system.md | 86 ++++++++++- .../112-storage/101-other-storage-options.md | 9 +- .../content/112-storage/102-expo-sqlite.md | 6 +- .../react-native/content/112-storage/index.md | 11 +- .../content/113-testing/100-jest.md | 11 +- .../113-testing/101-react-test-renderer.md | 6 +- .../102-react-native-testing-library.md | 13 +- .../content/113-testing/103-detox.md | 8 +- .../content/113-testing/104-appium.md | 10 +- .../react-native/content/113-testing/index.md | 4 +- .../114-performance/100-frame-rates.md | 58 ++++++- .../101-common-problem-sources.md | 75 +++++++++- .../114-performance/102-speeding-up-builds.md | 6 +- .../103-optimizing-flatlist-config.md | 85 ++++++++++- .../114-performance/104-ram-bundles.md | 6 +- .../content/114-performance/105-profiling.md | 10 +- .../content/114-performance/index.md | 6 +- .../115-using-native-modules/100-for-ios.md | 6 +- .../101-for-android.md | 6 +- .../content/115-using-native-modules/index.md | 8 +- .../116-publishing-apps/100-app-store.md | 6 +- .../116-publishing-apps/101-google-store.md | 6 +- .../content/116-publishing-apps/index.md | 4 +- 96 files changed, 3202 insertions(+), 96 deletions(-) diff --git a/src/data/roadmaps/react-native/content/100-introduction/100-what-is-react-native.md b/src/data/roadmaps/react-native/content/100-introduction/100-what-is-react-native.md index a38a77a46..420894c00 100644 --- a/src/data/roadmaps/react-native/content/100-introduction/100-what-is-react-native.md +++ b/src/data/roadmaps/react-native/content/100-introduction/100-what-is-react-native.md @@ -1 +1,7 @@ -# What is react native \ No newline at end of file +# React Native + +React Native is a popular open-source framework developed by Facebook for building mobile applications using JavaScript and React. It enables developers to build native mobile apps for iOS and Android platforms using a single codebase, which significantly speeds up development without compromising on the performance and usability of the apps. + +With React Native, you write components with JSX, a syntax that combines JavaScript and XML. These components can map to native UI elements like views, text, images, and more. + +For more in-depth information about React Native, I recommend visiting the [official documentation](https://reactnative.dev/docs/getting-started). \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/100-introduction/101-why-react-native.md b/src/data/roadmaps/react-native/content/100-introduction/101-why-react-native.md index 52b4ed3f7..bfce6a013 100644 --- a/src/data/roadmaps/react-native/content/100-introduction/101-why-react-native.md +++ b/src/data/roadmaps/react-native/content/100-introduction/101-why-react-native.md @@ -1 +1,9 @@ -# Why react native \ No newline at end of file +# Why React Native? + +React Native is a widely popular framework for building native mobile applications using JavaScript and React. There are plenty of reasons why you would want to choose React Native for your next mobile app development project: + +- **Code Reusability:** React Native allows you to share a significant amount of your codebase between iOS and Android platforms. This not only reduces the development time but also makes it easier to maintain the app. +- **Familiar React Concepts:** If you're already familiar with ReactJS, React Native will feel right at home for you. Since it's based on React, the same principles of components and state management apply in React Native too. +- **Native Performance:** React Native apps deliver near-native performance as the framework works directly with native components like Views and Text, thus eliminating the need for WebView or other similar intermediaries. +- **Vast Ecosystem:** React Native enjoys a huge community and vast ecosystem that includes a wide range of libraries and tools that simplify and accelerate the development process. Additionally, Facebook and other major companies actively contribute to the growth and improvement of React Native. +- **Hot Reloading:** React Native supports hot-reloading, which means you can see the changes you make in your code directly on the device/emulator without having to recompile or rebuild the app entirely. This makes for a faster and more efficient development process. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/100-introduction/102-react-native-alternatives.md b/src/data/roadmaps/react-native/content/100-introduction/102-react-native-alternatives.md index 0bb59c37d..9be957167 100644 --- a/src/data/roadmaps/react-native/content/100-introduction/102-react-native-alternatives.md +++ b/src/data/roadmaps/react-native/content/100-introduction/102-react-native-alternatives.md @@ -1 +1,7 @@ -# React native alternatives \ No newline at end of file +# React Native Alternatives + +React Native is a popular choice for cross-platform application development, but there are other options available. Some of the common alternatives to React Native are Flutter, Ionic and Xamarin. Flutter being the most popular alternative to React Native. + +- [Flutter Official Website](https://flutter.dev/) +- [Ionic Official Website](https://ionicframework.com/) +- [Xamarin Official Website](https://dotnet.microsoft.com/apps/xamarin) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/100-introduction/index.md b/src/data/roadmaps/react-native/content/100-introduction/index.md index f6ecaa676..0d5f19b28 100644 --- a/src/data/roadmaps/react-native/content/100-introduction/index.md +++ b/src/data/roadmaps/react-native/content/100-introduction/index.md @@ -1 +1,10 @@ -# Introduction \ No newline at end of file +# Introduction + +React Native is an open-source framework developed by Facebook that allows developers to build mobile applications using JavaScript and React. It enables building apps for both iOS and Android platforms by offering a shared codebase, which significantly reduces development time and effort. + +Visit the following resources to learn more: + +- [Official Website](https://reactnative.dev/) +- [Official Getting Started to React Native](https://reactnative.dev/docs/getting-started) +- [Build a React Native App by Mosh](https://www.youtube.com/watch?v=0-S5a0eXPoc) +- [Learn React Native by CodeAcademy](https://www.codecademy.com/learn/learn-react-native) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/100-javascript.md b/src/data/roadmaps/react-native/content/101-pre-requisites/100-javascript.md index 446ae8e73..194821e96 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/100-javascript.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/100-javascript.md @@ -1 +1,5 @@ -# Javascript \ No newline at end of file +# JavaScript Basics + +There's a lot more to learn in JavaScript but my recommendation is to learn the basics and then learn as you go. You'll learn a lot more by building things than by reading about them. + +- [Learn Beginner Topics in JavaScript Roadmap](/javascript) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/101-css.md b/src/data/roadmaps/react-native/content/101-pre-requisites/101-css.md index 77d84371c..a80f9b860 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/101-css.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/101-css.md @@ -1 +1,5 @@ -# Css \ No newline at end of file +# CSS Basics + +CSS is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. It is primarily used for styling web pages and user interfaces written in HTML and XHTML. React native uses CSS to style its components. You can learn some CSS basics to get started with React Native and learn more as you go. + +- [W3Schools CSS Tutorial](https://www.w3schools.com/css/) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/100-components.md b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/100-components.md index f6ce326cb..ef3d9b037 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/100-components.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/100-components.md @@ -1 +1,6 @@ -# Components \ No newline at end of file +# Components + +React components are the building blocks of the user interface (UI) in a React application. They are used to break down the UI into reusable, isolated, and manageable pieces. Components handle rendering the UI and managing the logic and behavior. + +- [Components](https://react.dev/learn/your-first-component) and [Props](https://react.dev/learn/passing-props-to-a-component) + diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/101-state.md b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/101-state.md index 84fa97506..dfda5a90c 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/101-state.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/101-state.md @@ -1 +1,51 @@ -# State \ No newline at end of file +# State + +State is an object that holds data managed within a React component. It allows components to become dynamic and interactive by keeping track of its data changes. When the state of a component changes, React re-renders the component and updates the DOM accordingly. + +In a functional component, utilize the `useState` hook to initialize state: + +```javascript +import React, { useState } from 'react'; + +function App() { + const [text, setText] = useState('Hello, World!'); + //... +} +``` + +## Accessing State + + +In functional components, access the state by utilizing the first variable from the `useState` hook: + +```javascript +function App() { + const [text, setText] = useState('Hello, World!'); + return
{text}
; +} +``` + +## Updating State + +Utilize the second variable returned from the `useState` hook (which is a function) to update the state: + +```javascript +function App() { + const [text, setText] = useState('Hello, World!'); + + function handleClick() { + setText('State updated!'); + } + + return ( +
+
{text}
+ +
+ ); +} +``` + +Remember: do not modify the state directly; always use the `setState()` method or updater function provided by the `useState` hook. + +- [Component State](https://react.dev/learn/managing-state) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/102-props.md b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/102-props.md index 771503ccd..aaee16d8a 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/102-props.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/102-props.md @@ -1 +1,5 @@ -# Props \ No newline at end of file +# Props + +In React, **props** are short for _properties_ and are used to pass data from a parent component to a child component. They are similar to function arguments, and they help make components reusable and maintainable. + +- [Components](https://react.dev/learn/your-first-component) and [Props](https://react.dev/learn/passing-props-to-a-component) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/103-jsx.md b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/103-jsx.md index 1baa3ba13..0d4462803 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/103-jsx.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/103-jsx.md @@ -1 +1,77 @@ -# Jsx \ No newline at end of file +# JSX + +JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript code. It was developed to be used with React and has become an integral part of working with React. + +## Basic Syntax + +JSX looks similar to HTML, and you can mix it with JavaScript expressions within curly braces `{}`. + +Here's an example with a simple JSX element: + +```jsx +const element =

Hello, world!

; +``` + +## JavaScript Expressions in JSX + +You can embed JavaScript expressions within JSX by wrapping them in curly braces `{}`. + +Here's an example: + +```jsx +const name = 'John Doe'; +const element =

Hello, {name}!

; +``` + +## Attributes in JSX + +You can use JSX to define attributes for your elements, similar to how you would in HTML. However, some attribute names in JSX are slightly different from their HTML counterparts due to conflicts with reserved JavaScript keywords (for example, `className` instead of `class`). + +Here's an example: + +```jsx +const className = 'my-class'; +const element =

Hello, world!

; +``` + +## Children in JSX + +You can nest JSX elements by enclosing them within the opening and closing tags of a parent element. + +Here's an example: + +```jsx +const element = ( +
+

Hello, world!

+

This is an example of nested JSX elements.

+
+); +``` + +## JSX Represents Objects + +Under the hood, JSX represents JavaScript objects called "React elements". When you use JSX, your JavaScript code gets automatically transformed into these React elements. + +Here's an example of a JSX element and its corresponding JavaScript object: + +```jsx +const elementJSX = ( +

+ Hello, world! +

+); + +const elementJSObject = React.createElement( + 'h1', + {className: 'greeting'}, + 'Hello, world!' +); +``` + +Both `elementJSX` and `elementJSObject` represent the same thing and will produce the same result when rendered. + +That's a brief summary of JSX. You'll find that it becomes an essential part of working with React as you continue learning about React Native. + +- [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx) +- [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/index.md b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/index.md index 90dcc5f62..f48af77f8 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/index.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/102-react/index.md @@ -1 +1,12 @@ -# React \ No newline at end of file +# React Basics + +React Native uses React, a JavaScript library for building user interfaces. You should have a basic understanding of React concepts before proceeding with React Native. Some of the concepts you should be familiar with include: + +- [Components](https://react.dev/learn/your-first-component) and [Props](https://react.dev/learn/passing-props-to-a-component) +- [Component State](https://react.dev/learn/managing-state) +- [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx) +- [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces) + +Once you have a basic understanding of React, start with React Native. + +- [React Native Basics](https://reactnative.dev/docs/getting-started) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/101-pre-requisites/index.md b/src/data/roadmaps/react-native/content/101-pre-requisites/index.md index a9b758d36..b1773ab48 100644 --- a/src/data/roadmaps/react-native/content/101-pre-requisites/index.md +++ b/src/data/roadmaps/react-native/content/101-pre-requisites/index.md @@ -1 +1,6 @@ -# Pre requisites \ No newline at end of file +# Learn the Pre-requisites + +Before you start learning React Native, you should have a basic knowledge of [JavaScript](/javascript) and [React](/react). You don't need to fully master these topics, but you should be familiar with them. Learn the basics of JavaScript (e.g. topics marked for beginners in [JavaScript Roadmap](/javascript) and continue with React Native. I have heard good things about official React Native documentation, so you can start there and pick up the relevant topics wherever needed. + +- [Learn Beginner Topics in JavaScript](/javascript) +- [React Native Basics](https://reactnative.dev/docs/getting-started) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/100-create-expo-app.md b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/100-create-expo-app.md index cddacd6f3..2eebf0165 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/100-create-expo-app.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/100-create-expo-app.md @@ -1 +1,5 @@ -# Create expo app \ No newline at end of file +# Create Expo App + +`create-expo-app` is a command line tool that generates a React Native project that works out of the box with Expo. It is the easiest way to get started building a new React Native application. + +- [Official Expo Documentation](https://docs.expo.dev/tutorial/create-your-first-app/) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/101-expo-snack.md b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/101-expo-snack.md index 5bea4d4b0..0939d14ae 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/101-expo-snack.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/101-expo-snack.md @@ -1 +1,5 @@ -# Expo snack \ No newline at end of file +# Expo Snack + +Expo Snack is an online playground and development environment for creating and testing React Native projects. With Snack, you can easily edit and preview your code changes directly in your browser or on a mobile device using the Expo Go app. It offers a fast, easy, and convenient way to develop, test, and share your projects without needing to set up a local development environment. + +- [Expo Snack Website](https://snack.expo.dev/) \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/102-expo-tradeoffs.md b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/102-expo-tradeoffs.md index 4056d6960..4c57dbb6a 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/102-expo-tradeoffs.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/102-expo-tradeoffs.md @@ -1 +1,29 @@ -# Expo tradeoffs \ No newline at end of file +# Expo Tradeoffs + +Expo is a powerful tool that simplifies the React Native development process, but it has some limitations. Here's a summary of the tradeoffs you may face when using Expo. + +## Limited native modules + +Expo offers a set of pre-built native modules, which are really helpful but might not cover all the functionalities required for your specific app. If you need a custom native module or a third-party library that is not supported by Expo, you'll have to eject from the Expo managed workflow and switch to the bare-workflow or create a custom native module (native code) yourself. + +## Performance + +Expo adds an extra layer to your React Native app, which can cause performance issues, especially for large or complex apps. The bare-workflow may provide better performance as you have more control over the native libraries and app optimization. + +## App size + +Expo apps tend to have a larger app size because they include the entire Expo SDK, regardless of which modules you use in your app. In contrast, non-Expo apps can optimize their size by including only the required native modules. + +## Updates and upgrades + +When you rely on Expo, you depend on their release cycle for updates and upgrades. If React Native adds a new feature or fixes a bug, you have to wait for an updated Expo version to implement it. This may cause delays or limitations in your app development process. + +## Ejecting complications + +If you start a project with Expo and later decide to eject and use regular React Native, you might face challenges migrating your code and adjusting to the new configuration. You may need to rewrite some parts of your code or manually migrate dependencies. + +## Limited customizability + +Expo abstracts various aspects of customization and configuration, which can be a double-edged sword. If you need additional customizations that are not supported by Expo, you'll have to eject or switch to a bare-workflow project, which gives you more control over the native code. + +In summary, while Expo offers great tooling and simplifies the development process, it has certain limitations that you should consider before choosing it for your app development. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/index.md b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/index.md index 64b9cf170..9bba05181 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/index.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/100-expo/index.md @@ -1 +1,5 @@ -# Expo \ No newline at end of file +# Expo + +Expo is a framework and a platform that allows you to develop, build, and deploy React Native applications easily and quickly. It simplifies the development process and provides a set of useful tools and services, including its own CLI (Command Line Interface), a managed workflow, and an SDK (Software Development Kit) with pre-built modules for common features. + +Visit the [Expo CLI Quickstart](https://reactnative.dev/docs/environment-setup) page for detailed instructions on how to set up your environment. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/101-react-native-cli.md b/src/data/roadmaps/react-native/content/102-environment-setup/101-react-native-cli.md index 2ebac7aa7..94967d5da 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/101-react-native-cli.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/101-react-native-cli.md @@ -1 +1,5 @@ -# React native cli \ No newline at end of file +# React Native CLI + +React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development. + +Visit the [React Native CLI Quickstart](https://reactnative.dev/docs/environment-setup?guide=native) page for detailed instructions on how to set up your environment. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/102-metro-bundler.md b/src/data/roadmaps/react-native/content/102-environment-setup/102-metro-bundler.md index dd03bad23..e7d9c3e9d 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/102-metro-bundler.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/102-metro-bundler.md @@ -1 +1,5 @@ -# Metro bundler \ No newline at end of file +# Metro Bundler + +Metro Bundler is the default bundler for React Native applications. It's a JavaScript module bundler that takes all your application code and dependencies, and bundles them together into a single JavaScript file or multiple files (based on platform). + +Visit the [Metro Bundler](https://facebook.github.io/metro/) website for more information. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/102-environment-setup/index.md b/src/data/roadmaps/react-native/content/102-environment-setup/index.md index 7ffba55b5..ef6e52da0 100644 --- a/src/data/roadmaps/react-native/content/102-environment-setup/index.md +++ b/src/data/roadmaps/react-native/content/102-environment-setup/index.md @@ -1 +1,15 @@ -# Environment setup \ No newline at end of file +# Environment Setup + +In React Native, setting up the development environment is a crucial step. The environment setup process includes installing and configuring various tools and packages required for developing, building, and launching a React Native application. There are two main approaches when setting up your React Native development environment: + +## Expo CLI + +Expo CLI is a command-line tool built for creating and managing React Native projects easily. It streamlines your development process by providing an entire development environment, including building and deploying your app to both iOS and Android platforms. + +Visit the [Expo CLI Quickstart](https://reactnative.dev/docs/environment-setup) page for detailed instructions on how to set up your environment. + +## React Native CLI + +React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development. + +Visit the [React Native CLI Quickstart](https://reactnative.dev/docs/environment-setup?guide=native) page for detailed instructions on how to set up your environment. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/100-running-on-device.md b/src/data/roadmaps/react-native/content/103-development-workflow/100-running-on-device.md index 0aba56279..75367f8f6 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/100-running-on-device.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/100-running-on-device.md @@ -1 +1,3 @@ -# Running on device \ No newline at end of file +# Running on Device + +It's always a good idea to test your app on an actual device before releasing it to your users. [This document](https://reactnative.dev/docs/running-on-device) will guide you through the necessary steps to run your React Native app on a device and to get it ready for production. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/100-dev-menu.md b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/100-dev-menu.md index 28115c776..3534c14dd 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/100-dev-menu.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/100-dev-menu.md @@ -1 +1,8 @@ -# Dev menu \ No newline at end of file +# In-App Developer Menu + +React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts: + +- Android: `Cmd + M` or `Ctrl + M` +- iOS: `Cmd + D` or `Ctrl + D` + +Visit the [React Native docs](https://reactnative.dev/docs/debugging) for more information. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/101-fast-refresh.md b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/101-fast-refresh.md index e8dcbef77..cc874cc72 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/101-fast-refresh.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/101-fast-refresh.md @@ -1 +1,5 @@ -# Fast refresh \ No newline at end of file +# Enabling Fast Refresh + +Fast Refresh is a React Native feature that allows you to get near-instant feedback while making changes in your code. It achieves this by reloading only the portion of the app that was changed, without losing the current state. This makes the development process a lot smoother as you don't have to wait for the entire app to rebuild after making a change. + +Learn more about Fast Refresh and how to enable it in the [React Native documentation](https://reactnative.dev/docs/fast-refresh). \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/102-logbox.md b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/102-logbox.md index 306248805..cb414cbc7 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/102-logbox.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/102-logbox.md @@ -1 +1,13 @@ -# Logbox \ No newline at end of file +# LogBox + +LogBox is a new feature added to React Native to improve how logs are displayed and managed in your development environment. It provides better visualization and organization of logs, warnings, and errors, making it easier for developers to address issues in their code. + +- **Better Error Formatting**: Errors are displayed in a more understandable format with clear syntax highlighting and relevant information regarding the error and the specific code that caused it. + +- **Improved Warnings**: Warnings now come with filtering and sorting options, allowing you to control which warnings you want to prioritize or ignore during development. + +- **Component Stacks**: Instead of displaying the raw call stack, LogBox provides a component stack that shows component hierarchy, allowing you to pinpoint the exact component causing the issue. + +- **Customizable**: You can disable LogBox, customize its behavior, or even extend it with your own code to tailor your debugging experience. + +Read more about LogBox in the [official documentation](https://reactnative.dev/docs/debugging#logbox). \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/103-sourcemaps.md b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/103-sourcemaps.md index 11449da3e..f4104abf6 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/103-sourcemaps.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/103-sourcemaps.md @@ -1 +1,12 @@ -# Sourcemaps \ No newline at end of file +# Sourcemaps + +Sourcemaps are files that map the original source code of a project to its minified or transpiled version. This is especially useful in environments, like React Native, where the code may be transformed before being executed in the device/emulator. Sourcemaps help developers to debug their code more easily by mapping errors in the transformed code back to their original location in the source code. + +There are various types of sourcemaps which give different levels of detail to the debugging process: + +- `eval`: Uses `eval` function to generate the sourcemaps. This is faster but provides less detailed information than other options. +- `cheap-source-map`: Simple line-to-line mapping without column information. Faster than `source-map` but less accurate. +- `cheap-module-source-map`: Similar to `cheap-source-map` but with support for modules. +- `source-map`: Full source mapping with both line and column information. It is accurate, though slower compared to other options. + +After generating sourcemaps, you can use them to debug errors more efficiently, as they will reference the original locations in the source code. The browser's developer tools, like Google Chrome, have built-in support for sourcemaps, providing the ability to navigate and debug errors with ease. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/104-devtools.md b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/104-devtools.md index 307c36204..1290af714 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/104-devtools.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/104-devtools.md @@ -1 +1,5 @@ -# Devtools \ No newline at end of file +# React Native - DevTools + + +You can use the [standalone version of React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) to debug the React component hierarchy. Visit the [React Native Documentation](https://reactnative.dev/docs/react-devtools) for more information. + diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/index.md b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/index.md index 948532978..99052a1ee 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/index.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/101-debugging/index.md @@ -1 +1,3 @@ -# Debugging \ No newline at end of file +# Debugging + +Debugging is an essential aspect of the development workflow in React Native. Learn all about debugging in React Native in the [Debugging section of the React Native documentation](https://reactnative.dev/docs/debugging). \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/103-development-workflow/index.md b/src/data/roadmaps/react-native/content/103-development-workflow/index.md index c5d7dcaf3..689508ae8 100644 --- a/src/data/roadmaps/react-native/content/103-development-workflow/index.md +++ b/src/data/roadmaps/react-native/content/103-development-workflow/index.md @@ -1 +1,3 @@ -# Development workflow \ No newline at end of file +# Development Workflow + +React native has a decent guide on how to get started with development workflow. Visit the [Workflow section](https://reactnative.dev/docs/running-on-device) of the official documentation to learn about different topics. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/104-core-components/100-text.md b/src/data/roadmaps/react-native/content/104-core-components/100-text.md index bf632d97e..58d26ffbd 100644 --- a/src/data/roadmaps/react-native/content/104-core-components/100-text.md +++ b/src/data/roadmaps/react-native/content/104-core-components/100-text.md @@ -1 +1,39 @@ -# Text \ No newline at end of file +# Text Component + +The `Text` component is a basic element in React Native used to display text content on the screen. While it has some basic styling properties, you usually nest it inside other components (e.g., `View`) to create more complex UIs. + +Some common properties of the `Text` component include: + +- `style`: Apply a set of styling rules to the text, such as font size, color, and font family. +- `numberOfLines`: Limit the number of lines shown in the text. This can be especially useful for long paragraphs or truncating a long title. +- `onPress`: Add a function that gets called when the user taps on the text. +- `allowFontScaling`: Specify whether to allow font scaling based on user's font settings. + +Here's a simple example using the `Text` component: + +```javascript +import React from 'react'; +import { Text, StyleSheet } from 'react-native'; + +const SimpleText = () => { + return ( + alert('Hello')}> + This is an example of a Text component in React Native. Tap on me! + + ); +}; + +const styles = StyleSheet.create({ + text: { + fontSize: 16, + color: 'blue', + textAlign: 'center', + margin: 10, + fontFamily: 'Arial', + }, +}); + +export default SimpleText; +``` + +In this example, we create a `Text` element with some text content, apply styling, limit it to two lines, and add an `onPress` event. \ No newline at end of file diff --git a/src/data/roadmaps/react-native/content/104-core-components/101-text-input.md b/src/data/roadmaps/react-native/content/104-core-components/101-text-input.md index e194163d4..4955fd418 100644 --- a/src/data/roadmaps/react-native/content/104-core-components/101-text-input.md +++ b/src/data/roadmaps/react-native/content/104-core-components/101-text-input.md @@ -1 +1,37 @@ -# Text input \ No newline at end of file +# Text Input + +`TextInput` is a core component in React Native that allows the user to enter text. It is commonly used to collect user data, like emails or passwords. You can customize the appearance of `TextInput` by using various props such as `placeholder`, `multiline`, `maxLength`, and more. + +Here's a basic example of using `TextInput`: + +```javascript +import React, { useState } from 'react'; +import { TextInput, View, Button } from 'react-native'; + +const App = () => { + const [text, setText] = useState(''); + + const handleSubmit = () => { + alert('You entered: ' + text); + }; + + return ( + + setText(text)} + value={text} + placeholder="Enter text here" + /> +