just a basic react intro
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Intro to React

Quick intro to React...


  1. What is React?
  2. Project setup
  3. Lint the code
  4. Add a cat
  5. React setup
  6. Webpack setup


  1. Explain what React is and how it compares to Angular
  2. Set up a modern React environment with Babel and Webpack
  3. Create and render a React component in the browser

What is React?

YOU: What is React? How does it compare to Angular?

Project setup

Create a new project directory:

$ mkdir react-intro
$ cd react-intro
$ npm init -y

Install gulp and babel:

$ npm install --save-dev gulp@3.9.1 gulp-babel@6.1.2 babel-preset-latest@6.16.0

YOU: What's babel? What does babel-preset-latest do?

Then add the following to package.json:

"babel": {
  "presets": [

Create a gulpfile.js in the project root:

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('build', () =>

Now add a "src" and "lib" folder, and then add an index.js file to the "src" to test babel:

console.log('hello, world!');

Finally, add a start script to package.json:

"scripts": {
  "start": "gulp build && node lib/index.js"

Sanity Check:

npm start

> react-intro@0.0.0 start /react-intro
> gulp build && node lib/index.js

[10:46:26] Using gulpfile ~/react-intro/gulpfile.js
[10:46:26] Starting 'build'...
[10:46:26] Finished 'build' after 615 ms
hello, world!

You: What happened?

Lint the code


$ npm install --save-dev eslint@3.7.1 eslint-config-airbnb@12.0.0
$ npm install --save-dev eslint-plugin-import@2.0.0 eslint-plugin-jsx-a11y@2.2.2
$ npm install --save-dev eslint-plugin-react@6.3.0 gulp-eslint@3.0.1

You: Why lint? What do those packages do?

Add the config to package.json:

"eslintConfig": {
  "extends": "airbnb",
  "plugins": [

Update gulpfile.js with a new task:

gulp.task('lint', () =>

Make sure to add the dependency:

const eslint = require('gulp-eslint');

Then add the lint task to the build:

gulp.task('build', ['lint'], () =>

Run the linter:

$ npm start

You should see a warning:

  1:1  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

Ignore it.

You: Why are we ignoring it?

Add a cat

Within "src" add a new file called cats.js:

class Cat {
  constructor(name) {
    this.name = name;
  meow() {
    return `Meow meow, I am ${this.name}`;

module.exports = Cat;

Update index.js:

const Cat = require('./cats');

const toby = new Cat('Toby');

Run npm start:

Meow meow, I am Toby

You: What's happening here?

React setup


npm install --save react@15.3.2 react-dom@15.3.2

You: What's react dom?

Then add a "dist" folder with an index.html file:

<!doctype html>
    <title>React Intro</title>
    <script src="bundle.js"></script>

What's bundle.js?

Add a div to the index.html:

<div class="app"></div>

Create a new file in "src" called client.jsx:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Cat from './cats';

const catMeow = new Cat('Browser Cat').meow();

const App = props => (
    The cat says: {props.message}

App.propTypes = {
  message: PropTypes.string.isRequired,

ReactDOM.render(<App message={catMeow} />, document.querySelector('.app'));

You: Is that HTML in a JS file? Why? What's JSX? Also, what does babel-preset-react do?

To process the .jsx file, install:

$ npm install --save-dev babel-preset-react@6.16.0

Update the babel field in package.json:

"babel": {
  "presets": [

Finally, update the lint task to handle .jsx files:

gulp.task('lint', () =>

Run the linter:

$ gulp lint

You should see the following error:

  17:44  error  'document' is not defined  no-undef

You: Why did we get this error?

To correct this, update the eslintConfig in package.json:

"eslintConfig": {
  "extends": "airbnb",
  "plugins": [
  "env": {
    "browser": true

Webpack setup


$ npm install --save-dev webpack@1.13.2 babel-loader@6.2.5

You: What's webpack? What does babel-loader do? Why all these damn tools?!?!

Then add webpack.config.js to the project root:

module.exports = {
  entry: './src/client.jsx',
  output: {
    path: './dist',
    filename: 'bundle.js',
  module: {
    loaders: [
        test: /\.jsx?$/,
        loader: 'babel-loader',
  resolve: {
    extensions: ['', '.js', '.jsx'],

Update the start script to package.json:

"start": "gulp lint && webpack"


$ npm start

Then open the index.html file within "dist" in your browser. You should see:

The cat says: Meow meow, I am Browser Cat