3 things i learnt with my first React App

ken lok
ken lok
Sep 3, 2018 · 4 min read

Having completed my first mini-project after learning about ReactJS about a month ago, here are the top 3 points as a memo to myself and others who are just starting out like me!

I started out with this tutorial which gives a good step by step on the installation and getting started

To better understand what i am talking about, the GitHub repo and app link are below:
Github
RegExplorer

Use of Functions and Components

This serves 2 purposes, code reusability and cleanliness.
First thing to know is that the main part of a ReactApp is this part here

class App extends React.Component {
render(
<your HTML here>
)
}

This render()is where all your HTML and JSX code goes and this ultimately creates the HTML that is your page/app. Instead of writing all your HTML in this render() ,you can use functions and components to make your code look cleaner. Here is what i mean.

render() {
return(
<div>
<div><CreateHeader /></div>
<div className="leftbox">
<CreateTextbox/>
</div>
<div className="rightbox">
<CreateRegexbox /><br/>
<CreateOutputbox />
</div>
</div>
)
}

This is what my render() looks like, easy to read at a glance and anyone else looking at it should be able to understand what is going on in your code as well. CreateHeader, CreateTextbox, CreateRegexbox and CreateOutputbox are all functions that i created in my code.

function CreateHeader(props) {
return (
<div className="headerContainer">
<h1 style={{fontFamily:"Arvo"}>RegExplorer</h1>
</div>
)
}

CreateHeader creates a <div> that contains a <h1> header as title for my App. Imagine if i had 20 lines of HTML instead of 3, having a function to create my header helps to reduce the clutter and improve legibility. Another great benefit would be if i for some reason wanted to have multiple headers, i can simply call the createHeaderfunction however many times i want in class App render().

Functions also allow you to do pre-processing and computations before rendering your output. For example

function CreateOutputbox(props) {
var output = '';
var x;
for (x in props.output) {
output += props.output[x]+' ';
}
return (
<div className="outputboxContainer">
<div className="container">
<p id="outputbox">{output}</p>
</div>
</div>
);
}

Here i do some string manipulation before returning the output as part of the HTML.

*Important* Anything within the { } in the return() is read as JavaScript by React. Hence you can return variables or even perform operations within the curly braces.

Methods need to be declared and bound in the parent class

React components/functions also work with the idea of parent and children, where the child component/function can inherit certain attributes/methods from the parent class.

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
regex: '',
output: 'hello'
};
this.handleTextChange = this.handleTextChange.bind(this);
this.handleRegexChange = this.handleRegexChange.bind(this);
}

In my case, i wanted my parent class ‘App’ to have the 3 states (kind of like properties) of [text, regex, output]. Using a constructor, i initialise the 3 states in the ‘App’ class. I also want these states to be changed whenever a value is changed in one of the children functions (regexbox, textbox).

To do so, i have to create a method which allows for the updating of the 3 states within the parent class ‘App’.

class App extends React.Component {
constructor(props) {
<...>
}
handleTextChange(event) {
this.setState({text: event.target.value});
let output
try {
output = (event.target.value).match(RegExp(this.state.regex,'g'))
}
catch(err) {
output = "Error!"
}
this.setState({output:output})
}
}

I create a method handleTextChange(event) that listens for an event (a text change in this case) and then does some update of the state accordingly, using the this.setState method.

This method has to be bound to the parent class ‘App’ in the constructor

this.handleTextChange = this.handleTextChange.bind(this);

Only then can it be passed to the child function as a prop. I do this when i call the function CreateTextbox in the render()

render() {
return(
<div>
<div><CreateHeader /></div>
<div className="leftbox">
<CreateTextbox text={this.state.text} handleTextChange={this.handleTextChange} />
</div>
...
</div>
}

With this, the child function CreateTextbox will have 2 props of [text, handleTextChange] passed on to it. In the funciton, the props can be accessed via props.<propname> which in this case would be props.handTextChange

function CreateTextbox(props) {
return (
<div className="textboxContainer">
<div className="labelbox">
<label for="textbox">Your Text Here</label>
</div>
<textarea id="textbox" onChange={props.handleTextChange} />
</div>
);
}

this.setState is asynchronous

What does asynchronous mean? I found a good explanation here

When you execute something synchronously, you wait for it to finish before moving on to another task. When you execute something asynchronously, you can move on to another task before it finishes.

I don’t really know how to explain it, so let me try to illustrate with an example.

Let’s say:
this.state.text = ‘originalhello’
event.target.value = ‘hello’

handleTextChange(event) {
this.setState({text: event.target.value});
output = (this.state.text)
this.setState({output:output})
}

In the above case, output = ‘originalhello’.

This is because event though line2 attempted to change the state of text to ‘hello’, because this.setState is asynchronous, it does not wait for the task to finish before moving on to the next. Hence output is still assigned the value of this.state.text’s original value of ‘originalhello’

However if we tweak it abit

handleTextChange(event) {
this.setState({text: event.target.value});
output = (event.target.value)
this.setState({output:output})
}

In this case, output = ‘hello’

TheEnd

That sums up the 3 main points i took away from this experience. Please pardon any inaccuracies or fuzzy explanations, if you are an experience React user reading this, please kindly point me in the right direction! Comment below and let me know if there are any points i got grossly wrong. Thanks for your help in advance :D

Or if you are new like me as well, do let me know your own experiences and things you picked up along the way. To share is to learn and grow together.

KenLok

My musings and experiments. My notebook

ken lok

Written by

ken lok

KenLok

KenLok

My musings and experiments. My notebook

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade