Create React App

link - create-react-app.dev
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 

package.json

{ 
   "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"
   }
}

public/index.html

<!doctype html> 
<html lang="en">
   <head>
      <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>
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

src/index.js

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

ReactDOM.render(
   <App />,
   document.getElementById('root')
);

src/index.css

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

src/App.js

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>
            </div>
            <p className="App-intro">
               To get started, edit <code>src/App.js</code> and save to reload
            </p>
         </div>
       );
   }
}

export default App;

src/App.test.js

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);
});

src/App.css

.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); }
}

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