How to start with Create React App?

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 Create React App 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.

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?

Testing apps 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.

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.”