lets look at the smallest bit of React

element.render(<p>this a sample of react code</p>);

comments

1. you need to import react and ReactDOM .All from react

2. the paragraph is rendered into a parent tag with an id of 'element'

## JSX JSX stands for JavaScript XML.JSX enbales writing of HTML in React JSX allows us to write HTML in React.

export default function Title ()
{
    return user.firstName + "" + user.lastName + ' ' + ' ' + '  is a ' + user.profle;
}
const user = {
    firstName: 'Allan ',
    lastName: 'lenkaa',
    profle: 'Sofware developer'

}

Rendering elements

elements are what you want to see on your screen To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render():

const root = ReactDOM.createRoot(
  document.getElementById('create')
);
const element = <h1>Hello, world</h1>;
create.render(element);

Components and Props

function Welcome(props) {
  return <h1>Welcome  {props.name}</h1>;
}
const element= ReactDOM.createRoot(document.getElementById('root'));
const element2 = <Welcome name="Allan" />;
element.render(element2);

**comments ** We call root.render() with the element.

React calls the Welcome component with {name: 'Allan'} as the props. Our Welcome component returns a

Welcome, Allan

Welcome, Allan

Handling Events

• React events are named in camelCase(onClick)