Learn React Native In One Tutorial
Tags: reactnative, javascript, codenewbie, beginners
Published: 2020-03-23 13:28:35

This will be a long tutorial about React Native. I’ll keep adding new part of it everyday after writing it. Find the codes in -  https://github.com/nerdjfpb/react-native-series 

## Table Of Contents<a name="table-of-content"></a>
* [Prerequisite](#chapter-1)
* [Tools Needed](#chapter-2)
* [Day 1 - React Native Intro](#day-1)
* [Day 2 - Stylesheet in React Native](#day-2)
* [Day 3 - State in React Native](#day-3)

##Prerequisite<a name="chapter-1"></a>
Knowledge about JavaScript(Specially ES6), React JS.

##Tools Needed<a name="chapter-2"></a>
- Windows/Mac/Linux
- Node LTS 10+ Version
- Android Studio for android emulator or iOS emulator

I’m following the React Native Documentation! So let’s start…

#Day 1 <a name="day-1"></a>
Simply, React Native is a JavaScript library which helps to create web, android & iOS code from one codebase. We need JavaScript and React knowledge to start it. Hope you know about both of these.

You can see look at
- https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/
- https://blog.nerdjfpb.com/learn-react-and-get-a-job-in-2020/

For understanding JavaScript & React JS!

##Installing
To install the react native we can install directly using react native cli, but we’ll install it using expo because expo gives us some extra benefits over react native cli. Installing expo is really easy.
```
npm install -g expo-cli
```
##Create project
Creating a new project is really easy with the expo. Just initial a project with `expo init projectName` then go to directory using `cd projectName` and finally start with `npm start` or expo start
Easy right ?
```
expo init YourProjectName
cd YourProjectName
npm start / EXPO START
```
##Folder Structure
Don’t worry to much about the folder structure for now. We’ll start from editing the app.js for now.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00if5vs332h9xyxa5h1u.png)

##Change a little
Let’s change a little just in the Text
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wyklfnuyxazirlc2l5n.png)

##RESULT
We can run easily the project
```
npm Start 
or
expo Start
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hyh8kc6pf4mwe5ajm6md.png)

You can see the graphical version here
{% instagram B-EsmshATpS %}

[Back to table of content](#table-of-content)

#Day 2 <a name="day-2"></a>
Today we are going to learn about the stylesheet of React Native. To style the app we can’t use directly css properties here, but yes we can use the css but we need to twerk a little bit.

Now we are going to change a little on the code and we are going to see some style changes. First we are going add a little class on the Text

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2ub4sbr7qrh0abvs89b.png)

We are going to add some style now

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1h3blyccg5ry36fc7mf8.png)

Now we can run this using npm start or expo start and the result –

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gs5xfi1zbwhutv2o3s4n.png)

In css we use kebab_case but in react native we use camelCase. This is the different. Now we can style whatever we want.

See the graphical version below –

{% instagram B-JxJdzlf5E %}

[Back to table of content](#table-of-content)

#Day 3 <a name="day-3"></a>
Today we are going to learn about react state. Well if you are from react already then this is just a revision for you!

First we’ll change our function to class

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n70ifyg8tahpqepouswn.png)

Now we can initialize state

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tu88en1mcshh623zffn8.png)

Printing the state value

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/piajzdwnnhko2ed8qo5j.png)

Run it using

```
npm start
or
yarn start
```
REMEMBER: WE CAN’T CHANGE STATE DIRECTLY, WE NEED TO USE SETSTATE TO CHANGE STATE.

See the graphical version below –

{% instagram B-PK5LmAkKi %}

[Back to table of content](#table-of-content)

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/react-native-series/).

I’ve started a programming community on discord. Click to join [Discord Channel](https://discordapp.com/invite/DCPm86M)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)  !