https://supersimple.dev/projects/chatbot/
component - a piece of a website. split up the website into pieces and work on each component.
We start with the text box.
You can call the component method in tow ways
{ChatInput()}
or using HTML tags
<ChatInput></ChatInput> --You can create your own HTML elements in React. In HTML you have default elements like div, head , body.
or
<ChatInput />
to remove extra div elements , react has another element called fragment.<> </>
--to comment out code in JSX use {/* piece of code */}
--to comment out code in JavaScript use /* piece of code */
-- to comment out single line code in JavaScript use //
To give a placeholder for the text entered in the chatbox
<input placeholder="Send a message to chatbot"/>
To increase the size of the input text message to chatbot
<input placeholder="Send a message to chatbot" size="30"/>
done tille 1:05
Now to create the Chate messages
Create a chatMessage function.
insert image for human and robot.
use div element to put the chat message in a newline. div uses a line for itself.
for proper layout we still use div.
Components in react are reusable. We can reuse by passing attributes to the component.
To use this attribute, we pass it as a parameter to the ChatMessage function.
function ChatMessage(props) -- this parameter is passed as props. (meaning property)
use consoe.log(props) to see the message displayed in console when you right click and inspect.
assign a variable to this property as follows
const message = props.message;
Now instead of a "hello chatbot", you can display the message as {message}.
Now the ChatMessage function will look as below.
function ChatMessage(props){
console.log(props);
const message = props.message;
return (
/* <>
hello chatbot
<img src="human.jpeg" width= "50"/>
</> */
<div> {/* use div element to put the ChatMessage on a new line */}
hello chatbot<div />
{message}
<img src="human.jpeg" width= "50"/>
</div>
)
}
We can reuse the component by passing different messages to the props parameter.
We call ChatMessage by passing messages to and fro between user and chatbot.
<ChatMessage message="hello chatbot message"/>
<ChatMessage message="Hello! How can I help you?"/>
<ChatMessage message="Can you get me today's date?"/>
<ChatMessage message="Today is September 26"/>
In the webpage we see the image only of the robot. Now for user messages we want the image
of a human.
For this we pass another attribute to the ChatMessage function namely "sender"
<ChatMessage message="hello chatbot message" sender="user"/>
<ChatMessage message="Hello! How can I help you?" sender="robot"/>
<ChatMessage message="Can you get me today's date?" sender="user"/>
<ChatMessage message="Today is September 26" sender="robot"/>
In the ChatMessage function we access this attribute and assign in to a variable.
const sender = props.sender;
Now we put a conditional code to display human or robot image based on the attribute
passed to ChatMessage.
We now refresh the page and see the output.
chatbot_display_1.png
You can also pass these attributes directly as parameters to the ChatMessage function
example
function ChatMessage({message, sender}){
if (sender === 'robot') {
return (
<div> {/* use div element to put the ChatMessage on a new line */}
{/* hello chatbot<div /> */}
<img src="robot.jpeg" width= "50"/>
{message}
</div>
)
}
}
Next we learn how to use if statements inside JSX.
In javascript for if then statement we use the guard operator as follows.{condition && action}.
same we can use in jsx.
function ChatMessage({message, sender}){
/* if (sender === 'robot') {
return (
<div> {
<img src="robot.jpeg" width= "50"/>
{message}
</div>
)
} */
return (
<div> {/* use div element to put the ChatMessage on a new line */}
{sender === 'robot' && <img src="robot.jpeg" width= "50"/>}
{message}
{sender === 'user' && <img src="human.jpeg" width= "50"/>}
</div>
)
}
Code CleanUp
We put ChatInput and ChatMessage in a separate component called App and in the render method
we directly call this component as follows.
function App (){
return (<>
<ChatInput />
<ChatMessage message="hello chatbot message" sender="user"/>
<ChatMessage message="Hello! How can I help you?" sender="robot"/>
<ChatMessage message="Can you get me today's date?" sender="user"/>
<ChatMessage message="Today is September 26" sender="robot"/>
</>)
}
const container = document.querySelector('.js-container');
ReactDOM.createRoot(container).render(<App />);
Thus we see that components can be made to build pieces of a website.
They can be used to create custom HTML elements.
In the Chatbot project we create two components, <ChatInput> and <ChatMessage>.
We learn how to pass multiple properties (props) to components thus making components reusable.
1h 36min complete
No comments:
Post a Comment