Create React App

link -
This creates a front-end build framework for quickly creating single-page applications that use React.
You can use this to create a project that lets you focus in the code rather than the build tools.
It sets up your development environment so that you can use the latest JavaScript features,
Under the hood this uses Babel and Webpack.
Install the Create React App Node module.

npm install -g create-react-app 


   "name": "my-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "0.9.5"
   "devDependencies": {},
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"


<!doctype html> 
<html lang="en">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      <title>React App</title>
      <div id="root"></div>


import React from 'react';  
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

   <App />,


body { 
   margin: 0;
   padding: 0;
   font-family: sans-serif;


import React, { Component } from 'react';  
import logo from './logo.svg';
import '/App.css';

class App extends Component {
   render() {
      return (
         <div className="App">
            <div className="App-header">
               <img src={logo} className="App-logo" alt="logo" />
               <h2>Welcome to React</h2>
            <p className="App-intro">
               To get started, edit <code>src/App.js</code> and save to reload

export default App;


import React from 'react';  
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);


.App { 
   text-align: center;

.App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;

.App-header {
   background-color: #222;
   height: 150px;
   padding: 20px;
   color: white;

.App-intro {
   font-size: large;

@keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext