MOCKSTACKS
EN
Questions And Answers

More Tutorials









React Absolute Basics of Creating Reusable Components


Components and Props


As React concerns itself only with an application's view, the bulk of development in React will be the creation of components. A
omponent represents a portion of the view of your application. "Props" are simply the attributes used on a JSX node (e.g. SomeComponent someProp="some prop's value" />), and are the primary way our application interacts with our components. In the snippet above, inside of SomeComponent, we would have access to this.props, whose value would be the object {someProp: "some prop's value"}.

It can be useful to think of React components as simple functions - they take input in the form of "props", and produce output as markup. Many simple components take this a step further, making themselves "Pure Functions", meaning they do not issue side effects, and are idempotent (given a set of inputs, the component will always produce the same output). This goal can be formally enforced by actually creating components as functions, rather than "classes". There are three ways of creating a React component:

Functional ("Stateless") Components


const FirstComponent = props => (
 <div>{props.content}</div>
);

React.createClass()


const SecondComponent = React.createClass({
 render: function () {
 return (
 <div>{this.props.content}</div>
 );
 }
})
;

ES2015 Classes


class ThirdComponent extends React.Component {
 render() {
 return (
 <div>{this.props.content}</div>
 );
 }
}

These components are used in exactly the same way:

const ParentComponent = function (props) {
 const someText = "FooBar";
return (
 <FirstComponent content={someText} />
 <SecondComponent content={someText} />
 <ThirdComponent content={someText} />
 );
}

The above examples will all produce identical markup.

Functional components cannot have "state" within them. So if your component needs to have a state, then go for class based components. Refer Creating Components for more information.

As a final note, react props are immutable once they have been passed in, meaning they cannot be modified from within a component. If the parent of a component changes the value of a prop, React handles replacing the old props with the new, the component will rerender itself using the new values.

Conclusion

In this page (written and validated by ) you learned about React Absolute Basics of Creating Reusable Components . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Create React App.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.