React is the leading javascript library for building interactive frontend applications. It makes building and maintaining a large-scale application possible. Getting started with React can be confusing as several things are necessary to configure your project. In this article, you will take our first practical step into working with react.

Set up your React project

Creating a new React project can be done by setting up and installing everything manually. If you don’t like to configure things up, you can use a “create-react-app” tool. It simplifies your project’s creation, and you don’t have to do any work setting up your environment.
First, go to the directory that you wish to create your project inside and run this command.

npx create-react-app project-name

It will take around 3-10 minutes to install and downloading everything properly. This is the way you will create a new react project 90% of the time.

React Project Structure

Once everything is completed, you will see many files inside the src directory. We are interested in App.js and index.js as both contain the React code that we need to understand.

Here is what each directory contains –

Running your first react app

To compile and serve our React application, run the command below in your terminal.

npm start

This will starts a server and sets up hot reloading. So any changes to the source code are updated in the browser without manual reloading. The result will be shown in your default browser once it has finished compiling.

Terminal Screenshot

Browser Output

Diving into the code

Now go to the src folder and edit the index.js file. You will see a couple of import codes in index.js. These are ES6 import statements. It allows the import of any variable exported from a JS file.

In the code, you will find these two lines of import statement at the top.

import React from 'react'
import ReactDOM from 'react-dom'

The first line imports the react library and stores it in the React namespace. All the methods will become accessible using React.methodName. The second line imports the react-dom library, which handles the rendering of ‘react’ elements to the browser.

The react code that you write is handled and understood by the React Library. However, the final step is to display the output to the browser, which is dealt with by React DOM.

Rendering the App

Replace this part of code in index.js

ReactDOM.render(
<React.StrictMode>
   <App />
</React.StrictMode>
,
document.getElementById('root')
);

with the code below:

ReactDOM.render(
<div>Hello react world</div>
,
document.getElementById('root')
);

After you save it, it should compile and update the changes in the browser. Try refreshing the browser if the changes don’t show up. It should display Hello react world as we wrote in the div element.

The code that we wrote in the first argument  ReactDOM.render() is not HTML code; it is called JSX and uses XML like syntax. We can create components (custom elements) and output them using the JSX syntax. In practice, we nest all our code in App.js and then import it inside index.js for rendering.

The second argument specifies the HTML DOM element to inject our compiled JSX code. There is an index.html file in the public directory used as the template to inject our React code. We can access any element from index.html using the built-in “document” object and pass it as the second argument:

ReactDOM.render(JSX, element)

Creating the Component

A component is a User Interface (UI) piece that can contain one or a group of JSX elements. Go to App.js and remove all the code so that we can write our own.

Before, we had to import the React namespace even though we directly didn’t use it. This is because the JSX code was converted to React.createElement() after compilation.

import React from 'react'

However, with the latest version of React, it is optional. The compiler will automatically import the required functions. So, we can write JSX without importing React.

Now, we can move forward to create a component using two techniques: classes and functions. Functional components are simple and easy for beginners, which are javascript functions that return some JSX code.

Create a component named App and return some JSX code.

function App() {
return (
<div>
   <h1>Component Title</h1>
   <p>Dummy text</p>
</div>
)
}

Note that the JSX code must be wrapped inside one parent element like <div>. We have just created our first component. Now, we can export this component using the “export” statement as below:

export default App

Rendering the Component

Our last step is to use this component and display it. So, go to index.js and import our component:

import App from './App'

And instead of rendering “Hello react world,” we will render the App component like any other JSX element.

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

The JSX tag must be self-closed (like <br />) if it has no children. Now, we can see our component being displayed in the browser.

Components are reusable, so you can import them into other files and nest them. We can pass data to components (props) and maintain their own data (state).

Points to Remember

Working with react requires the knowledge of designing components and composing them together. We have taken the first major step into working with react. Now it is time to dive into the important concepts of React to gain a solid understanding.

Back to: React Tutorial > Learn React