React Basic Example

Question

im a newone in react and I have tried this example but got an error, with no idea what the issue is. i simply add a function component of HelloWorld and add it to the app component, but it does not execute. please help.

App.js

import './App.css';
import welcome from './components/welcome';
import { Component } from 'react';

class App extends Component
{
  render()
  {
    console.log('inside render of app');
    return(
      <div className="App">
        
        <welcome></welcome>
        
      </div>
    );
  }
}

export default App;

and

my own functional component, just like to add that I put this file inside the components folder

import React from 'react'

function welcome()
{
    console.log("inside welcome.js function");
    return  <h1> Welcome Ashish </h1>

}

export default welcome

Answer 1

In react js our component name must be start with capital letters. So there we rename componet welcome to Welcome.

import React from 'react'

function Welcome()
{
    console.log("inside welcome.js function");
    return  <h1> Welcome Ashish </h1>

}

export default Welcome

and in App.js use

import './App.css';
import Welcome from './components/Welcome';
import { Component } from 'react';

class App extends Component
{
  render()
  {
    console.log('inside render of app');
    return(
      <div className="App">
        
        <Welcome></Welcome>
        
      </div>
    );
  }
}

export default App;

Answer 2

Your component names should begin with upper case letters.

From react docs

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

use Welcome instead of welcome.

Final code

import React from 'react'

function Welcome()
{
    console.log("inside welcome.js function");
    return  <h1> Welcome Ashish </h1>

}

export default Welcome