Building a web app using React for the first time? Then it must be a simple "Hello World" type of app that you're planning to set up. One that would guarantee you a smooth first-hand experience with React.js...
So, you're wondering:
"What's the fastest way to build a basic app in React?"
A question then followed by a... myriad of other questions:
- "What dependencies should I use?"
- "What React stack should I go for if it's just a simple web app that I want to create?"
Now it's about time that you moved from questioning yourself to code writing, don't you think? Here's a simple and easy-to-follow tutorial on how to create a React app from scratch.
1. Create a New React Project Folder
The very first step to take is to start a new React project. Obviously!
Note: Make sure you have NPM and Node installed in your environment first things first!
For this, just run the command here below:
npm install -g create-react-app
Tada! Your React boilerplate app creator has just bee installed!
Now the second code that you'll run is going to create your "Hello World" React app itself:
create-react-app hello-world
Running an imaginary magnifying glass across your app's structure you can't help not noticing the 3 major file types there:
- public/index.html files
- src/index.js files
- src/App.js files
And scanning your app's backbone a little deeper you'll spot:
- a div with the id root
- this piece code here below in the index.js.file:
ReactDOM.render(, document.getElementById(‘root’));
If we were to translate this code segment into plain language it would go something like this:
React injects your app component into the div by using the root id.
2. Write the Simplest React Component
"But what is an app component more precisely?"
Take it as React's convention to use the same names both for JavaScript files and the component.
And now the code for your more-than-basic component would look something like this:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="greeting">
<h1> Hello World! </h1>
</div>
);
}
}
Feel free to create a JavaScript class for it and to extend it from the Component class.
Next, implement the render () method, which will return a whole suite of elements (unlike prior to React 16, when one had to return a single element per each render method that was being implemented).
Then, running the npm start command in your app's directory, you'll see the "Hello World" text message displayed at http://localhost:3000.
Hello World!
3. Building a Web App Using React and JSX
And I feel that I should start by defining JSX, right? Before I go ahead and delve into details on how to use it with React:
An extension to the JavaScript language — therefore a template language — with a structure similar to HTML. One that makes a great team with React.
Its true "power" is that it... empowers you to write your HTML components and React components in an HTML-like tag:
<HelloWorld />
And here's JSX "in action", right in this "Hello World" app that we're building here:
The following code:
const element =
(
<h1 className="greeting">
Hello, world!
</h1>
);
... gets compiled to the familiar JavaScript code here below:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
See? A familiar HTML-tag language that makes structuring an app's code a whole lot easier for any developer!
And this is JSX's main role and the very reason why it works perfectly with React.
4. How to Use State vs Props in React.js
How about creating another component as we're building a web app using React?
Let's name it "Mary":
import React, { Component } from 'react';
class Mary extends Component {
render() {
return (
<div>
<h2> Hi, I am Mary </h2>
</div>
);
}
}
export default Mary;
Bravo! Next, we can include it, as a child component, into our existing React App component:
import React, { Component } from 'react';
import Mary from './Mary';
class App extends Component {
render() {
return (
<div className="greeting">
<h1> Hello World! </h1>
<Mary/>
</div>
);
}
}
export default App;
Note: Noticed the import statement for our "Mary" component? It plays a key role since without it our React app wouldn't work. And this because React wouldn't be able to identify, all by itself, the component that corresponds to the Mary tag.
Curious now how you could manipulate your "Mary" component? How you can control its behavior?
By manipulating its... state object, that's how!
Note: each React component comes with its own state object.
import React, { Component } from 'react';
import Mary from './Mary';
class App extends Component {
constructor() {
super();
this.state = {
greeting: "Hello World!"
}
}
render() {
return (
<div className="greeting">
<h1> {this.state.greeting} </h1>
<Mary/>
</div>
);
}
}
export default App;
See the "greetings" property — having the "Hello World" value — that corresponds to the state object? Remember that you're free to add as many properties as needed.
Next, how about trying to pass data from our App component into its child one, Mary:
import React, { Component } from 'react';
import Mary from './Mary';
class App extends Component {
constructor() {
super();
this.state = {
greeting: "Hello World!",
parentMessage: "Hello Mary!"
}
}
render() {
return (
<div className="greeting">
<h1> {this.state.greeting} </h1>
<Mary newMsg={this.state.parentMessage} />
</div>
);
}
}
export default App;
Noticed the "newMsg" key there? It's precisely this key that's responsible with the data transfer.
Now, as for the child component "Mary":
import React, { Component } from 'react';
class Mary extends Component {
constructor(props) {
super(props)
this.state = {
greeting: props.newMsg
}
}
render() {
return (
<div>
<h2> {this.state.greeting} </h2>
</div>
);
}
}
export default Mary;
If you're willing to give this piece of code a deep scan, you'll notice that there's a "props" method argument in there.
Keep in mind that it's precisely this object that stores all the data transferred from the parent component to the child React component.
Also, another "detail" that you should be able to detect is the "newMsg" property (transferred from the parent/App component); we've used it to initialize the state of the Mary component.
5. How to Use The React (Component) Lifecycle Hooks
I won't get into too many details, since React's documentation is already more than "enlightening" when it comes to:
- the different lifecycle methods (or hooks) to be invoked for each state of a React component
- the precise times in the development process for triggering each hook
Nevertheless, I'll briefly add that all these methods to be used across your React components' lifecycles fall into 3 main categories:
- mounting hooks: use them at the very start, when your React component is being rendered in the browser page
- updating hooks: fire them when your component gets re-rendered on the web page. And this happens if/when changes are made to the state/props objects
- unmounting hook: invoke the componentWillUnmount() hook shortly after your component gets removed from the DOM
Note: Since React 16, the collection of hooks has enriched with a brand new one: componentDidCatch()! Fire it whenever you're dealing with an exception during the other lifecycle methods of your component.
In other words: invoke it whenever a component fails to function as it should when you're building a web app using React!
As for the specific way that React manipulates DOM via the Virtual DOM that it creates, feel free to have a look at our post precisely on this topic: How React Virtual DOM Works!
The END!
Your turn now: go through all the steps included here and, step by step, set up your first basic React application!
