Set New React Application
Root HTML File: public/index.html
Having 3 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 in HTML File: The root div element, which is named by convention.
<div id="root"></div>
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> </div> ) } } 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')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); function App() { return ( <div className="App"> <h1>TheTechfoyer Retails</h1> </div> ); } export default App; |
Create 2 More files : webpack.config.js and, .babelrc in the root
