Due to the numerous build tools, configuration files, and dependencies, developers frequently find it challenging to create React apps. React JavaScript library, which is a creation of Facebook, functions as a tool for designing user interface components. However, developing with React has some drawbacks, including the absence of pre-built components. React programmers either build from zero or rely on the community for these components. Utilizing Facebook’s command-line tool is one of the hassle-free approaches to addressing the problems underlying React. In this article, Create React App and its features will be discussed. Create React App What is Create React App? Setting up build tools, like Webpack, is necessary when building a React application. Since React’s JSX syntax is written in a language the browser cannot understand, it requires additional build tools. To assist you in creating applications compatible with the React framework, there is a tool called “Create React App”. The benefit of tools like this is that it frees you up to put all your efforts into developing apps rather than setting them up. As a result, when productivity rises, it relieves the developer of unnecessary effort. Create React App allows us to create single-page React applications and offers a modern setup without configurations. How to start with Create React App? Go to the terminal or command window and type “cd” to the folder where you want to construct your new application. Then create your new Create React App application, and execute the command listed below. npx create-react-app <my-app-name> cd my-app npm start Folder Structure The following file structure should be available when creating the project. Also, to build the project, we should avoid renaming ‘public/index.html’ and ‘src/index.js’ files. my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg How to develop components in isolation? An application often contains a large number of UI elements, each of which can exist in a variety of states. Tools for viewing states are not included by default in the Create React App. However, you can add Storybook for React or React Styleguidist to your application to develop components in isolation and view each of their states separately from your app. More information on how to install these and use them within the application is given in the documentation. What are the available scripts and commands in the Create React App? Scripts and commands are introduced to make application development easier for the user. The following are some of the scripts that you can run within. npm start – runs the application in development mode (http://localhost:3000). npm test – test runner is started in interactive watch mode. npm run build – builds the application and saves it in the build folder. React is correctly packaged in production mode, and the build is optimized for maximum performance. npm run eject – you can always eject if the build tool and configuration choices don’t meet your needs. This command lets you decouple your project from the single build dependency. What are the supported browsers and features? All modern browsers support Create React App, but older browsers such as Internet Explorer 9 require polyfills. Apart from the browsers specified, it is also possible to configure supported browsers so that the JavaScript code will work with the specified browsers. It supports a superset of the most recent JavaScript standard. It supports the following features, apart from ES6 syntax: Exponentiation Operator Async/await Object Rest/Spread Properties Dynamic import() Class Fields and Static Properties JSX, Flow and TypeScript Update to the Latest Version Whenever we use the ‘npx create-react-app my-app’ command, it automatically creates the app with the latest “Create React App” version. If you want to update the version of an already existing application, change the version using the package.json file. Can I add custom templates? With Custom Templates, you may choose a template to base your project on while still using all of Create React App’s features. By default, two templates are available: ' cra-template’ and ‘cra-template-typescript’. However, users can create their templates as well, and it can be done using the following command ‘cra-template-<template-name>’. Testing the templates and adding packages are also possible. How can testing and deployment be done? is necessary before proceeding with application deployment. Jest is the test runner. It is a node-based runner, which means the tests never run in a real web browser, but rather in a Node environment. Testing apps This allows us to enable rapid iteration and avoid flakiness. Due to ‘jsdom’, Jest can supply browser globals, like windows. However, they are merely estimates of the actual browser behavior. Jest is designed only for logic and component unit testing, not DOM peculiarities. If you require browser end-to-end tests, we advise using a different tool. They fall outside of Create React App’s pursuit. Deployment of the application is also a crucial part of application development. Once you run the npm run build command, it will create a production build of your app in a build directory. After that, set up your HTTP server so visitors can interact with the application. Learn more about application deployment using their documentation. How to use Sencha GRUI? It’s simple to create apps with GRUI by Sencha. You don’t need new plug-ins, and Sencha’s GRUI works perfectly with your current framework. You can break down this procedure into 4 simple phases with ease, as shown below: 1. Create React App npx create-react-app –template minimal my-app Run cd my-app 2. Add GRUI npm add @sencha/sencha-grid 3. Create your component by loading the pre-generated components import React from “react”; { SenchaGrid, Column } from “@sencha/sencha-grid”; import “@sencha/sencha-grid/dist/themes/grui.css”; export default class App extends React.Component { render() { const data = [ { col1: “val1”, col2: “data1”, col3: 1.1 }, { col1: “val2”, col2: “data2”, col3: 1.2 }, { col1: “val3”, col2: “data3”, col3: 1.3 }, ]; return ( <SenchaGrid data={data} style={{ width: “500px”, height: “300px” }}> <Column field=”col1″ text=”Column 1″ flex=”1″ /> <Column field=”col2″ text=”Column 2″ /> <Column field=”col3″ text=”Column 3″ align=”right” /> </SenchaGrid> ); } } 4. Initialize the application npm start To learn further about the above process, check out the article “ ” Create React App: It’s Not As Difficult As You Think.

Flow

Facebook

How To Add A Data Grid To A React Application

A Step-By-Step Guide To Web User Interface Testing

Learn More about Sencha

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Too Long; Didn't Read

Make resilience your competitive advantage

How to start with Create React App?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Using JavaScript Grid Tutorial to Solve Issues With App Development

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Using JavaScript Grid Tutorial to Solve Issues With App Development

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps