Creating a basic React Application

*Disclaimer*: This tutorial uses node v8 and the latest version of npm.

Today we’re going to create a basic React app. React is the main API used by Facebook and many other applications around the web. Using React, will streamline your build process, keep your code DRY and modular, and is just plain fun to work with. It lets you combine XML(JSX) with regular Javascript code, bridging the gap between markup and client-side logic. You know the old saying: “Once you React, you never go back!” Lets get started.

Setup:
1.
Install the react generator with npm. Type the following code into your terminal/prompt: npm install -g create-react-app

2. Once that’s installed, you can run the generator with: 
create-react-app <your-app-name-here>

3. Move into your app directory and we’ll continue. Once there, run npm start and confirm the development server is running correctly.

The React Default App
Application:
1. Structure:
The generator does quite a few things behind the scenes, but in the end, you’ll have something similar to this file structure in your app directory.

<your-app-name-here>/
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
.gitignore
package.json
README.md

2. Rendering your application
The two main files you’re worried about here are src/App.js and sec/index.js. Your index file is the file node will run first and will render your main App component. In React, you’ve got two main points of entry for creating components. Stateless-functional components and class-based components. If your component is static and contains very little or no logic, you use a stateless-functional component. If you’ve got a component which needs defined logic and states, you would want to go class-based. We’ll creating both here.

First, we want to take a look at our index.js file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // Import our root component.
import './index.css';
/* The important call here, this actually renders your root component, which in turn, renders all of its child components */
ReactDOM.render( <App />, document.getElementById('root') );

Now, that you’ve seen the render call, we can take a loot at your root App component. This component is our base component which can contain children components, nested as deep as you like, and will eventually make up the entire application!

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

class App extends Component {
render() { // This is how your component gets render.
return (
// JSX GOES HERE!
);
}
}
export default App;

React uses JSX to render each component’s markup. This is basically XML tags inside of a return ( ... ) statement. This all gets converted to JavaScript behind the scenes, but it lets you write your markup using HTML/JSX instead of having to write html code inside quotes "", for example. One of the many cool features of React.

An example of JSX code for creating a basic page follows:

return (
<div class="container">
<div class="page-header">Hello Page Header!</div>
<p>Hello React Application!</p>
</div>
)

This code is run inside the scope of your render call, so you have access to everything available, remember JSX is just JavaScript XML that is converted to JavaScript code later on.

3. Recap:
Stateless-functional Component:

module.exports = function MessagePrinter(msg) {
return (
<p>The message being displayed is {msg}</p>
)
}

Class-based Component:

class MessagePrinter extends Component {   
  // ...
// Class/Instance methods go here
// ...
render() {     
return (
<p>The message being displayed is {msg}</p>
);
}
}

Now, just import these components, where you want to use them and BAM. You’ve got DRY, modular, composition-based development. You can use the components in other components by simply using the predefined tag name that is created with your component.
i.e:

import 'MessagePrinter' from './message-printer';
module.exports = function() {
return (
<MessagePrinter msg="This is a test" />
)
}

It’s that easy. I hope you enjoyed my basic React app tutorial. Thanks for reading and happy coding!

-Andrew

Show your support

Clapping shows how much you appreciated Andrew Senner’s story.