Post
avtar img holder

Yonseo

2019-07-17 09:38:53

Creating a Component in REACT JS

avtar img holder

Let's create our first component in React. To do that I need to pass data into the component from the main application App.js In this example I'm creating a function named Tea that will be inside a file named Tea.js. I will then place this file inside a folder named Tea.

Tea.js

Open the src folder and create a folder named Tea. Inside folder Tea create a file named Tea.js. Before I create a component I need to import react at the top of Tea.js file, this is important because otherwise it will throw an error that looks like this.

  Line 4:  'React' must be in scope when using JSX  react/react-in-jsx-scope

There are two ways of creating components in React. We can use a function or a class, in this example I will use an arrow function to simplify things. I will name my function Tea and include an argument named props to pass in properties.

import React from 'react';

const Tea = (props) => {
return <p>My tea name is {props.name}. It is the color {props.color}.</p>
}

export default Tea;

I want to return a sentence that includes properties. The properties are name and color. These properties are in App.js and contain data that will be inserted into this sentence.

Finally don't forget to export your component so that it can be imported in App.js. You can learn more about import and exporting files and methods here.

App.js

In App.js I will import Tea.js and create the component. When I return a component it looks like this <Tea></Tea> or simply <Tea/> . To add properties I give it a name with data Jasmine and a color with data green.

import React from 'react';
import './App.css';
import Tea from './Tea/Tea';

class App extends React.Component {
render() {
return <Tea name="Jasmine" color="green"></Tea>
}
}

export default App;


This will render in the browser:

My tea name is Jasmine. It is the color green.



Latest Posts

avtar img holder
React JS Study Notes
Category
avtar img holder
Creating a Component in React JS
Category
avtar img holder
Javascript for Bubble Tea
Category
avtar img holder
Github Commands
Category
avtar img holder
FuelPHP Login & Authentication
Category
avtar img holder
Intro to C++
Category

COPYRIGHT © 2019Taiyaki.io All rights ReservedHand-crafted & Made with