Learning React Native and Setting up Environment
About REACT NATIVE
REACT NATIVE is an open source UI software framework which was developed by Meta platforms, inc. It is used to develop cross platform UI applications. It is now being used by companies like Facebook, Instagram, Discord, Skype etc.
Why react?
Every developers want to learn this as it is most demanding right now. It is considered to be essential skills to become frontend mobile developer.It is fast-growing tech or framework right now.
React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX. So as a developer,JavaScript is
essential and it is based on JavaScript.
- It gives user a slick, smooth and responsive user interface, while be on the same page.
- It's much faster to build the apps in React Native as opposed to other platforms. For example, developers have to write code in Swift in XCode for iOS development whereas for android it has to be in flutter or kotlin in android studio. But in react-native almost everything is same and with the help of this it gives the smooth experience of writing the code and deploying it for the different platforms.
- It has a large open-source community, so if you ever need support about anything regarding it, it's widely available online.
- Many of the third-party plug-ins and APIs are already available on the internet with ready-to-use. So if you want to use these all you have to do is just install that particular API and just import it with the import statement and you are ready to use that functionality in your app.
- It has fast refresh. So as soon as you save the code, you can see the changes in your app. So just Save, see, repeat.
These are the reasons that makes React Native popular among communities.
How React Works
To write the code in the React Native, JSX extension is used as mentioned before. So with this you can write your JavaScript and XML in the same document and can style in the same place as well.
JavaScript is used to access the APIs as well as to describe the appearance of the UI components.
Basics of React Native
Core Components:
•<View>:View is a container that supports layouts with styles, touch opacity etc.
•<Text>:In this container you can display the strings of text and play around with it.
•<Image>: In helps to display different types of images with different stylings.
•<TextInput>: It allows the user to enter text. In this text input can be of different types.
Function Components:
A function component is a function which takes props as an argument, or you can decide whether to take argument or not and it returns as a JSX. It doesn’t have any states or lifecycles. This component is already built in react so you can directly declare it without importing it from react or react native.
Code for declaring the functional component:
function MyFunction(prop)
{
return <h1>Hi, {prop.name} . Nice to meet you </h1>
}
This i how you render a functional component into your main component file:
const myfunctionalcomponent= <MyFunction name="Coder" />
Class Components:
Class components are similar like function components except it to include the extends React.Component
Statement which then imports the react component and creates the inheritance to React.Component. It then gives you the access to the same functions.
It requires render() method which then returns the HTML.
Code for declaring the Class component:
Class MyClass extends React.Component
{
render()
{
return <h1>Hi, I am class component </h1>
}
}
This is how you render a component into your main component file:
Const root= ReactDOM.createRoot(document.getElementByID('myclass'));
root.render(<MyClass />)
Custom Components:
With the help of core component, you can create custom components and it can be used again and again over time. The main motive for creating custom components is to not write the same code again and again. Rather it should be stored in a custom component file where it can be import into main file and can be used as many times as you want.
Creation of customized components with props:
const Ball=(props)=>
{
return(
<View>
<Text>Custom Components by: {props.name} </Text>
</View>
);
}
Calling the customized component:
<Ball name="Coder" />
Output on the screen will be : Custom Components by: Coder
State and Props
State is a built in react object which is used to contain the data or information about the component. It can change component's state over time.; Whenever it changes, then the component re renders. The state can be changed either by user or by system events.It imports from React.Component
Here is the example for State:
class MyName extends React.Component{
state={
name: "Buggy the Clown"
};
updateName()
{
this.setState({name: "Buggy the emperor"});
}
render()
{
return()
{
<div>{this.state.name}</div>
}
}
}
What this code will do?
It will first initialize the name and then set or update the name to 'Buggy the emperor'. It can be then rendered into main Component with ' this.state.name'.
We have used props in the above examples as it just pass the data and event handlers to the children components.
Hooks
Hooks are the new addition in React 16.8. It lets you use state and other react features without writing any class. To use It has to be imported from 'react-native'.
Here you can write the code:
import React,{useState} from 'react';
function Example()
{
const [counter,setCounter]= useState(0);
return(
<div>
<button onClick={()=>setCounter(counter + 1)}>
Count That
</button>
Styling
In React Native, styling can be done in the same component file with JavaScript. All of the core component take the argument prop named style. It takes name and values. It uses the naming convention as camel casing. E.g. backgroundColor rather than background-color.
It is better to use 'StyleSheet.create' to define all containers style in same place.
To use stylesheet it has imported like this:
import {StyleSheet} from 'react-native';
Here's the example for styling:
<Text style={styles.container}> Hi peopleeee</Text>
const styles=StyleSheet.create(
{
container:
{
fontSize:30,
}
});
Setting up the Environment
To use the react native for your project you will need to install certain softwares and libraries as mentioned below:
Requirements: Node, Watchman, React Native command line interface, Xcode and Cocapads.
1. First on terminal copy this command:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. After installing homebrew, install node and watchman . These are the essentials to run the project.
brew install node
brew install watchman
3. After installing the node and watchman, next step is to install XCode, It can be found in App Store.
4. Next step is to install the XCode Command Line Tools. It can be found under Xcode-> preference-> Locations.
5. Then install cocoapods:
sudo gem install cocoapods.
6. Then open VS Code, and open the terminal:
npx react-native init HelloWorld
7. Start the metro bundler with the following command:
npx react-native start
8. Start the application in your emulator or simulator with the
following command:
npx react-native run-ios
9. After Starting the app, this will be the welcome Screen for your application.
Video About Setting up the Environment:
References:
Comments
Post a Comment