Quick Start | React Components
This tutorial provides a quick explanation of components and how to use them with React. Components are the basic building blocks for rendering DOM elements in React. Using components allows you to isolate your UI into individual units, each which takes a list of arguments and returns a React element. In this tutorial, we will build out several React components with both the functional and class component syntax.
NOTE: The following example is a continuation of Quick Start | React and uses webpack with babel. For more information on setting up a local environment for React, see Quick Start | React.
Creating Components With Functions
To create a basic component, we can define a function that takes a single argument (props). To follow proper naming convention, it is important that our function begin with a capital letter. Replace your index.js file with the following:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
function Greeting(props){
return <h1>Hello, {props.name}</h1>
}
const element = <Greeting name='Sam' />
ReactDOM.render(
element,
document.getElementById('root')
)
This renders a component using the function syntax. See how we've defined a function that takes exactly one argument (props) and returns a React element, in this case <h1>Hello, {props.name}</h1>.
The curly brackets are simply referencing the name attribute of our props argument. Notice how we then define a constant element with <Greeting name='Sam'/>. This both creates a new instance of our component and assigns the name 'Sam' to the name attribute of the props argument. You can define as many properties as you like for your components. Just remember that they are set as attributes within the element itself.
Update HTML
In the script above, we are referencing the root element of the DOM tree. Let's update our index.html file so our component can render within the DOM. Add the following to your index.html somewhere between the <body> tags.
<div id='root'></>
This gives us an element with the correct id 'root' as referenced by our ReactDom.render() function. If everything is working correctly, you should now see 'Hello, Sam' when you open index.html in the browser. Please note if you are still using webpack/babel then you may need to run webpack to transpile your js.
Creating Components with Classes
If you are using ES6, then you can create components using class. In your index.html file, replace your Greeting function with the following:
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}This does the exact same thing, just with a slightly different syntax. Notice how we've defined a Greeting class which is an extension of the React.Component class.
Conclusion
This is a quick example of how components are created and rendered using React. It should be noted that you can nest components within one another. Remember to keep components simple and independent of one another. This will allow you to save time and efficiently reuse UI components across your app.
