SlideShare une entreprise Scribd logo
1  sur  15
How Create React App help in creating a New
React Applications?
React is one of the popular JavaScript frameworks that help in
creating front-end applications. React was created by Facebook and
gained massive popularity. It allows developers to create a fast app
using an intuitive programming paradigm. It ties JavaScript with an
HTML like syntax known as JSX.
Previously starting a new React project would have a complicated
multi-step process that involves setting a system. This code
transpiler converts modern syntax to code that is readable by all
browsers. Create React Apps which cover all JavaScript packages you
need to run a React node JS project.
The project makes add code transpiring, basic linting, testing, and
building systems. You can add a server with hot reloading which will
refresh your page with making appropriate changes. Create
directories structures and components from where you can jump and
start coding within a few minutes.
Moreover, you needn’t worry about configuring a build system. You
don’t need to transpile code to cross-browser. You don’t have to
worry about the most complicated system. Just start writing React
code with minimal preparation.
Building a react app is quite tough at the beginning. It mainly uses
dependencies, configuration, and other requirements before you
create an app react app. React app uses the CTI tool, which helps in
reducing all complexities and makes react apps simple to
understand. The create react apps tool is best for beginners as it set
up a development environment quickly with providing excellent
developers experience and optimizes the app for the production.
Check the requirements
As create React, apps are maintained by Facebook; it can work on
any platforms. Example: Windows, Linux, macOS, etc. create react
project where you need to install the following things like:
● Node version >= 8.10
● NPM version >= 5.6
Know how to check the current version of node and npm in the
system by running code:
$node -v
Check npm version in the command prompt
$ npm -v
Know how to install
If you want to learn how to install react using CRA tool, know the
steps below
Install React
● C:Usersjavatpoint> npm install -g create-react-app
Create a new React Project
● C:Usersjavatpoint> create-react-app react project
● C:Usersjavatpoint> npx create-react-app react project
The above command will help to install the react and create a new
project with the same name. Type command is given below:
What comes with create-react-app?
Here, we can add more support for things like Sass or TypeScript. It
can run with a single command and get new react apps which comes
along with:
● A recommended starting folder structure
● Extensibility
● Solid build setup with webpack and Babel
● Script to run our React Application
What’s a default way we can start with?
1. Build Setup
Our react app needs to build a step to transpile and code something
that browsers can read. With this, we can see many setups without
using Create App React.
● Add convenient folder structure
If you want to know about files and folders available in the root
directory then check below:
● Node_modules: It comes with react library and other third-
party libraries
● Public: It holds public asset of application which contain
index.html which mount the application on <div id=” root”>
</div>element.
● Src: It contains App.css, index.css, App.js, and serviceworker.js
files. The App.js file is mainly responsible for displaying the
output screen to React.
● Package-lock.json: It helps in generating automatically
operations where npm package modifies node_modules and
cannot be published.
● Package.json: It holds metadata which gives information to
npm and allows to identify project and handle dependencies.
● README.md: It helps in the product documentation for how to
read about react topics
2. Build Scripts
Create React App, which comes with few scripts that help in
development. Use scripts whenever we want to:
● Run application script for Development
● Build applications for production
● A test application that creates tests
● Add below code in package.json
Now run above commands like shown below:
● Start: Here, the command will start a development application.
You can open the application in the browser
● Build: One can bundle a production application and generate
only a few files that can host users.
● Test: Run test which comes with Create App React
● Eject: The eject gives access to the configure aspect for React
application. Create React App with no longer handling the
configuration for your application.
3. Add scripts to run applications
Take a look at what’s running tests look like:
4. Add Scripts to bundle for production
For hosting the code for users, we need to bundle all code into a
JavaScript file that users can use for loading. You can run the
following files as coded below:
npm run build
After successfully creating the new files, we need to provide the
React app to our users. You can add new files to the build folder.
Now host on a server and point users towards index.html file.
Wrapping up:
With Create React App one can configure own webpack and babel
setups as it’s one of the excellent tools for React developers. Now
again use React App to start your applications which provide a solid
base and keep info updated by the React team.
Global Network
USA
4811 N Harding Ave,
Chicago IL 60625
P: +1 (903) 200-8801
CANADA
1445 Rennie St Oshawa,
Ontario, L1K 0N9,CANADA
P: (416) 272-0981
INDIA
609/610,City Center Science
City Road
Ahmedabad - 380060
P: +919586777575
UK
6 Hastings Avenue
Ilford , IG6 1DZ
P: +44 (798) 560 0352
Web & Mobile App Development Company
https://www.concettolabs.com

Contenu connexe

Tendances

PHP on Google App Engine
PHP on Google App EnginePHP on Google App Engine
PHP on Google App Enginetim4h0blyn
 
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...Edureka!
 
Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...
Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...
Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...Windows Developer
 
Setup Build & Deploy with Jenkins CI
Setup Build & Deploy with Jenkins CISetup Build & Deploy with Jenkins CI
Setup Build & Deploy with Jenkins CIwalming
 
Environment Setup for Programming Languages
Environment Setup for Programming LanguagesEnvironment Setup for Programming Languages
Environment Setup for Programming LanguagesRup Chowdhury
 
Go Pro, Inc. Case Study: Dive into the details of our node.js applications
Go Pro, Inc. Case Study: Dive into the details of our node.js applicationsGo Pro, Inc. Case Study: Dive into the details of our node.js applications
Go Pro, Inc. Case Study: Dive into the details of our node.js applicationsAndrew Maxwell
 
Visual Studio Tools for Cordova
Visual Studio Tools for CordovaVisual Studio Tools for Cordova
Visual Studio Tools for CordovaAndrea Tino
 
GoPro, Inc. Case study: Dive into the details of our web applications
GoPro, Inc. Case study: Dive into the details of our web applicationsGoPro, Inc. Case study: Dive into the details of our web applications
GoPro, Inc. Case study: Dive into the details of our web applicationsAndrew Maxwell
 
Automated Testing Environment by Bugzilla, Testopia and Jenkins
Automated Testing Environment by Bugzilla, Testopia and JenkinsAutomated Testing Environment by Bugzilla, Testopia and Jenkins
Automated Testing Environment by Bugzilla, Testopia and Jenkinswalkerchang
 
Branching Strategies For Git and Subversion
Branching Strategies For Git and SubversionBranching Strategies For Git and Subversion
Branching Strategies For Git and SubversionElian, I.
 
React Native: Is It Worth It? UA Mobile 2017.
React Native: Is It Worth It? UA Mobile 2017.React Native: Is It Worth It? UA Mobile 2017.
React Native: Is It Worth It? UA Mobile 2017.UA Mobile
 
Test Driven Development with OSGi - Balázs Zsoldos
Test Driven Development with OSGi - Balázs ZsoldosTest Driven Development with OSGi - Balázs Zsoldos
Test Driven Development with OSGi - Balázs Zsoldosmfrancis
 
469-Porting the build system of a commercial RCP Application from Europa to G...
469-Porting the build system of a commercial RCP Application from Europa to G...469-Porting the build system of a commercial RCP Application from Europa to G...
469-Porting the build system of a commercial RCP Application from Europa to G...gustavoeliano
 
Build and release iOS apps using Fastlane tools
Build and release iOS apps using Fastlane toolsBuild and release iOS apps using Fastlane tools
Build and release iOS apps using Fastlane toolsWise Engineering
 
Cross Browser Automation Testing Using Watir
Cross Browser Automation Testing Using WatirCross Browser Automation Testing Using Watir
Cross Browser Automation Testing Using WatirSarah Elson
 
Scale your PHP application with Elastic Beanstalk - CloudParty Genova
Scale your PHP application with Elastic Beanstalk - CloudParty GenovaScale your PHP application with Elastic Beanstalk - CloudParty Genova
Scale your PHP application with Elastic Beanstalk - CloudParty GenovaCorley S.r.l.
 
VISUG: Visual studio for web developers
VISUG: Visual studio for web developersVISUG: Visual studio for web developers
VISUG: Visual studio for web developersKevin DeRudder
 

Tendances (20)

Jenkins
JenkinsJenkins
Jenkins
 
PHP on Google App Engine
PHP on Google App EnginePHP on Google App Engine
PHP on Google App Engine
 
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
CI CD Pipeline Using Jenkins | Continuous Integration and Deployment | DevOps...
 
Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...
Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...
Build 2017 - B8096 - Ten things you didn’t know about Visual Studio 2017 for ...
 
Setup Build & Deploy with Jenkins CI
Setup Build & Deploy with Jenkins CISetup Build & Deploy with Jenkins CI
Setup Build & Deploy with Jenkins CI
 
Environment Setup for Programming Languages
Environment Setup for Programming LanguagesEnvironment Setup for Programming Languages
Environment Setup for Programming Languages
 
Node.js
Node.jsNode.js
Node.js
 
Go Pro, Inc. Case Study: Dive into the details of our node.js applications
Go Pro, Inc. Case Study: Dive into the details of our node.js applicationsGo Pro, Inc. Case Study: Dive into the details of our node.js applications
Go Pro, Inc. Case Study: Dive into the details of our node.js applications
 
Visual Studio Tools for Cordova
Visual Studio Tools for CordovaVisual Studio Tools for Cordova
Visual Studio Tools for Cordova
 
GoPro, Inc. Case study: Dive into the details of our web applications
GoPro, Inc. Case study: Dive into the details of our web applicationsGoPro, Inc. Case study: Dive into the details of our web applications
GoPro, Inc. Case study: Dive into the details of our web applications
 
Automated Testing Environment by Bugzilla, Testopia and Jenkins
Automated Testing Environment by Bugzilla, Testopia and JenkinsAutomated Testing Environment by Bugzilla, Testopia and Jenkins
Automated Testing Environment by Bugzilla, Testopia and Jenkins
 
Branching Strategies For Git and Subversion
Branching Strategies For Git and SubversionBranching Strategies For Git and Subversion
Branching Strategies For Git and Subversion
 
React Native: Is It Worth It? UA Mobile 2017.
React Native: Is It Worth It? UA Mobile 2017.React Native: Is It Worth It? UA Mobile 2017.
React Native: Is It Worth It? UA Mobile 2017.
 
Vsts ci cd-java
Vsts ci cd-javaVsts ci cd-java
Vsts ci cd-java
 
Test Driven Development with OSGi - Balázs Zsoldos
Test Driven Development with OSGi - Balázs ZsoldosTest Driven Development with OSGi - Balázs Zsoldos
Test Driven Development with OSGi - Balázs Zsoldos
 
469-Porting the build system of a commercial RCP Application from Europa to G...
469-Porting the build system of a commercial RCP Application from Europa to G...469-Porting the build system of a commercial RCP Application from Europa to G...
469-Porting the build system of a commercial RCP Application from Europa to G...
 
Build and release iOS apps using Fastlane tools
Build and release iOS apps using Fastlane toolsBuild and release iOS apps using Fastlane tools
Build and release iOS apps using Fastlane tools
 
Cross Browser Automation Testing Using Watir
Cross Browser Automation Testing Using WatirCross Browser Automation Testing Using Watir
Cross Browser Automation Testing Using Watir
 
Scale your PHP application with Elastic Beanstalk - CloudParty Genova
Scale your PHP application with Elastic Beanstalk - CloudParty GenovaScale your PHP application with Elastic Beanstalk - CloudParty Genova
Scale your PHP application with Elastic Beanstalk - CloudParty Genova
 
