React

First Steps

Basics Install React Start React

Table of Contents

In this lesson we will setup our project and build our first React application.

The official React documents can be found in React and Create React App.

Language and Editor

Several JavaScript compiled languages can be used with React:

JavaScript with ES6 features will be used in this lecture. We will use Visual Studio Code editor.

Installation

There are a few different ways to get started with an React project. You can also add React component to existing HTML document. You can see how in the official React documentation here.

We will use the environment that Facebook has created which is pre-configured with everything you need to build a React application. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

Before we can begin, you need to ensure you have installed:

Now create React application (Create React App and here ).

It is done by executing in the terminal:

npx create-react-app my-app

my-app is the name you give to your application (you can use any name). The command creates the folder my-app.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Go to my-app and open live server by:

cd my-app
npm start

Read about folder structure in Folder Structure.

First Application

Generate React project as described above. Write in index.js the following and run npm start.

/*****************************************
 * * IMPORT LIBRARIES
 *****************************************/

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

// import our css
import './index.css'; 

/*****************************************
 * * SHOW CODE
 *****************************************/

ReactDOM.render(<h1>Hello Class!</h1>, document.getElementById('root'));

/* JSX of the above is translated to JS like:
var h1 = document.createElement('h1');
h1.innerHTML = 'Hello Class!';
document.getElementById('root').appendChild(h1);
*/

Libraries

Sometimes we need to load external global scripts or CSS files into our projects (for example Bootstrap, jQuery, ...).

A quick and easy method of integrating frameworks like Bootstrap or jQuery is to simply link to a hosted version of the framework (by CDN link) within the <head> tags of the index.html file located in the app folder. You can use the npm to install node packages that contain the files to these frameworks and then to use import statement.

You can find how to install libraries in Installing a Dependency folder. Here you can see Bootstrap and other examples.

Bootstrap

To include Bootstrap write the following command at the console ad the application root folder: 

npm install bootstrap --save

The --save option instructed NPM to include the package inside of the dependencies section of your package.json automatically.

Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';

SASS

To include SASS write the following command at the console ad the application root folder: 

npm install node-sass

SASS files file extension is .scss

Normalize.css

If you don't include bootstrap, add normalize.css to your application by writing in index.css:

@import-normalize;

normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Since bootstrap library makes use of normalize.css, it is not required while using bootstrap.

See Adding a CSS Reset folder

Deploy Application

First remove libraries that you don't use, especially unnecessary scripts in your modules definition. Consider smaller alternatives to the libraries that you do use.

Define your site path in package.json like:

"homepage": "http://bridge-tech-edu.com"

Run the following command in the console within an React project root folder:

npm run build

This will create a 'build' folder with a production build of your app. For more information see Deployment.