In this tutorial, I want to show you the basics of how a React application works. I also wanted the chance to try it out myself 🤓.
I consider myself more of a PHP/Laravel/VueJS developer; however, I thought I would give React a try and let you know my first impressions of this popular javascript framework.
Simple React Example
One of the reasons I was extremely drawn to VueJS was that you could easily get started by including a CDN link in your page and quickly render some dynamic content.
With React, I had to dig a little bit deeper and found a simple example in the Getting Started section, which looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Below, you can see a quick example of this page via Codepen:
This is a simple Hello World example; however, we can get an idea of how the page gets rendered.
The main entry point for our React application is inside the following method:
ReactDOM.render()
This method accepts 2 arguments: the HTML to be rendered and the element to render it in.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Ok, next, let's take a look at creating our first React Component.
Create Your First React Component
In addition to passing HTML as the first argument inside of the ReactDom.render function we can also pass it a class or const object.
Take a look at the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const App = () => {
let message = 'Hello From React!';
return (
<h1>{message}</h1>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
You can take a look at this example from the Codepen below:
Seems pretty straightforward so far.
Creating a Simple Counter
Next, let's see what it would take to create a simple React counter.
This one was a little more complex because we needed to create a new React class and extend the Component class. Take a look at the following index.js file:
import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
constructor() {
super();
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
};
decrementCount = () => {
this.setState({
count: this.state.count - 1
});
};
render() {
let { count } = this.state;
return (
<div className="app">
<div>
<div class="count">
<h3>Count:</h3>
<h1>{count}</h1>
</div>
<div class="buttons">
<button onClick={this.decrementCount}>-</button>
<button onClick={this.incrementCount}>+</button>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
You'll notice that we are using a state object to store our count variable inside the constructor.
You can take a look at the Code Sandbox example of the counter here.
Conclusion
This has been a simple set of examples, including creating a component and a simple counter.
After learning a bit more about React, I would still say that I would prefer to use Vue vs. React. But I'm sure there are still more benefits to React that I haven't yet gotten into.
Either way, I'm sure that React can be used to build some amazing applications; however, I think I'll continue to stick with Laravel and PHP. Oh yeah... And the Tall Stack 😉
If you haven't had a chance to check-out the Tall Stack, it consists of Tailwind, AlpineJS, Laravel, and Livewire. All of the Ajax requests are handled via Livewire, and the state is managed between Alpine and the Laravel app. It just makes building applications so easy. 👌
That's all from me. Keep hacking and creating. 🦄