VISUG: Visual studio for web developers
VISUG: Visual studio for web developersVISUG: Visual studio for web developers
VISUG: Visual studio for web developers
 

Similaire à How create react app help in creating a new react applications

3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdfBOSC Tech Labs
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxwrite31
 
Steps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACSteps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACInexture Solutions
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by CitytechRitwik Das
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionThomas Daly
 
Top 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptxTop 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptx75waytechnologies
 
Getting Started With React Native Presntation
Getting Started With React Native PresntationGetting Started With React Native Presntation
Getting Started With React Native PresntationKnoldus Inc.
 
Lecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptxLecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptxGevitaChinnaiah
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
Best React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfBest React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfFuGenx Technologies
 
Integrating Python with NodeJS and React Powerful Combination for Web Develop...
Integrating Python with NodeJS and React Powerful Combination for Web Develop...Integrating Python with NodeJS and React Powerful Combination for Web Develop...
Integrating Python with NodeJS and React Powerful Combination for Web Develop...DarshanaMallick
 
Angular4 getting started
Angular4 getting startedAngular4 getting started
Angular4 getting startedTejinderMakkar
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrAfreenK
 
M365 global developer bootcamp 2019
M365 global developer bootcamp 2019M365 global developer bootcamp 2019
M365 global developer bootcamp 2019Thomas Daly
 

Similaire à How create react app help in creating a new react applications (20)

3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
Steps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MACSteps to Install NPM and Node.js on Windows and MAC
Steps to Install NPM and Node.js on Windows and MAC
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
 
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS
 
M365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx VersionM365 global developer bootcamp 2019 Intro to SPFx Version
M365 global developer bootcamp 2019 Intro to SPFx Version
 
Top 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptxTop 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptx
 
learning react
learning reactlearning react
learning react
 
Getting Started With React Native Presntation
Getting Started With React Native PresntationGetting Started With React Native Presntation
Getting Started With React Native Presntation
 
Lecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptxLecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptx
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Reactjs
ReactjsReactjs
Reactjs
 
Best React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfBest React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdf
 
React Native
React Native React Native
React Native
 
Integrating Python with NodeJS and React Powerful Combination for Web Develop...
Integrating Python with NodeJS and React Powerful Combination for Web Develop...Integrating Python with NodeJS and React Powerful Combination for Web Develop...
Integrating Python with NodeJS and React Powerful Combination for Web Develop...
 
Angular4 getting started
Angular4 getting startedAngular4 getting started
Angular4 getting started
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
 
M365 global developer bootcamp 2019
M365 global developer bootcamp 2019M365 global developer bootcamp 2019
M365 global developer bootcamp 2019
 

Plus de Concetto Labs

Which are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdf
Which are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdfWhich are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdf
Which are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdfConcetto Labs
 
Best Outsourcing Quality Assurance Service Tips for Boosting your Business.pptx
Best Outsourcing Quality Assurance Service Tips for Boosting your Business.pptxBest Outsourcing Quality Assurance Service Tips for Boosting your Business.pptx
Best Outsourcing Quality Assurance Service Tips for Boosting your Business.pptxConcetto Labs
 
Guide on Developing Mood Tracker App.pptx
Guide on Developing Mood Tracker App.pptxGuide on Developing Mood Tracker App.pptx
Guide on Developing Mood Tracker App.pptxConcetto Labs
 
Which are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptx
Which are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptxWhich are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptx
Which are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptxConcetto Labs
 
Complete Guide_ Mobile App Navigation Designs.pptx
Complete Guide_ Mobile App Navigation Designs.pptxComplete Guide_ Mobile App Navigation Designs.pptx
Complete Guide_ Mobile App Navigation Designs.pptxConcetto Labs
 
