Simple Component is not rendering: React js

by

If a React Class name starts with a lowercase letter then no methods inside the class get called, i.e. nothing Renders, and you don’t get any error message in the Browser console,
because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter, so always use Upper Case.

Instead of reactTest use this: ReactTest it will work.

As per DOC:

User-Defined Components Must Be Capitalized.

When an element type starts with a lowercase letter, it refers to a
built-in component like <div> or <span> and results in a string ‘div’
or ‘span’ passed to React.createElement. Types that start with a
capital letter like <Foo /> compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.

Check the working code:

<!DOCTYPE html>
<html>
    <head>
        <title>React without npm</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
    </head>
    <body>
    <div id="test"></div>
    <script type="text/babel">

        var ReactTest = React.createClass({
            render: function(){
                return(
                    <h1>React Without NPM</h1>
                );
            }
        });

        ReactDOM.render(<ReactTest />,document.getElementById('test'));
    </script>
    </body>
</html>

More Related Contents:

  1. What is component in reactjs?
  2. The useState set method is not reflecting a change immediately
  3. Call child method from parent
  4. Window is not defined in Next.js React app
  5. React Context vs React Redux, when should I use each one? [closed]
  6. Correct way to push into state array
  7. how to download file in react js
  8. OnClick Event binding in React.js
  9. What is event pooling in react?
  10. React doesn’t reload component data on route param change or query change
  11. Can I add a key prop to a React fragment?
  12. How to add multiple classes to a ReactJS Component?
  13. How to import image (.svg, .png ) in a React Component
  14. Typescript: React event types
  15. firebase.auth is not a function
  16. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  17. How to loop an object in React?
  18. Best way to polyfill ES6 features in React app that uses create-react-app
  19. How to update state with usestate in an array of objects?
  20. How to render Streamable image on React coming from FastAPI server?
  21. Determine which dependency array variable caused useEffect hook to fire
  22. unable to deploy next js to azure
  23. What does “export default” do in JSX?
  24. Axios – DELETE Request With Request Body and Headers?
  25. Updating state to the same state directly in the component body
  26. reactjs and masonry layout – undefined
  27. how to set up an inline svg with webpack
  28. Jest – SyntaxError: Cannot use import statement outside a module
  29. Does strict mode work differently with React 18?
  30. Jest spyOn function called

Leave a Comment