@@ -111,17 +108,16 @@ const ReactNative = () => {
- Choose An React Native Development Path + Choose a React Native Development Path
- React Native development offers various paths, including The - Mobile App Developer Path, cross-platform development, and more. - Choose the one that aligns with your goals and project - requirements. + React Native development offers various paths, including The Mobile + App Developer Path, cross-platform development, and more. Choose + the one that aligns with your goals and project requirements.
- {flutterDevelopmentPaths.map((path) => (
+ {reactNativeDevelopmentPaths.map((path) => (
![]()
{
+
+
+
+
);
-};
-const flutterDevelopmentPaths = [
+}
+
+const reactNativeDevelopmentPaths = [
+ {
+ title: "The Mobile App Developer Path:",
+ image:
+ "https://www.postingtree.com/wp-content/uploads/2022/06/7-Key-Differences-Traditional-vs-Mobile-App-Development-1.png",
+ description:
+ "This path focuses on building mobile applications using React Native for both iOS and Android platforms. It includes Learning JavaScript and React, Mastering React Native UI components, Exploring navigation and state management, Integrating APIs for data retrieval, Building and publishing mobile apps.",
+ to: "/mobile-app-developer-path", // Replace with your actual route
+ },
{
- title: "Javascript",
+ title: "The Front-End Web Developer Path",
image:
- "https://img.freepik.com/free-vector/programmers-using-javascript-programming-language-computer-tiny-people-javascript-language-javascript-engine-js-web-development-concept_335657-2412.jpg?w=1060&t=st=1696093913~exp=1696094513~hmac=72afb722e8869c28f844193e8f7ca0dc4d74d7e40d429d4ec7a725bb26164862",
- to: "/js",
+ "https://appinventiv.com/wp-content/uploads/sites/1/2019/06/Less-Talked-About-React-Native-App-Development-Considerations.png",
description:
- "Javascript gives functionality and behaviour to our websites / webapps",
+ "If you're a front-end web developer interested in expanding your skills to mobile development, this path is for you: Learning JavaScript and React, Building mobile-friendly web applications using React Native for the web, Understanding responsive design principles, Integrating web APIs and services, Deploying React Native web applications.",
+ to: "/web-developer-path", // Replace with your actual route
},
{
- title: "Official Documentation:",
+ title: "The Cross-Platform Developer Path:",
image:
- "https://pagepro.co/blog/wp-content/uploads/2020/03/react-native-logo-884x1024.png",
+ "https://softflame.in/images/cross2.png",
description:
- "The official React Native documentation provides comprehensive guides, API references, and tutorials to get you started.",
+ "If you want to develop for multiple platforms beyond just mobile and web, consider this path: Mastering JavaScript and React, Exploring React Native's cross-platform capabilities, Experimenting with React Native for desktop (Windows, macOS, Linux), Creating cross-platform applications for various devices.",
+ to: "/cross-platform-path", // Replace with your actual route
},
{
- title: "Expo",
+ title: "The UI/UX Designer Path",
image:
- "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAMMlLLQ2jjvthHRDsjjGyqhOvQgZqPbdN-0nNnNeajg&s",
+ "https://assets-global.website-files.com/6410ebf8e483b5bb2c86eb27/6410ebf8e483b5538286fbf4_Image%20by%20Freepik%202.jpg",
description:
- "A tool and platform for React Native that makes it easy to build and deploy mobile apps using JavaScript and React.",
+ "If your passion lies in designing user interfaces and experiences, you can specialize in React Native UI/UX design: Learning JavaScript basics, Gaining a deep understanding of React Native components and design principles, Creating visually appealing and user-friendly UIs, Collaborating with developers to bring designs to life.",
+ to: "/ui-ux-designer-path", // Replace with your actual route
},
{
title: "The Open-Source Contributor Path:",
image:
- "https://pagepro.co/blog/wp-content/uploads/2020/03/react-native-logo-884x1024.png",
+ "https://www.suse.com/c/wp-content/uploads/2018/10/Open-Source-Software-.jpg",
description:
- "If you enjoy contributing to the developer community, consider this path: Learning Dart and React Native.Identifying open-source React Native projects to contribute to on platforms like GitHub.Collaborating with other developers on bug fixes, new features, or documentation,Gaining rcognition in the React Native community",
+ "If you enjoy contributing to the developer community, consider this path: Learning JavaScript and React, Identifying open-source React Native projects to contribute to on platforms like GitHub, Collaborating with other developers on bug fixes, new features, or documentation, Gaining recognition in the React Native community.",
+ to: "/open-source-contributor-path", // Replace with your actual route
+ },
+];
+
+const reactNativeResources = [
+ {
+ title: "React Native Documentation",
+ type: "Official Documentation",
+ image: "https://cdn1.iconfinder.com/data/icons/soleicons-fill-vol-1/64/reactjs_javascript_library_atom_atomic_react-512.png",
+ link: "https://reactnative.dev/docs/getting-started",
+ },
+ {
+ title: "React Native GitHub Repository",
+ type: "GitHub Repository",
+ image: "https://cdn.pixabay.com/photo/2022/01/30/13/33/github-6980894_1280.png",
+ link: "https://github.com/facebook/react-native",
+ },
+ {
+ title: "React Native Community",
+ type: "Community Resources",
+ image: "https://avatars.githubusercontent.com/u/20269980?v=4",
+ link: "https://www.reactnative.directory/",
+ },
+ {
+ title: "React Native Expo",
+ type: "Development Environment",
+ image: "https://static.expo.dev/static/brand/square-512x512.png",
+ link: "https://expo.dev/",
},
];
-export default ReactNative;
+
+
+
+ + React Native Resources +
+
+ {reactNativeResources.map((resource, index) => {
+ return (
+
+
+
+ );
+ })}
+
+ 
+
+
+