React Get Started

Posted by On 10月 01, 2016 0 Comment

React

React is javascript library to build UI.
React is component-based.

Get started

To make React app, there are a lot of ways. So far,there are no standard way and people select their own way to make it.

In this entry, I introduced simple ways for learning at first.

  • Compiled javascript from React

Easy way to learn is reading React tutorial Tutorial React
But tutorial codes skip some parts to run on the local. I tried to run all on the local by filling skip parts.

Anyway, as first step, prepare environment first React app.

Compiled javascript from React

React prepares compiled javascript for learning.
This is just simple javascript library set. We can use them by importing.

We can download Starter Kit from https://facebook.github.io/react/downloads.html
This starter kit includes compiled react and react-dom
Starter kit is easy to use.

Project structure

project
|- react-15.3.1
|     |- build
|          |- react.js
|          |- react-dom.js
|- src
|   |- helloworld.js
|- helloworld.html

helloworld.html

This is entry html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Hello React</title>
        <script src="react-15.3.1/build/react.js"></script>
        <script src="react-15.3.1/build/react-dom.js"></script>
        <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel" src="src/helloworld.js"></script>
    </body>
</html>

Import react and react dom from react starter kit
And use babel-core browser.min.js to work with jsx.

HTML body has div and script tag.
script type is babel. src/helloworld.js source is jsx based.
Let’s take a look.

helloworld.js

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

Render dom in div

Back to helloworl.html, this js is not pure javascript.
The code is jsx.

※ I use webstrom as editor. jsx code should have .jsx prefix. helloworld.js is recognized as js, so IDE warns. Of course, we can change from .js to .jsx

Tutorial template

To work with tutorial from React, we need template.
React source file and some other useful libs to learn React is included.
This is template

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="src/tutorial1.jsx"></script>
</body>
</html>

To change src/tutorial1.jsx, we can run react on the local.
Preparation was done. Let’s learn React.

TOPICS