React JS has been one of the most popular development frameworks for some years now. There are over 150,000 React repositories on GitHub alone. It regularly outranks other popular development frameworks like Vue JS or Angular.
React is one of the fastest, easiest ways to create responsive web designs and applications without having to do a ton of coding. It’s been called “the future of web development,” and that doesn’t seem like too much of a stretch. React JS just gets more popular with each passing year.
Today, we’re going to show you how to learn React JS in a matter of minutes.
Building digital assets using React JS means your websites and applications will look contemporary and current. Instagram is built entirely using the JavaScript library, for instance. So is Dropbox.
If you’re looking for the best tutorial to learn React JS, look no further! We’ll have you up and running in less than no time so you try out React JS for yourself!
How To Learn React JS: Getting Started
If you’re starting to learn React JS, we’ll assume you have some familiarity with programming and development. If not, that’s okay too. React JS is about as close to plug-and-play as a JavaScript library can be.
To truly make the most of this React JS tutorial, you’ll need:
- A basic understanding of HTML and CSS
- A basic understanding of JavaScript
- Familiarity with JavaScript ES6
In this React JS tutorial, you’ll learn how to build a basic React JS app. We’ll go over every step with a fine-toothed comb so if you’re brand new to learning React JS, have no fear. You’ll be up and programming in no time.
We’ll also be going over some of the basic principles of learning React JS. By the time you’ve reached the end, you’ll know not only how to use React JS but also why it works.
There’s also a GitHub repository to go along with this tutorial in case you want to see the end result or have a chance to check your work.
What Is React?
Since this is intended as a tutorial to learn React JS for beginners, we’ll start with the basics. What is React, exactly?
React JS is a library for the JavaScript programming language. It’s mainly used to create user interfaces quickly and easily. It was created by Facebook in 2011 to allow developers to create complex UIs using smaller, reusable snippets of code.
Unlike some other frameworks, React JS can sometimes require additional libraries to function properly.
Seeing as how React works by connecting smaller, reusable components, it’s similar to how microservices work. If you’re already familiar with microservices you should have no trouble getting React up and running. If you’re not, you’ll have a much better understanding of microservices and containers by the time you’re finished with this tutorial.
Setting Up The Environment
There are numerous ways you can set up the environment to work with React. For this tutorial, we’ll simply be using the command line.
To begin, start by opening the terminal. Navigate to your programming folder. Create a directory called ‘react-todos-tutorial.’ There’s a command that automatically creates a React app that we’ll look at in a moment. In the meantime, we’ll show you how to get started using basic HTML.
Writing React App Using HTML
To start, you’re going to create a barebones HTML document using your text editor of choice. We’ll be using Notepad++ as it allows you to save files in whatever format you want.
Input the following:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>React Tutorial</title>
<script src=”https://unpkg.com/react@16/umd/react.development.js”></script>
<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js”></script>
</head>
<body>
<div id=”root”></div>
<script type=”text/babel”>
const element = <h1>Hello from React</h1>;
console.log(element);
</script>
</body>
</html>
Then save these files as Index.html.
This HTML loads all the script files you’ll need for this tutorial. The respective scripts are React, ReactDOM, and Babel. As you can see, even though it’s written in JavaScript, some of the code is written in standard HTML. That’s because it’s JSX, which is a syntax for JavaScript extension for describing UIs easily.
Create React App Using CLI
React handles most of this formatting for you. We only show you the raw HTML to help you better visualize what’s going on underneath the hood of React JS.
To create a React app using the command-line interface (CLI), you’ll need to have Node.js installed. This will let you access its node package manager (npm) function.
In the terminal, navigate to the folder you created for this tutorial. Input the following command:
npx create-react-app react-todo-app
This creates a folder called react-todo-app and includes all of the necessary startup files.
We invite you to spend some time exploring the folders once they’re created. This will help you visualize what’s going on inside the React app.
For this tutorial, we’re mainly only interested in the index.js file inside of the src folder. This is where you’ll write your app.
Next, navigate to the react-todo-app folder you created. Now start up the app with the following command:
npm start
This will launch your React app on a local server. If you load localhost:3000 in your browser bar you should see your default app.
Create the ToDo App
When you created the React app, it automatically created the necessary files for an app. Since this is a beginner React JS tutorial, we’ll still go ahead and write them from scratch so you can understand what’s happening. To avoid confusion, delete the files out of the src folder so you can create fresh ones.
First, you’re going to create an index.js file. Open a new file in your text editor and input the following:
import React from “react”
import ReactDOM from “react-dom”
const element = <h1>Hello from Create React App</h1>
ReactDOM.render(element, document.getElementById(“root”))
When you save that file, you’ll see the text from the header displayed on the localhost.
You’ll notice this code isn’t that dissimilar to what we created with the raw HTML file. We’re just importing React and ReactDOM instead. We also don’t have to bother with the JSX as the CLI takes care of that for you.
Create the Components
Earlier, we talked about the similarities between React and microservices. React apps are also comprised of smaller components, which also allows them to be reused in other applications.
React components come in two categories – parents and children. The next step in creating our React app is to create a folder inside the src folder for the components. Create a Components folder and then create a blank file and name it ToedoContainer.js. Then input the following:
import React from “react”
class TodoContainer extends React. Component {
render() {
return (
<div>
<h1>Hello from Create React App</h1>
<p>I am in a React Component!</p>
</div>
)
}
}
export default TodoContainer
Now go back to your index.js file and update it with this code:
import React from “react”
import ReactDOM from “react-dom”
//component file
import TodoContainer from “./components/TodoContainer.js”
ReactDOM.render(<TodoContainer />, document.getElementById(“root”))
Create TodosList
React is built around the premise of routing data between the components. The parent component will control the data that goes toward the child. Children’s components can have their local attributes as well, however.
These are known as States and Props.
First, you’re going to create another component. Create a file called TodosList.js inside of the Components folders. Insert the following:
import React from “react”
import TodoItem from “./TodoItem”;
const TodosList = props => {
return (
<ul>
{props.todos.map(todo => (
<TodoItem
key={todo. id}
todo={todo}
handleChangeProps={props.handleChangeProps}
deleteTodoProps={props.deleteTodoProps}
setUpdate={props.setUpdate}
/>
))}
</ul>
)
}
export default TodosList
We’re going to add some States to the TodoContainer.js file. Insert the following above the render() method:
state = {
todos: [
{
id: 1,
title: “Setup development environment”,
completed: true
},
{
id: 2,
title: “Develop website and add content”,
completed: false
},
{
id: 3,
title: “Deploy to live server”,
completed: false
}
]
};
Then update the render() function:
render() {
return (
<ul>
{this.state.todos.map(todo => (
<li>{todo.title}</li>
))}
</ul>
);
}
You’ll also need to import the TodosList component. Add this line to the beginning of TodosContainer.js:
import TodosList from “./TodosList”;
You’ll notice that each item gets a unique ID attached to it, which is important for sorting and processing the data. To access the item ID, include the following in the TodosList.js:
<li key={todo.id}>{todo.title}</li>
Next, you’re going to create another file inside the Components folder. Call this one TodoItem.js. Input this code:
import React, { useState, useEffect } from “react”
import styles from “./TodoItem.module.css”
import { FaTrash } from “react-icons/fa”;
const TodoItem = (props) => {
const [editing, setEditing] = useState(false)
useEffect(() => {
return () => {
console.log(“Cleaning up…”)
}
}, [])
const handleEditing = () => {
setEditing(true)
}
const handleUpdatedDone = (event) => {
if (event.key === “Enter” ) {
setEditing(false)
}
}
const completedStyle = {
fontStyle: “italic”,
color: “#595959”,
opacity: 0.4,
textDecoration: “line-through”,
}
const { completed, id, title } = props.todo
let viewMode = {};
let editMode = {};
if (editing) {
viewMode.display = ‘none’;
} else {
editMode.display = ‘none’;
}
return (
<li className={styles.item}>
<div onDoubleClick={handleEditing} style={viewMode}>
<input
type=”checkbox”
className={styles.checkbox}
checked={completed}
onChange={() => props.handleChangeProps(id)}
/>
<button onClick={() => props.deleteTodoProps(id)}>
<FaTrash style={{color: “orangered”, fontSize: “16px”}}/>
</button>
<span style={completed ? completedStyle : null} >{title}</span>
</div>
<input
type=”text”
style={editMode}
className={styles.textInput}
value={title}
onChange={(e)=> {props.setUpdate(e.target.value, id)}}
onKeyDown={handleUpdatedDone}
/>
</li>
)
}
export default TodoItem
Now you’ll import that TodoItem component inside of TodosList:
import TodoItem from “./TodoItem”;
Now update the map() method:
<TodoItem key={todo.id} todo={todo} />
Now State data is available to the TodoItem. Now you’re going to update the TodoItem.js component.
import React from “react”
class TodoItem extends React. Component {
render() {
return <li>{this.props.todo.title}</li>
}
}
export default TodoItem
Convert To Functional Components
So far, only one component, TodoContainer, is storing data. To make it so that multiple components can hold data, we’re going to convert one of the components into a Function component.
Update the TodosItem.js file with the following:
import React from “react”
function TodoItem(props) {
return <li>{props.todo.title}</li>
}
export default TodoItem
Now individual components can hold State data as well.
Next, you’re going to update the Header.js file:
import React from “react”
const Header = () => {
return (
<header>
<h1>todos</h1>
</header>
)
}
export default Header
Now import that into the TodoContainer:
import Header from “./Header”
The only thing left to do is update the render() function:
render() {
return (
<div>
<Header />
<TodosList todos={this.state.todos} />
</div>
);
}
Now if you go to the app directory and run the app using npm start, you should get a working ToDo app in your browser. You can add items and check them off when they’re done. It’s a good example of how easy it is to get a React app up and running in just a few minutes.
If you’ve followed through with this step-by-step tutorial, you should be getting a sense of how React is set up and functions. It’s beyond easy to get a barebones app deployed. Then you can customize items and add complexity to your heart’s desire.
We know it’s a lot to take in when you’re first beginning to learn React. We recommend browsing through this tutorial’s GitHub repository and pouring over the code as you go. This will also help you internalize React’s commands and libraries. You’ll be fluent in the JavaScript library before you know it!
Looking For React Development?
It’s no wonder that so many of the internet’s leading properties are built using React JS. It delivers a solid, dependable, attractive user interface across any device. It’s practical as well as aesthetic, creating appealing websites and applications that your users are bound to love. Whether you’re just starting to learn React JS or just need a custom development project implemented, we are here to help. Contact us today and let us know how we can help you with your development project.
