Post
avtar img holder

Yonseo

2019-07-17 09:38:53
  • Last Edit: 0000-00-00 00:00:00
  • 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
    First time using Unreal Game Engine
    Category
    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