New to React? Confused where to start?

Learning ReactJS can be daunting and overwhelming at first. I know it was for me when I first started learning it. I figured I create a breakdown of the basic elements to know when first starting to learn ReactJS: Components, Props, and State.

Components

Components are integral for React. They allow you to breakdown the U/I into independent and reusable items. By allowing this breakdown, a developer can modularize their code for both function and presentation. These “packages of code” create an organized look. React components can be written as functions or classes. The following code shows a React component written as a function:

function Example(props){
return (
<p>
{props.name} is coming to the party too.
</p>
}

Since the function is passing props(or properties) object and returns a React element, this is a valid React component or more commonly known as “function component.”

An additional component style used in React is the ES6 class. The following code shows a React class component:

class Example extends React.Component{
render(){
return <p> {props.name} is coming to the party too. </p>
}}

A class component acts as a function that receives props. It is a more common method to create functions in React. In fact, the function considers a private internal state that controls the JSX returned. If the state of a class component changes, React will re-render the component in the app.

Props (also known as properties)

Props allow developers to pass data into the components and from one to another. The value of a props can be anything: strings, objects, etc. However, props can only be passed in one direction: from parent to child. The code below displays an extra of passing data with props.

class ParentComponent extends React.Component{
render() {
return(
<ChildComponent name="First Child" />
);
}}
const ChildComponent = (props) => {
return <p>{props.name}</p>
}

The data in the parent component needs to be defined and assigned as prop to the child component. In this case, name is the defined props and was able to be passed as if a function. The dot notation allows access to the prop data to render it.

State

State is a built-in object, which allows React components to create and manage their data. The state object is more fluid compared to props. Additionally, state cannot pass data like props, just create and manage it. So how is state used, check out the code below for an example.

class Example extends React.Component{
constructor(){
super();
this.state = {id:1};
}
render (){
return (
<div>
<p> {this.state.id}</p>
</div>
);
}}

If a state needs to be modified, you should not directly do so. The method of modification of a stat is called setState().

this.setState({
id:2
});

Using the setState method above, the id object in the state is now changed to “2.” Using setState informs React that the re-rendering process needs to be started and informs which parts were changed.

I hope that this quick intro guide to some of React basic elements was helpful for your learning.