The Top 15 Mobile App Development Trends to Watch for in 2022.pptx
The Top 15 Mobile App Development Trends to Watch for in 2022.pptxThe Top 15 Mobile App Development Trends to Watch for in 2022.pptx
The Top 15 Mobile App Development Trends to Watch for in 2022.pptxConcetto Labs
 
How Does Metaverse Affect E-Commerce Business_.pptx
How Does Metaverse Affect E-Commerce Business_.pptxHow Does Metaverse Affect E-Commerce Business_.pptx
How Does Metaverse Affect E-Commerce Business_.pptxConcetto Labs
 
Smart Building Technology_ Concept, Features, and Application.pdf
Smart Building Technology_ Concept, Features, and Application.pdfSmart Building Technology_ Concept, Features, and Application.pdf
Smart Building Technology_ Concept, Features, and Application.pdfConcetto Labs
 
How to Develop Your Own Music Streaming App with Unique Features_.pdf
How to Develop Your Own Music Streaming App with Unique Features_.pdfHow to Develop Your Own Music Streaming App with Unique Features_.pdf
How to Develop Your Own Music Streaming App with Unique Features_.pdfConcetto Labs
 
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...Concetto Labs
 
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...Concetto Labs
 
Developing a Healthcare Mobile App_ Types, Examples, and Features.pdf
Developing a Healthcare Mobile App_ Types, Examples, and Features.pdfDeveloping a Healthcare Mobile App_ Types, Examples, and Features.pdf
Developing a Healthcare Mobile App_ Types, Examples, and Features.pdfConcetto Labs
 
Laravel 9_ Everything You Need To Know About The Latest Major Release.pdf
Laravel 9_ Everything You Need To Know About The Latest Major Release.pdfLaravel 9_ Everything You Need To Know About The Latest Major Release.pdf
Laravel 9_ Everything You Need To Know About The Latest Major Release.pdfConcetto Labs
 
The Complete Guide to API Development in 2022.pdf
The Complete Guide to API Development in 2022.pdfThe Complete Guide to API Development in 2022.pdf
The Complete Guide to API Development in 2022.pdfConcetto Labs
 
What Is Mobile Device Testing and Best Practices For Mobile Testing_.pdf
What Is Mobile Device Testing and Best Practices For Mobile Testing_.pdfWhat Is Mobile Device Testing and Best Practices For Mobile Testing_.pdf
What Is Mobile Device Testing and Best Practices For Mobile Testing_.pdfConcetto Labs
 
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdfConcetto Labs
 
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptxConcetto Labs
 
How To Develop A Logistics & Transportation Mobile App_.pptx
How To Develop A Logistics & Transportation Mobile App_.pptxHow To Develop A Logistics & Transportation Mobile App_.pptx
How To Develop A Logistics & Transportation Mobile App_.pptxConcetto Labs
 
13 Android New Features You Must Try Out Today.pptx
13 Android New Features You Must Try Out Today.pptx13 Android New Features You Must Try Out Today.pptx
13 Android New Features You Must Try Out Today.pptxConcetto Labs
 
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxGet Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxConcetto Labs
 

Plus de Concetto Labs (20)

Which are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdf
Which are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdfWhich are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdf
Which are The Top 6 Microsoft PowerApps Use Cases with Examples_.pdf
 
Best Outsourcing Quality Assurance Service Tips for Boosting your Business.pptx
Best Outsourcing Quality Assurance Service Tips for Boosting your Business.pptxBest Outsourcing Quality Assurance Service Tips for Boosting your Business.pptx
Best Outsourcing Quality Assurance Service Tips for Boosting your Business.pptx
 
Guide on Developing Mood Tracker App.pptx
Guide on Developing Mood Tracker App.pptxGuide on Developing Mood Tracker App.pptx
Guide on Developing Mood Tracker App.pptx
 
Which are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptx
Which are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptxWhich are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptx
Which are the Skills_Tools required for Becoming a Mobile QA Engineer_.pptx
 
