`*.*\
> \&#xNAN;*The difference is that in the first syntax version there is no way to include anything in the* `
`*.*
### Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don’t change any of the content — you only need to close tags where they are needed.
```
const JSX = (
);
```
***
### React: Create a Stateless Functional Component
> *There are two ways to create a React component. The first way is to use a JavaScript function.*
> *Defining a component in this way creates a stateless functional component.*
> *think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data.*
#### To create a component with a function, you simply write a JavaScript function that returns either JSX or null
* React requires your function name to begin with a capital letter.
> *Here’s an example of a stateless functional component that assigns an HTML class in JSX:*
```
// After being transpiled, the
will have a CSS class of 'customClass'
const DemoComponent = function() {
return (
);
};
```
> *Because a JSX component represents HTML, you could put several components together to create a more complex HTML page.*
### The code editor has a function called MyComponent. Complete this function so it returns a single div element which contains some string of text.
Note: The text is considered a child of the div element, so you will not be able to use a self-closing tag.
```
const MyComponent = function() {
// Change code below this line
// Change code above this line
}
```
### ANS:
```
const MyComponent = function() {
// Change code below this line
return (
Some Text
);
// Change code above this line
};
```
***
### React: Create a React Component
> *The other way to define a React component is with the ES6 class syntax. In the following example, Kitten extends React.Component:*
```
class Kitten extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Hi
);
}
}
```
> *This creates an ES6 class Kitten which extends the React.Component class.*
> *So the Kitten class now has access to many useful React features, such as local state and lifecycle hooks.*
> *Also notice the Kitten class has a constructor defined within it that calls super()*
> *It uses super() to call the constructor of the parent class, in this case React.Component*
> *The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component’s constructor with super, and pass props to both.*
> *This makes sure the component is initialized properly. For now, know that it is standard for this code to be included.*
### MyComponent is defined in the code editor using class syntax. Finish writing the render method so it returns a div element that contains an h1 with the text Hello React!.
```
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// Change code below this line
// Change code above this line
}
};
```
### ANS:
```
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// Change code below this line
return (
Hello React!
);
// Change code above this line
}
};
```
***
### React: Create a Component with Composition
> *Imagine you are building an App and have created three components, a Navbar, Dashboard, and Footer.*
> *To compose these components together, you could create an App parent component which renders each of these three components as children. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX.*
* For example, in the render method you could write:
```
return (
)
```
> *When React encounters a custom HTML tag that references another component (a component name wrapped in < /> like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the App component and the Navbar, Dashboard, and Footer.*
### Challenge:
> *In the code editor, there is a simple functional component called ChildComponent and a class component called ParentComponent. Compose the two together by rendering the ChildComponent within the ParentComponent. Make sure to close the ChildComponent tag with a forward slash.*
* Note:**ChildComponent is defined with an ES6 arrow function because this is a very common practice when using React**.
* However, know that this is just a function.
```
const ChildComponent = () => {
return (
);
};
class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
I am the parent
{ /* Change code below this line */ }
{ /* Change code above this line */ }
);
}
};
```
⌛The React component should return a single div element.\
⌛The component should return two nested elements.\
⌛The component should return the ChildComponent as its second child.
### Ans:
```
const ChildComponent = () => {
return (
);
};
class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
I am the parent
{ /* Change code below this line */ }
{ /* Change code above this line */ }
);
}
};
```
### More Examples:
For more content follow me on GitHub:
[**bgoonz - Overview**\
\_Web Developer, Electrical Engineer https://bryanguner.medium.com/ https://portfolio42.netlify.app/…\_github.com](https://github.com/bgoonz)
*More content at* [*plainenglish.io*](http://plainenglish.io)
By [Bryan Guner](https://medium.com/@bryanguner) on [May 19, 2021](https://medium.com/p/8021738aa1ad).
[Canonical link](https://medium.com/@bryanguner/introduction-to-react-for-complete-beginners-8021738aa1ad)
Exported from [Medium](https://medium.com) on August 31, 2021.