Intro to React-native

Anubrat Sahoo — Tue, 15 Aug 2023 07:40:51 +0000

We will be using expo to build our first app

open up App.js clear all the code
importing required dependencies
Defining the Main component of our app

`export default function App() {
  return (
    // Outermost container that holds all other components
    <View style={styles.container}>
      {/* Nested View containing a piece of text */}
      <View>
        <Text>Another piece of text!</Text>
      </View>
      {/* Text component displaying "Hello World!" */}
      <Text>Hello World!</Text>
      {/* Button component with title "Tap me!" */}
      <Button title='Tap me!' />
    </View>
  );
}
const styles = StyleSheet.create({
});`

4.###styling our App

const styles = StyleSheet.create({
  // Styles for the outer container
  container: {
    flex: 1, // Take up the available space
    backgroundColor: 'pink', // Set background color to pink
    alignItems: 'center', // Align child components horizontally
    justifyContent: 'center', // Align child components vertically
  },
});

###Final code

import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text>Another piece of text!</Text>
      </View>
    <Text>Hello World!</Text>
      <Button title='Tap me!' />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
 },
});

Dockerize a React-JS app

Anubrat Sahoo — Mon, 24 Jul 2023 12:15:02 +0000

Create a file called "Dockerfile"

then create another file called ".dockerignore"

Then run the following commands in ur build

docker build .

docker image ls => to see all the images

docker build -t react-image . #To build a image called "react-image"

React-JS Basics using funny analogies & Counter app

Anubrat Sahoo — Fri, 21 Jul 2023 04:38:14 +0000

We will be building this counter app & will be understanding the concepts simultaneously.

`import React,{useState} from "react"
import "./App.css"
function App() {
const[count,setCount]=useState(0);
const[age,setage] = useState(0);

const decreament = () => {
setCount(count - 1)
};

const increament = () => {
setCount(count + 1)
};

return (

welcome to counter app

The count is : {count}

+
-

);
}
export default App;`

currently i will be focusing on important react concepts if u want a full code explanation scroll down the page

import React,{useState} from "react"`

{useState} - it is an # hook

Hooks:
Hooks are like magic spells that help you use special powers with your box (state). With hooks, you can do cool things like adding more candies to your box, counting how many candies you have, or even changing the color of your toy house! The most popular hook in React is called "useState," and it lets you create and use that special box (state) in your app.

enitre code explanation

`Imagine you have a whiteboard. On this whiteboard, you have two boxes. The first box is called "count," and the second box is called "age." These boxes represent the variables that hold some information in your app.

Now, let's go through the code step by step:

Import statements: In computer science, when you want to use some special tools or functions that are already created, you need to import them. It's like borrowing a specific tool from a toolbox. In this case, we are importing two things from the "react" library: "React" itself (which helps us create components) and "useState" (which is a special tool called a hook that allows us to manage state, as we'll see later).

Function declaration: The code defines a function called "App." Functions are like sets of instructions that can be used whenever you need them. The "App" function is the starting point of our application.

State and Hooks: In React, "state" is like a memory space where you can keep track of important information. Imagine you have a small drawer where you store something important. "useState" is a hook provided by React that gives you a way to create and manage state. Hooks are like special instructions to handle specific tasks in React.

useState: The first "useState" hook is used to create a state variable called "count." It is initialized to 0 (the initial count value). The second "useState" hook is used to create a state variable called "age," which is also initialized to 0.

Counting buttons: The code defines two functions: "decreament" and "increament." When you click the "-" button, the "decreament" function decreases the value of "count" by 1. When you click the "+" button, the "increament" function increases the value of "count" by 1.

Rendering: React components are like instruction sheets for what should be shown on the screen. The "return" statement in the "App" function tells React what to display. In this case, it renders a div containing a header, a paragraph showing the current value of "count," and two buttons.

Button Clicks: The buttons have "onClick" attributes that specify which function to call when they are clicked. So, when you click the "+" button, it calls the "increament" function, and when you click the "-" button, it calls the "decreament" function.

Displaying count: The current value of "count" is displayed in the paragraph using curly braces and the "count" variable, like this: {count}. It's like showing the current value of the "count" box on the whiteboard.

Overall, this React app is a simple counter that displays a number on the screen, and you can increase or decrease that number by clicking the buttons.

Remember, React helps you build user interfaces in a structured and efficient way, and "state" and "hooks" are tools to manage data and make your app interactive.

DEV Community: Anubrat Sahoo