Complete Guide_ Mobile App Navigation Designs.pptx
Complete Guide_ Mobile App Navigation Designs.pptxComplete Guide_ Mobile App Navigation Designs.pptx
Complete Guide_ Mobile App Navigation Designs.pptx
 
The Top 15 Mobile App Development Trends to Watch for in 2022.pptx
The Top 15 Mobile App Development Trends to Watch for in 2022.pptxThe Top 15 Mobile App Development Trends to Watch for in 2022.pptx
The Top 15 Mobile App Development Trends to Watch for in 2022.pptx
 
How Does Metaverse Affect E-Commerce Business_.pptx
How Does Metaverse Affect E-Commerce Business_.pptxHow Does Metaverse Affect E-Commerce Business_.pptx
How Does Metaverse Affect E-Commerce Business_.pptx
 
Smart Building Technology_ Concept, Features, and Application.pdf
Smart Building Technology_ Concept, Features, and Application.pdfSmart Building Technology_ Concept, Features, and Application.pdf
Smart Building Technology_ Concept, Features, and Application.pdf
 
How to Develop Your Own Music Streaming App with Unique Features_.pdf
How to Develop Your Own Music Streaming App with Unique Features_.pdfHow to Develop Your Own Music Streaming App with Unique Features_.pdf
How to Develop Your Own Music Streaming App with Unique Features_.pdf
 
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
 
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
What are the Cost and Key Features of On-Demand Car Wash App Development Serv...
 
Developing a Healthcare Mobile App_ Types, Examples, and Features.pdf
Developing a Healthcare Mobile App_ Types, Examples, and Features.pdfDeveloping a Healthcare Mobile App_ Types, Examples, and Features.pdf
Developing a Healthcare Mobile App_ Types, Examples, and Features.pdf
 
Laravel 9_ Everything You Need To Know About The Latest Major Release.pdf
Laravel 9_ Everything You Need To Know About The Latest Major Release.pdfLaravel 9_ Everything You Need To Know About The Latest Major Release.pdf
Laravel 9_ Everything You Need To Know About The Latest Major Release.pdf
 
The Complete Guide to API Development in 2022.pdf
The Complete Guide to API Development in 2022.pdfThe Complete Guide to API Development in 2022.pdf
The Complete Guide to API Development in 2022.pdf
 
What Is Mobile Device Testing and Best Practices For Mobile Testing_.pdf
What Is Mobile Device Testing and Best Practices For Mobile Testing_.pdfWhat Is Mobile Device Testing and Best Practices For Mobile Testing_.pdf
What Is Mobile Device Testing and Best Practices For Mobile Testing_.pdf
 
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
 
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
 
How To Develop A Logistics & Transportation Mobile App_.pptx
How To Develop A Logistics & Transportation Mobile App_.pptxHow To Develop A Logistics & Transportation Mobile App_.pptx
How To Develop A Logistics & Transportation Mobile App_.pptx
 
13 Android New Features You Must Try Out Today.pptx
13 Android New Features You Must Try Out Today.pptx13 Android New Features You Must Try Out Today.pptx
13 Android New Features You Must Try Out Today.pptx
 
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxGet Started with ReactJS 18 Development Services_ New Features and Updates.pptx
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptx
 

Dernier

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 

Dernier (20)

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 

