×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 08 – Creating a Functional React Component

    Lesson List

    We already learned a lot about the core fundamentals of React especially the JSX thing which is super important. As in previous I have mention that React is all about components you build your application with components and react is a library which makes these components so easy.
    Well till right now we only use one component, Time to change this, and for that, we will add a new folder and a file in the src folder of our project.

    Create Functional React Component

    So letโ€™s create a new folder named as Person. Inside that Person folder we will add a Person.js file.
    Now in that file, we want to create a component and we already did that. Most of the time you should use a different form of the component or of creating the component. A better function a simple javascript function because in its simplest form a component is just a function which returns some JSX.

    src/Person/Person.js
    
    const person = () => {
    	return <p> I am a Person</p>;
    };
    
    Throughout the course we will be using ES6 feature for example arrow functions etc.

    This alone creates a valid function which we could use as a component but we also have to do two things.

    We need to import React because keep in mind this JSX syntex is transformed to React.createElement() and to be able to call this method we need to import react from react package :

    src/Person/Person.js
    
    import React from 'react'; // import React Package
    const person = () => {
    	return <p> I am a Person</p>;
    };
    

    yes! we dont need a componet class because we are not using a class which extends component instade we are creating a function.

    Export Funcrton

    we still need to export that function as default of its file.

    src/Person/Person.js
    
    import React from 'react';
    const person = () => {
    	return <p> I am a Person</p>;
    };
    export default person; // export this function
    

    Here we export this person const and which holds this function.
    Now we can start using this component in other files of our project. Letโ€™s import this function in our src/App.js

    src/App.js
    
    ...
      import Person from './Person/Person'; // import our own Person.js file
    ...
    
    Note:
    Always import function or class with first letter uppercase reffering variable, because all the JSX(HTML) elements start with the lowercase letter.

    So, You could create your own component which we named <Person>, we can either use the opening and closing tag like this: <Person> <Person/> or since we dont nest anything between (Will cover that also in feature lessons). you can also use self closing tag like <Person />

    src/App.js
    
    import React, { Component } from 'react';
    import './App.css';
    import Person from './Person/Person';
    class App extends Component {
    	render() {
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<p> Paragraph </p>
    				<Person />
    			</div>
    		);
    	}
    }
    export default App;
    

    make sure your npm start is working in terminal so you can check your output on http://127.0.0.1:3000.
    So <Person /> is our only component getting used of course using it like this is already nice but what is the exact benefit of treating it like this instead of simply adding the code right into the App.js file. Letโ€™s do more with this component to see that benefit in the next lesson.

    React introduction
    React Component
    React Component

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept