React JS

Get Started on a new React Application

Get Started on a new React Application

Set New React Application


Lets start without our root file public/index.html
load in three CDNs in the head - React, React DOM, and Babel.

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

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

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

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



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 for our app will be the root div element, which is named by convention.


/src
Go ahead and delete all the files out of the /src directory, just keep index.css and index.js.


index.css,
Just Copy the Bootstrap or whatever CSS framework you want, or nothing at all.

index.js
import React, ReactDOM, and the CSS file.
and render the App to the root as before at the last

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

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



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


Deepak Talwar

Deepak Talwar

Principal Software Engineer and Full Stack Developer with 12+ years of Professional Experience in Microsoft Technologies. Hands on experience with C#, ASP.NET, ASP.NET MVC, ASP.NET Core, WebAPI, Linq, Entity Framework, MS-SQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, ReactJs, AngularJs, Laravel, Codeingiter, Serenity. VBA, Software Architecture, Web Design and Development.

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.

Instagram