How to Create a React Native App From Scratch?
May 19 , 2020 Posted by Creatix9
Create react app builds the structure of components so you can instantly start writing code for the react app, containing dependencies that give support to create react es6 and auto prefixed CSS. This article provides a complete guide on how to create a react app from scratch.
Take a Quick Start
With create-react-app you don’t have to install or configure different tools like Babel or webpack. The whole has made easy with create-react-app as it is preconfigured allowing you to just focus on the coding process. To start creating the first react-app you just need Node of 8.10 or an upper version installed on the local development machine. There are three commands available which you can use to create your first react app namely npx create-react-app, npm init react-app, and yarn create react-app. These commands create your app’s directory with an initial project structured and automatically install the dependency packages. It generates a package.json file that contains react, react-dom, and react-scripts dependencies.
Selecting a Template
You can start a new react app with a template by integrating [template-name] command into the code. If you don’t select a template with this command, the react app will be created with the basic template. You need to create a template for the react-app following the format of the cra-template-[template-name]. Thus write this code on the same line where the creation command is mentioned. However, there is a list of templates available which you can find easily by just writing “cra-template-*’ on npm. You have the option to create a react app typescript using a template by appending –template typescript on the same creation command. These commands create a directory with the app name you mentioned on the creation command.
Starting the App
Testing the App
Now comes the step to test react app, create-react-app options include Jest which is the test runner. Use the command npm test to run react-app tests, which will execute a script for this purpose. These tests are run in watch mode which uses the functionality of re-run allowing you to run the test every time to save a file. However, the command-line interface is used which avoids running all the tests again and again with an option to enter the test name pattern. If you also configure or execute anything before the running of tests by adding src/setupTests.js.
Deploying the App
Create a production version of your first react app and place it in the build directory using npm run build. Now you can easily copy the content of your mobile game development to the web server or choose to use the packages like an HTTP server. You can also test your react application from the build directly. By default Create react app assumes server root will be used for your app hosting if you don’t choose it then specify the homepage field into the package.json file. This will help to place the correct root path and don’t consider the server root for hosting purposes. These are different instructions to deploy for react apps using express, azure, firebase, etc. Execute the npm run eject to copy configuration files, dependencies, and scripts.
Also Read: 4 Tools to Create Android App without Coding