Pagepro Blog

Jump in React #2 – React application structure

Introduction

Norbert Kamienski

Norbert Kamienski


LATEST POSTS

Jump in React #1 – Introduction 27th July, 2017

Stack of books for developers 31st January, 2017

JavaScript

Jump in React #2 – React application structure

Posted on .

React application structure

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

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

Public folder includes 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. 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 informations about files that have to be ignored in git actions. Package.json includes some informations 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 a glue between our App and html file. The rendered data is in App.js file.

In the above example, we said that the 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 components types in the next part of the tutorial). App class inherits from Component. This component is provided by 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. 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. 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 Kamienski

There are no comments.
View Comments (0) ...
Navigation