How create react app help in creating a new react applications

  • 1. How Create React App help in creating a New React Applications?
  • 2. React is one of the popular JavaScript frameworks that help in creating front-end applications. React was created by Facebook and gained massive popularity. It allows developers to create a fast app using an intuitive programming paradigm. It ties JavaScript with an HTML like syntax known as JSX. Previously starting a new React project would have a complicated multi-step process that involves setting a system. This code transpiler converts modern syntax to code that is readable by all browsers. Create React Apps which cover all JavaScript packages you need to run a React node JS project.
  • 3. The project makes add code transpiring, basic linting, testing, and building systems. You can add a server with hot reloading which will refresh your page with making appropriate changes. Create directories structures and components from where you can jump and start coding within a few minutes. Moreover, you needn’t worry about configuring a build system. You don’t need to transpile code to cross-browser. You don’t have to worry about the most complicated system. Just start writing React code with minimal preparation.
  • 4. Building a react app is quite tough at the beginning. It mainly uses dependencies, configuration, and other requirements before you create an app react app. React app uses the CTI tool, which helps in reducing all complexities and makes react apps simple to understand. The create react apps tool is best for beginners as it set up a development environment quickly with providing excellent developers experience and optimizes the app for the production. Check the requirements As create React, apps are maintained by Facebook; it can work on any platforms. Example: Windows, Linux, macOS, etc. create react project where you need to install the following things like:
  • 5. ● Node version >= 8.10 ● NPM version >= 5.6 Know how to check the current version of node and npm in the system by running code: $node -v Check npm version in the command prompt $ npm -v Know how to install If you want to learn how to install react using CRA tool, know the steps below
  • 6. Install React ● C:Usersjavatpoint> npm install -g create-react-app Create a new React Project ● C:Usersjavatpoint> create-react-app react project ● C:Usersjavatpoint> npx create-react-app react project The above command will help to install the react and create a new project with the same name. Type command is given below:
  • 7. What comes with create-react-app? Here, we can add more support for things like Sass or TypeScript. It can run with a single command and get new react apps which comes along with: ● A recommended starting folder structure ● Extensibility ● Solid build setup with webpack and Babel ● Script to run our React Application
  • 8. What’s a default way we can start with? 1. Build Setup Our react app needs to build a step to transpile and code something that browsers can read. With this, we can see many setups without using Create App React. ● Add convenient folder structure If you want to know about files and folders available in the root directory then check below:
  • 9. ● Node_modules: It comes with react library and other third- party libraries ● Public: It holds public asset of application which contain index.html which mount the application on <div id=” root”> </div>element. ● Src: It contains App.css, index.css, App.js, and serviceworker.js files. The App.js file is mainly responsible for displaying the output screen to React. ● Package-lock.json: It helps in generating automatically operations where npm package modifies node_modules and cannot be published. ● Package.json: It holds metadata which gives information to npm and allows to identify project and handle dependencies. ● README.md: It helps in the product documentation for how to read about react topics
  • 10. 2. Build Scripts Create React App, which comes with few scripts that help in development. Use scripts whenever we want to: ● Run application script for Development ● Build applications for production ● A test application that creates tests ● Add below code in package.json
  • 11. Now run above commands like shown below: ● Start: Here, the command will start a development application. You can open the application in the browser ● Build: One can bundle a production application and generate only a few files that can host users. ● Test: Run test which comes with Create App React ● Eject: The eject gives access to the configure aspect for React application. Create React App with no longer handling the configuration for your application.
  • 12. 3. Add scripts to run applications Take a look at what’s running tests look like: 4. Add Scripts to bundle for production For hosting the code for users, we need to bundle all code into a JavaScript file that users can use for loading. You can run the following files as coded below: npm run build After successfully creating the new files, we need to provide the React app to our users. You can add new files to the build folder. Now host on a server and point users towards index.html file.
  • 13. Wrapping up: With Create React App one can configure own webpack and babel setups as it’s one of the excellent tools for React developers. Now again use React App to start your applications which provide a solid base and keep info updated by the React team.
  • 14. Global Network USA 4811 N Harding Ave, Chicago IL 60625 P: +1 (903) 200-8801 CANADA 1445 Rennie St Oshawa, Ontario, L1K 0N9,CANADA P: (416) 272-0981 INDIA 609/610,City Center Science City Road Ahmedabad - 380060 P: +919586777575 UK 6 Hastings Avenue Ilford , IG6 1DZ P: +44 (798) 560 0352
  • 15. Web & Mobile App Development Company https://www.concettolabs.com