TABLE OF CONTENTS

React Tutorial #2 – React Application Structure

React application structure

The create-react-app command generates simple application that have a structure like this:

create-react-app command

Node_modules folder contains a few modules that are necessary during the react web development for the application to work correctly. When we add something with npm command, we can find it in this folder.

Public folder includes a favicon and html file where our app is attached to DOM element. Predominantly there are only html declarations (DOCTYPE etc.) and a few other elements of DOM. The rest of the components are defined in react (javascript and jsx files).

Next is src folder. It’s the main folder. Here is the whole application. There are components, tests and css files. We are going to add our components here. It’s only for development and when we want to build the application, webpack collects all of the files from this folder and creates a minified production bundle.

There are three other files in the root folder. Gitignore contains information about files that have to be ignored in git actions. Package.json includes some information about our project, contains defined npm scripts and installed dependencies. The last one, readme is a project guide.

Where everything starts

Index.js is the main react component. The application has its start here. There are no spectacular calculations. At first, react, app and css files are imported.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

At the root of your tree you still have to write some plumbing code to our index.html.

The primary API for rendering into the DOM looks like this:

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

In the above example, we said that the react has to render our element which we imported at the top of the root element.

First rendered component

Index.js don’t render any data. It’s only like glue between our App and html file. The rendered data is in App.js file.

In the above example, we said that React has to render our element which we imported at the top of the root element.

There are some imports at the top of the file just like in index.js file. Below we can find a declaration of our component. This is one of several declarations of components in react. It is typical for containers (there will be more about component types in the next part of the tutorial). App class inherits from Component. This component is provided by the framework. There are render methods which return html elements in this class. But this funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension for JavaScript. Programmers are using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. The programmer can embed any JavaScript expression in JSX by wrapping it in curly braces.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <div className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h2>Welcome to React</h2>
       </div>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

Conclusion

There are two folders in our structure: ‘src’ which contains all of our react app files and ‘public’. In the second one, there’s html file and icon. Webpack compiles all of the files from src folders and builds the single javascript file. Index.js is a place where react application is connected to any element from our html and where the App component is rendered. The declaration of the App component is located in App.js. It’s a class that extends react’s component. In class declaration there is a method called render. That method returns JSX template. JSX is a syntax extension to JavaScript. It’s familiar to HTML but can include javascript expression inside.

Next part of this tutorial will explain what is a component in React.

Norbert Kamienski

Norbert is an Engineering Manager and React Native Expert at Pagepro, where his expertise and leadership have been pivotal for over eight years. Renowned for his professionalism and meticulous attention to detail, Norbert has a well-earned reputation for optimizing app performance to its peak. His technical insight and deep understanding of React Native have made him a trusted figure both within the team and among clients.

Article link copied

Close button