First of all, to Create React Native App in visual studio code you need some setup. Therefore we will discuss step by step how you will set up your system for React Native App Development.
React.js is a component-based library developed and maintained by the Facebook. This library helps you to develop the best UI for the Native App. It is a component-based architecture, therefore, it will very easy to you for developing Complex UI for your Native Application
Table of Content
- Install Node.js
- Necessary Extensions for React and React Native
- Install React Native App
- Create React Native Project
- Install React Native CLI
- Start React Native App
- Advantage of React Native
- Disadvantage of React Native
Step 1: Install Node.JS and React
Best way to install react and react native with the use of Node Package Manager (npm), So to take advantage of npm its recommended first install node.js. Try to use npm command for install and manage node modules because manual installation may be complex for you.
Read More How you will install node.js and react.js
Step 2: Install necessary extensions to Create and Development React Native App
Basically some extensions do not require for react native app but for faster development you need to install it. It helps you to write code very easy way. That’s why we will discuss those extensions with details.
List of Necessary Extensions for React Native App
Before start development you should install visual studio code extensions from Visual Studio Marketplace. To install extensions in the Visual Studio Code just follow the following step.
Step-1: Click on Extension icon in visual studio code
Step-2: Search the extension
Step-3: Click on Install button
List of essential extensions for React Native App
React Native Tools
At the very first before start React Native App install React Native Tools to set up a development environment for react native project. It can help you to run React Native command quickly from Visual Studio Code terminal and also you can able to debug your code.
Babel JavaScript
Babel JavaScript is responsible for convert ECMAScript 2015+ code into a backward-compatible version of JavaScript. Therefore you need to install this extension. Its free and open source.
Flow Language Support
This extension helps you to write code as it check javascript type therefore its find the type error in the javascript program.
ESLint
This is not a mandatory extension for React Native App because it check project documentation. So If you are new in react native app then you can use it.
Prettier – Code formatter
This extension helps to format the section of your cod as a result it will make it easy to manage your code. It’s very important to keep your code formatted section wise so the extension requires. It helps you and your team to maintain your react projects.
Auto Close Tag/Auto Complete Tag/Auto Rename Tag
Those extensions are reduce your typing effort and help for fast coding.
AutoClose Tag – At the time of coding when you opening a tag that time the closing tag automatically generates. So it reduces the tag mismatch error.
AutoComplete Tag – This is a combine function of auto-closing and auto rename tag
Auto Rename Tag– Basically this extension also helps to write code. Therefore If you rename the opening tag then no need to change the closing tag. Because the auto rename extension automatically changes your closing tag. As a result it helps to manage and update your big project. Sometimes finding a closing tag very difficult from a big source code, in this case this tag also helps you.
And also install the following tag to setup react native app in visual studio code editor.
Color Highlight – Its highlight CSS color and also web color, If you feel its help you then you can install it.
Git Blame – This extension provides information in the status bar about the selected line.
Path Intellisense – This is one more extension. It will help to choose the path as well as tag also smartly.
SVG Viewer – Basically it is an SVG viewer. If you need an SVG file in your project then you definitely install it.
TO DO Highlight
change-case
Code Spell Checker
npm Intellisense
Search node_modules
Settings Sync
markdownlint
Bracket Pair Colorizer
ES7 React/Redux/GraphQL/React-Native snippets
Step-3: Install React Native App
For Installation of React Native App, open Node.js Command prompt then type the command below and press enter. After taking some time installation will be done and your system ready to create a react native app.
npm install -g create-react-native-app
Note: This command may generate an error at the time of installation. Just you need to open the command prompt as administrator, then the installation will don without any problem.
Step-4: Create React Native Project
Finally now time to create a react native project. As you have successfully set up your system to react native app therefore your system ready to create the project.
After complete the above all configuration create React Native App, please execute the command below. It automatically create your app.
create-react-native-app developers-zone
As a result of this command the “developers-zone” folder will generate and in this folder create react native application. Hare ” developers-zone ” is my application name you can use your name.
You may get the following error while you execute the app creation command in the visual studio code terminal.
system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ create-react-native-app developers-zone
+ ~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : SecurityError: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
This is a security-related issue. If you get this type of error then you can run it from the command prompt (cmd). also run the command prompt as administrator mode.
This command will perform all processes for creating your native app. You will get a template selection screen like below.
Hare, you can choose any option as per your requirement. If you want to know more details about those templates then you can try every template one by one.
I recommend you first time go with a blank template and set up every configuration manually. Because you need to learn every detail about react native app. It will definitely help you.
After complete the app creation process you need to enter the app directory and run your app.
Convert website into a mobile app
Click on above link to know how you will create a mobile app from your existing website.
Step 4: Install React Native CLI
There are two npm packages for react native app 1st is React Native CLI and 2nd one is React Native. React Native CLI is a lightweight package therefore it should be installed globally and React Native installed locally.
To install React Native CLI in your system run the command below. It will install and also configure your system automatically.
npm install -g react-native-cli
Step 5: Start react native
The last and final step is to run for the react-native application. In this tutorial we will just run a “Hello World” program just for testing total installation.
For example we modify the “App.js” file and build a simple app. The “App.js” file looks like below.
“App.js” File
Output
Hello World
Before running React Native App 1st enter your project directory and then start the app. Please enter the following command to run the application.
cd developers-zone
npm start
You will get following screen after installation done
Hare “native-demo” is my project directory therefore we use it. In the case of your project you should use your project directory. When successfully started your native application you will get a QR Code like below. Now to see the output of the application you nee the Expo app on your mobile for this reason please install the Expo app on your mobile.
Also you will get a ui that is expo development tools like below.
Finally after installing the app open it and scan the QR Code to see the preview of your app. One more important thing your mobile should connect with the same network because the directly connected to your system.
Advantage of React Native
As it is JavaScript-based so it is faster. The app created by React Native, will give you the best performance.
React is cross-platform therefore you not need to develop different app for iOS and Android separately. So the development and maintenance cost less than others.
As is it component-based development technique so you can take advantage of the reuse of the pre-development component.
The very large community of developers is really helpful to resolve any issues because there is so much content about to react.
Hot reloading feature of react helps you to get instance preview and also reduce your development time. Because no need to run the project on every modification.
Support 3rd part plugins – you can simply use plugins and also support modular architecture. It keeps your project simple.
Disadvantage of React Native
It only handles client site activity. For server site functions you need a separate programming language. It is best for application but not on the website. Because there is no good cms system even in 2020. But later we can expect the best CMS system in react.
As Google and other search did not crawl dynamic contain so some indexing problems maybe occur hare. But I can expect later it will resolve.
I do trust all of the concepts you’ve offered to your post. They are very convincing and can certainly work. Still, the posts are very short for beginners. Could you please prolong them a bit from subsequent time? Thank you for the post.
I used to be able to find good information from your blog posts.
My brother suggested I might like this website. He was entirely right. This post truly made my day. You cann’t imagine just how much time I had spent for this information! Thanks!
I’m in awe of the author’s ability to make complex concepts understandable to readers of all backgrounds. This article is a testament to his expertise and dedication to providing helpful insights. Thank you, author, for creating such an captivating and insightful piece. It has been an absolute pleasure to read!
I found your weblog site on google and test a couple of of your early posts. Proceed to maintain up the very good operate. I simply extra up your RSS feed to my MSN News Reader. Seeking ahead to reading extra from you afterward!?
I think the admin of this site is really working
hard for his website, because here every information is quality based material.
Thanks for your article on the traveling industry. We would also like contribute that if you’re a senior considering traveling, it is absolutely vital that you buy traveling insurance for elderly people. When traveling, older persons are at high risk of getting a medical emergency. Obtaining the right insurance policies package for your age group can safeguard your health and give you peace of mind.
Terrific work! This is the type of information that should be shared around the web. Shame on Google for not positioning this post higher! Come on over and visit my web site . Thanks =)
What?s Taking place i’m new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has helped me out loads. I’m hoping to give a contribution & assist different customers like its aided me. Great job.
When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three e-mails with the same comment. Is there any way you can remove people from that service? Thanks!
I have discovered some new elements from your web site about pcs. Another thing I have always thought is that computer systems have become a specific thing that each house must have for many reasons. They supply you with convenient ways to organize the home, pay bills, shop, study, tune in to music as well as watch tv programs. An innovative way to complete many of these tasks is by using a laptop computer. These computer systems are mobile ones, small, effective and lightweight.
Enjoyed looking through this, very good stuff, regards. “Success doesn’t come to you…you go to it.” by Marva Collins.
Do you mind if I quote a few of your articles as long as I provide credit and sources back to your webpage? My blog is in the very same area of interest as yours and my visitors would definitely benefit from a lot of the information you provide here. Please let me know if this okay with you. Many thanks!
I?d need to examine with you here. Which isn’t something I often do! I enjoy studying a submit that may make individuals think. Also, thanks for permitting me to comment!
Good website! I really love how it is simple on my eyes and the data are well written. I am wondering how I might be notified when a new post has been made. I have subscribed to your feed which must do the trick! Have a great day!
I’d personally also like to state that most people that find themselves with out health insurance can be students, self-employed and people who are without a job. More than half on the uninsured are under the age of Thirty five. They do not come to feel they are needing health insurance since they’re young along with healthy. Its income is typically spent on property, food, plus entertainment. Many people that do work either full or part-time are not supplied insurance via their work so they move without owing to the rising cost of health insurance in the us. Thanks for the thoughts you share through this site.
It’s my opinion that a property foreclosures can have a major effect on the debtor’s life. House foreclosures can have a Several to several years negative relation to a borrower’s credit report. A borrower having applied for a home loan or almost any loans for that matter, knows that the worse credit rating is definitely, the more complicated it is to secure a decent mortgage loan. In addition, it may affect a new borrower’s capability to find a quality place to let or hire, if that results in being the alternative property solution. Good blog post.
I’m in awe of the author’s capability to make intricate concepts understandable to readers of all backgrounds. This article is a testament to her expertise and dedication to providing valuable insights. Thank you, author, for creating such an engaging and insightful piece. It has been an incredible joy to read!
I’m not sure why but this weblog is loading incredibly slow for me. Is anyone else having this problem or is it a issue on my end? I’ll check back later on and see if the problem still exists.
I would love to add that when you do not surely have an insurance policy otherwise you do not form part of any group insurance, you could well benefit from seeking aid from a health insurance professional. Self-employed or people having medical conditions usually seek the help of any health insurance dealer. Thanks for your text.
I would like to thank you for the efforts you have put in writing this blog. I am hoping the same high-grade blog post from you in the upcoming also. Actually your creative writing skills has encouraged me to get my own web site now. Actually the blogging is spreading its wings quickly. Your write up is a good example of it.
One other issue is that if you are in a circumstances where you don’t have a co-signer then you may really need to try to make use of all of your money for college options. You can find many grants or loans and other scholarships that will present you with funds to help with institution expenses. Thank you for the post.
Thanks for another informative blog. Where else could I get that type of info written in such an ideal way? I have a project that I’m just now working on, and I have been on the look out for such information.
Normally I do not read article on blogs, but I wish to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Thanks, quite nice article.
Thanks for your write-up. Another element is that being photographer entails not only problems in taking award-winning photographs but hardships in acquiring the best video camera suited to your needs and most especially struggles in maintaining the grade of your camera. It is very real and evident for those photography enthusiasts that are in capturing the particular nature’s eye-catching scenes : the mountains, the actual forests, the particular wild and the seas. Going to these daring places unquestionably requires a digital camera that can meet the wild’s tough areas.
Your articles are extremely helpful to me. Please provide more information!
Please provide me with additional details on the matter
Thanks for writing this article. I enjoy the topic too.
Thanks for writing the article
I really enjoyed reading your post, especially because it addressed my issue. It helped me a lot and I hope it can help others too.
I have been exploring for a bit for any high-quality articles or blog posts in this kind of area . Exploring in Yahoo I at last stumbled upon this site. Reading this info So i am satisfied to exhibit that I’ve an incredibly good uncanny feeling I found out just what I needed. I most certainly will make certain to don?t put out of your mind this site and give it a glance regularly.
Hello there, just was alert to your blog via Google, and found that it’s truly informative. I am gonna watch out for brussels. I’ll appreciate in case you proceed this in future. Many other folks will probably be benefited from your writing. Cheers!
There is certainly a great deal to know
about this topic. I really like all of the points you made.
Does anyone have any idea Cei Vape vape shop based in 20 Plantation Drive offers e-liquid manufactured by The Milkman Salt? I have emailed them at magicvaper2013@gmail.com
I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to construct my own blog and would like to know where u got this from. thank you
Nice weblog right here! Also your site lots up fast! What host are you the usage of? Can I get your associate link on your host? I wish my web site loaded up as quickly as yours lol
I am extremely impressed with your writing skills as well as with the
layout on your weblog. Is this a paid theme or did you customize it yourself?
Anyway keep up the nice quality writing, it’s rare to see a great blog
like this one today.
An attention-grabbing dialogue is value comment. I think that you should write more on this matter, it might not be a taboo subject however typically persons are not sufficient to speak on such topics. To the next. Cheers
Has anyone shopped at Big Daddy’s Vapor Trail Vapor Store located in 1216 Alcock St?
I value the blog.Really looking forward to read more. Great.
How do I write a Blog introducing a new to social networking site?
Exceptional post however , I was wanting to know if you could write a litte more on this
subject? I’d be very grateful if you could elaborate a little bit more.
Appreciate it!
I always hear that Fire fox is better than Internet Explorer and its faster safer ect….But what are the bad things about firefox?.
Thank you, I have recently been searching for information approximately this subject for a while and yours is the greatest I have came upon so far. But, what about the bottom line? Are you certain about the source?
Very interesting information!Perfect just what I was looking for! “I have great faith in fools — self confidence my friends call it.” by Edgar Allan Poe.
Hello! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me. Anyways, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!
Nice post. I learn something totally new and challenging
on sites I stumbleupon everyday. It will always be
helpful to read through articles from other writers and use something from other
sites.
https://waterfallmagazine.com
I needed to thank you for this wonderful read!! I definitely loved every little bit of
it. I have you bookmarked to look at new
stuff you post…
Like!! Thank you for publishing this awesome article.