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

Prerequisite

Knowledge about JavaScript(Specially ES6), React JS.

Tools Needed

  • 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

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

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.

react-native-folder
folder structure

Change a little

Let’s change a little just in the Text

Changing-in-react-native-text
changing a little

RESULT

We can run easily the project

npm Start 
or
expo Start
day-1-result
result
View this post on Instagram

People who are interested to learn react native can follow this tutorial. Today we are starting from the Intro. You'll find a blog about it in my blog too. Lets see how much we can learn about react native for 1month. Interested? Follow and comment about what you want to know. 👇 I choose react native because I already know about react so it's easier for me to work with react native. I'll make the tutorial while learning react native. So don't desired some special advanced tutorial, because I don't know them too 😂 I am following the official documentation. You can read that if you not interested to follow this tutorial. But if you are interested to learn more about it You are more than welcome. I have a git repos for it too. Look at – #javascript #softwaredeveloper #webdev #html5 #programmerlife #programmerslife #jquery #coderlife #frontenddeveloper #buildtheweb #webdevelopers #programmingisfun #iosdeveloper #codingbootcamp #peoplewhocode #codelife #fullstackdeveloper #backenddeveloper #codingdays #vue #javascriptdeveloper #reactjs #vuejs #100daysofcode #nerdjfpb #reactnative #native #mobileappdesign #mobileappdevelopment @codingdays @lovecoders @codinganddecoding @codingcommunity @developerspace @entreprogrammers @javascriptmastery @coding.engineer @webprogramist @programmingofficial @richwebdeveloper @_we.dev @developers_team @programer.life @comment_sense @programmer.me @coderlifes @joqode @developer_ops

A post shared by Website Developer & Mentor (@nerd_jfpb) on

Day 2

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

add class

We are going to add some style now

style-react-native

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

day2-result

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 –

Day 3

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

convert into class (react native)

Now we can initialize state

react native state

Printing the state value

print-react-native

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 here –


I’ve started a programming community on discord. Click to join.

I’ve two free PDF tutorials for you

I also provide paid one-to-one mentor-ship about programming. Knock me up for classes if you need any.

Don’t afraid to ask me anything, message me anytime on social media.

Find me on social media – twitterlinkedin, instagram

Leave a Reply

Your email address will not be published. Required fields are marked *