The Basics

It's important to respect them, if you don't and we run your page on our servers, it will not work.

Rendering a JavaScript or JSX file

That's how we render JavaScript or JSX file, at least for the moment.

index.js

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

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

You need to follow the instructions to render correctly your pages.

(JavaScript) Exporting "App" to import it to the index.js file

App.js

import React from 'react';

function App() {
  return (
  // JSX Page Code
  // JSX Page Code
  // JSX Page Code
  // JSX Page Code
  // JSX Page Code
  // JSX Page Code
    );
}

export default App;

(JSX) Exporting "App" to import it to the index.js file

App.jsx

import React from 'react'

const App = () => {
  return (
  //JSX Page Code
  //JSX Page Code
  //JSX Page Code
  //JSX Page Code
  //JSX Page Code
  //JSX Page Code
  //JSX Page Code
      );
};

export default App;

Some examples

For JavaScript files :

App.js

import logo from './logo.svg';
import './App.css';
import React from 'react'

function App() {
  return (
      <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          This page has been successfully built.
        </p>
        <a>
          Now you can modify the jsx script.
        </a>
      </header>
    </div>
      );
};

export default App;

For JSX files :

App.jsx

import logo from './logo.svg';
import './App.css';
import React from 'react'

const app = () => {
  return (
      <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          This page has been successfully built.
        </p>
        <a>
          Now you can modify the jsx script.
        </a>
      </header>
    </div>
      );
};

export default App;