Help with one page React

Hi

I am trying to make a one page react application with a class.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <style>
        .person {
            display: inline-block;
            margin: 10px;
            border: 1px solid #eee;
            box-shadow: 0 2px 2px #ccc;
            width: 200px;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div id="app"></div>

    <script type="text/babel">

        class App extends Component {
            render() {
                return (
                    <div className="app">

                        <h1>Hi I am a react App</h1>
                    </div>
                );
            }


        }
        
        ReactDOM.render(<App />, document.querySelector('#app'));
    </script>
</body>

</html>

I know it is an unusual format, but I am curious as to why this does not seem to work?

thanks!
Karen

Component is a property of React

const { Component } = React // React.Component

  class App extends Component {

    render() { ....

Like this? … It does not yet render [ … now fixed ]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <style>
        .styling {
            display: inline-block;
            margin: 10px;
            border: 1px solid #eee;
            box-shadow: 0 2px 2px #ccc;
            width: 200px;
            padding: 20px;
        }
    </style>
</head>

<body>

    <div id="app"></div>

    <script type="text/babel">
        const { Component } = React;
        class App extends Component {
            render() {
                return (
                    <div className="styling">
                        <h1>Hi I am a react App</h1>
                    </div>
                );
            }
        }

        ReactDOM.render(<App />, document.querySelector('#app'));
    </script>
</body>

</html>

Yes like that.

Late here, so can’t look at it now.

I tested with vscode’s live server and the text was rendered to the page.

Got it- –

Thanks ever so much for your help — the create-react-app obfuscates the flow a bit for us newbies — it is interesting to see it in its most basic format.

/KK

Have just embarked on a React course myself, agreed :slight_smile:

If you are just getting started with React, might I suggest you look into functional components instead of (or in addition to) class-based components.

Functional components are functions (as opposed to classes) that accept props and return JSX:

const App = (props) => {
  return (
    <div className="styling">
      <h1>Hi, {props.name}</h1>
    </div>
  );
}

ReactDOM.render(<App name='Jim' />, document.querySelector('#app'));

Previously function components were used to render out static HTML, but whenever a component had any state, or needed to use a lifecyle method (for example when fetching data), you would reach for a class-based component.

This changed however in React 16.8, with the addition of hooks. These let you use state and other React features without writing a class.

Since then, hooks have taken the React world by storm. While class-based components aren’t going anywhere for the foreseeable future, the React team recommends writing new components as functional components and using hooks if they need to maintain any state etc.

SitePoint just published a ton of React content as part of their React hub. If you’re looking for anything in particular, I can probably point you towards a good resources.

1 Like

I am pretty much looking for beginner to advanced material on this topic.

You can find all of our free content here: https://www.sitepoint.com/javascript/react/
And there’s a whole bunch more on SitePoint Premium if you are a member there.

If you’re looking for a starting point, this is good:

It starts off simple, but by the end you’ll be learning about component reuse, prop checking and refactoring simple components to use hooks.

Once you’re past the fundamentals, I’d recommend making a React app that talks to a backend and persists data. Something like this:

Or here’s one of mine: https://hibbard.eu/rails-react-crud-app/
This is a little older and uses classes. I probably need to update it.

And if you’re new to hooks:

HTH

1 Like