Today we want to write our first react Hello world app. Before we can start, we have to setup out dev-enviroment.

We are using Visual Studio code with all available react plugins on ubuntu 16.04

This tutorial is inspired by this great egghead video:

Prerequisits

At first, you need to have some tools installed. Here they are.
node.js installed
npm installed

babel react
the facebook react library

babel installed
Babel is a javascript compiler, which transforms latest javascriptstandards to native javascript

webpack installed
Webapck is a modulebundler which creates statis js assets for the browser

$ apt-get install nodejs
$ apt-get install npm

$ npm install -g --save babel webpack webpack-server-dev

$ npm install --save babel-core babel- loader babel preset-es2015 babel-preset-react

Init your node project

To initialise your project simple type:

$ npm init

This will create your package.json

Fill your projectdata
My package.json looks like that

{
  "name": "simplecommand",
  "version": "1.0.0",
  "description": "a simple console command",
  "main": "createUser.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pboethig/nodejs-lessons.git"
  },
  "keywords": [
    "nodejs",
    "command"
  ],
  "author": "pboethig",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/pboethig/nodejs-lessons/issues"
  },
  "homepage": "https://github.com/pboethig/nodejs-lessons#readme"
}

Add your component files

Create a index.html
This will contain your main html page

main.js
this will load your components

webpack.config.js
this will setup your dependencies and loaders and defines the compilingprocess of es2015 babel to native javascript

App.js
Here you will code your components

touch main.js index.html App.js webpack.config.js

Configure your webpack.config.js

Open your webpack.config.js and add folling code

module.exports=
{
    entry:'./main.js',
    output:
    {
        path:'./',
        filename: 'index.js'
    },
    devServer:
    {
        inline:true,
        port:3333
    },
    module:
    {
        loaders: [
            {
                test:/\.js$/,
                exclude: /node_modules/,
                loader:'babel',
                query:
                {
                    presets:['es2015','react']
                }
            }
        ]
    }
}

- This will tell webpack to pack a index.js with all javascripts in it
- Start a webserver on port 3333
- test all .js files
- Generate native javascript from babel sources.

Load your javascript on your html page

Open your index.html and add folling snippet

<!DOCTYPE html>
<html>

<head></head>

<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>

</html>

- This will add a div with id "app" which is the container for our app
- include the webpack generated index.js

Create your first component

Open your App.js and add folling snippet

import React from 'react';
class App extends React.Component {
    render() {
        return <div> Hello World</div>
    }
}

export default App

- This will import the react library and add a class App which only renders a div with the text "Hello world"

Load your component in main.js

Open your main.js and add folling snippet

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

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

- main.js is the startup file, you have configured in webpack.config.js
- This will import the react library
- Import your App component, which you have prevoiusly created
- Adds your App component to the "app" div in your html

Start your server and test your app

Open a terminal and type:

npm start

This will start your webserver on port 3333

Surf to localhost:3333

Thats it, you have created your first simple react app.+

That's awesome !

WebDev

Dieses Blog durchsuchen

Samstag, 27. August 2016

react.js: create your first react app with webpack and babel on es2015