React Native__Week 1: Foundation & Basics

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.