Welcome Everyone!
Some of React Native's important concepts as follows.
Props and State
- props : are immutable and are set by the parent and they are fixed throughout the lifetime of a component.
Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child.
The idea behind props is that you can make a single component that is used in many different places in your app. The parent that is calling the component can set the properties, which could be different in each place.
Props essentially help you write reusable code.
- state : State can Change — Mutable. The variable data can be stored in the state. It is mutable means a state can change the value at any time. It is used to control the components.
State works differently when compared to props. State is internal to a component, while props are passed to a component.
Anytime there is data that is going to change within a component, state can be used.
React is built around components. React code is essentially a bunch of nested components.
A component is essentially the same thing as a command in another programming language. It's just bundled with the visual output and handles the opening and closing on its own. You won't have to worry about incomplete syntax when using React native.
Component APIs: React native interacts with its APIs in a unique way. Its got some of its own commands, like render and setState, which are particular to the language's unique configuration. There's also the constructor command which lets you define the state and bind methods.
Functional components Increasing numbers of programmers are using React native using functional components. A functional component accepts a props object as an argument and outputs a bunch of HTML. It functions almost like a template, but one where you can use whatever JavaScript code you want.
A Hook is a special function that lets you “hook into” React features. For example, _useState _is a Hook that lets you add React state to function components.
If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.
Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. Commonly following hooks are mostly used:
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, alignContent defaulting to flex-start instead of stretch, flexShrink defaulting to 0 instead of 1, the flex parameter only supporting a single number.
As a newbie in React Native I found myself time after time going back to React Native layout docs, struggling to understand and master the difference between all the different props. justify vs align, relative vs absolute, items vs content, It was all very confusing. Use this cheat sheet for styling.
ScrollView: The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it.
Flatlist: The FlatList Component is an inbuilt react-native component that displays similarly structured data in a scrollable list. It shows only those elements that are currently being displayed on the screen.
As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.
React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app.
npm install @react-navigation/native
Thanks For Reading.
Top comments (0)