React Native__Week 1: Foundation & Basics

Enie — Sun, 25 Aug 2024 11:15:12 +0000

What you need to know on this week?

The first week is all about laying the groundwork. You need a strong foundation in JavaScript because React Native is built on it. Let’s break down what you should focus on:

Day 1-3: JavaScript Essentials

ES6+ Syntax: This is the modern version of JavaScript, and React Native heavily uses these features. Here are the key concepts you should grasp:
Arrow Functions: These are a more concise way to write functions. For example:

const add = (a, b) => a + b;

Destructuring: This allows you to unpack values from arrays or properties from objects into distinct variables. Like this:

const person = { name: 'John', age: 30 };
const { name, age } = person;

Async/Await: This helps you write asynchronous code that’s easier to read and write. Instead of dealing with callbacks or .then chains, you can use await to pause the function until a promise is resolved:

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
};

Yeah, that’s a solid starting point. Remember, understanding these concepts is crucial because they’re used everywhere in React Native. When you move on to React itself, it will make things much smoother.

Day 4-7: React Fundamentals

Components: In React, everything is a component. A component is essentially a piece of UI, which could be as simple as a button or as complex as an entire page.
Functional Components: These are the most common in modern React. They’re simple functions that return JSX (JavaScript XML), which looks like HTML but with the power of JavaScript:

const Greeting = () => <Text>Hello, World!</Text>;

Props: Short for “properties,” props are how you pass data to components. They make components reusable by allowing you to customize them:

const Greeting = ({ name }) => <Text>Hello, {name}!</Text>;

State: State is how you manage data that changes over time within a component. For instance, a counter component might have a state variable to track the count:

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>
      <Button onPress={() => setCount(count + 1)} title="Increase" />
    </View>
  );
};

Lifecycle Methods: These are hooks that allow you to run code at specific points in a component's lifecycle, like when it mounts or updates. With functional components, you’ll mostly use hooks like useEffect:

useEffect(() => {
  console.log('Component mounted');
}, []);

By the end of this week, you should be comfortable enough with both JavaScript and React basics to start building simple apps, like a to-do list, to apply what you’ve learned. This sets you up nicely for more advanced topics in the coming weeks.

Continue is deep dive into each basic concept, You’ll thank yourself for knowing how to do basic arithmetic before tackling advanced math problems.

A deep dive into react native - sharing my working experience

Enie — Sun, 25 Aug 2024 11:00:45 +0000

In this journey, lets set a deadline and a result for yourself if you really want to end something.

It's a "How you master React native in 30 days?"

Alright, mastering React Native in 30 days is ambitious, but definitely doable with the right plan (I don't even know what's next, just go with the flow).

Ps: This involves my experience with working on projects and what I couldn't find on the internet as a part of my learning journey. I want to share it. (Many thanks to my Company and my dear Mentors).

Here’s a roadmap to get you there:

Week 1: Foundation & Basics

Day 1-3: Start with the basics. Familiarize yourself with JavaScript (if you haven’t already) since React Native relies heavily on it. You should be comfortable with ES6+ syntax, including arrow functions, destructuring, and async/await.

Day 4-7: Dive into React fundamentals. Understand components, props, state, and lifecycle methods. Practice by building simple components and a small project, like a to-do list app.

Week 2: React Native Essentials

Day 8-10: Set up your React Native development environment using Expo for quick starts. Learn about the core components (e.g., View, Text, ScrollView) and how styling works with Flexbox.

Day 11-14: Work on navigation (using React Navigation), handling user input, and using APIs. Build a simple app that fetches data from an API and displays it in a list.

Week 3: Advanced Concepts

Day 15-17: Explore state management with Redux or the Context API. Build an app that requires complex state management, like a shopping cart.

Day 18-21: Learn about performance optimization, debugging, and testing in React Native. Get familiar with tools like Flipper for debugging and Jest for testing.

Week 4: Real-World Projects

Day 22-25: Start a full-fledged project, something like a social media app or a task manager. This should combine everything you’ve learned so far—navigation, API handling, state management, etc.

Day 26-28: Polish your app, focus on user experience, and add any missing features. Learn how to deploy the app on both Android and iOS platforms.

Day 29-30: Reflect on what you’ve built, review your code, and identify areas for improvement. Consider contributing to an open-source React Native project to test your skills in a real-world scenario.

Yeah, that's the plan, but it's my plan. You can adjust it for yourself. But remember, 30 days can feel like a sprint, so it’s crucial to maintain your energy and focus.

My only tip is to know what you want and want it - only that will lead you to your destiny.

Imagine you want to go to your favorite beach which is a 5-hour drive away. You will not have your feet in the sand unless it's the only thing you want right now. Just like that, you will plan your time to get there.

Don't worry, follow the next article. I'll go with you.

DEV Community: Enie

React Native__Week 1: Foundation & Basics

A deep dive into react native - sharing my working experience