DEV Community

Enie
Enie

Posted on

1

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;

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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>;

Enter fullscreen mode Exit fullscreen mode

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>
  );
};

Enter fullscreen mode Exit fullscreen mode

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');
}, []);
Enter fullscreen mode Exit fullscreen mode

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️