React JS

Get Started on a new React Application

Get Started on a new React Application

Set New React Application

Root HTML File:  public/index.html
Having 3 CDNs in the head: - React, React DOM, and Babel.

<!DOCTYPE html>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="^16/umd/react.production.min.js"></script>
    <script src=""></script>
    <script src=""></script>

    <div id="root"></div>

    <script type="text/babel">
      // React code will go here

- React - the React top level API
- React DOM - adds DOM-specific methods
- Babel - a JavaScript compiler that lets us use ES6+ in old browsers

The entry point in HTML File: The root div element, which is named by convention.

<div id="root"></div>

Root JS File:  src/index.js

Inside index.js file,  import React, ReactDOM, and the CSS file.

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>TheTechfoyer Retails</h1>
ReactDOM.render(<App />, document.getElementById('root'))

// we're loading the Component as a property of
React, so we no longer need to extend React.Component as
class, App itself extends the React.Component here

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

const root = ReactDOM.createRoot(document.getElementById('root'));
    <App />

function App() {
  return (
    <div className="App">
      <h1>TheTechfoyer Retails</h1>
export default App;

Create 2 More files : webpack.config.js and, .babelrc in the root

Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.