Home » Tutorials » JavaScript » React For Absolute Beginners – Part 1

React For Absolute Beginners – Part 1

React For Absolute Beginners – Part 1

Prior JavaScript knowledge is expected.

The Full Series

React is a JavaScript library. React makes it painless for front-end web developer to build interactive user interface. It was developed by engineers at Facebook.

Here are just few of the reasons why front-end developer choose React for their projects:

  • React is fast! React utilize virtual DOM for minimizing the number of costly DOM operations required to update the UI.
  • React is component-based! You can write many small & reusable components, then compose them to make complex UI.
  • React is flexible! React can render on server side using Node & it can power mobile apps using React Native as well.
  • React is popular! React has a large number of community, so you can always exchange your ideas with other React developer.

Introducing React

<script>
const element = <h1>Hello, world!</h1>;
</script>

The tag syntax above is neither a string nor HTML. It is called JSX. JSX is a syntax extension for JavaScript.

The JSX element looks like HTML. The only noticeable difference is that you would only find it in JavaScript file, instead of HTML file. If a JavaScript file contains JSX syntax, then that file will have to be compiled, because Web Browser can’t read the JSX, we need a JSX compiler to translate JSX syntax into regular JavaScript before the file fetches and reaches a Web Browser. This is handled by including Babel, it will transforms JSX into JavaScript on the fly, for example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>
  </body>
</html>

Writing JSX Expression

JSX element can be saved in a variable

The JSX element can be saved in a variable, for example:

<script>
const element = <h1>Hello, world!</h1>;

var car = {
    rimSize: <li>16 inch</li>,
    color: <li>red</li>,
    engine: <li>inline 4-cylinder 2000cc</li>
}
</script>

JSX element can have attribute

JSX element is just similar to HTML element, they can have attribute too. For example:

<script>
const element = <a href="http://www.onlywebpro.com">Visit onlyWebPro official site</a>;
</script>

JSX element can be nested inside another JSX element

JSX element can nest inside another JSX element using multi-line expression:

<script>
var element = (
    <div>
        <a href="http://www.onlywebpro.com">Visit onlyWebPro official site</a>
    </div>
);
</script>

Please be noted that a JSX expression must have 1 outermost element, which means that you must wrap all your JSX elements in 1 outermost JSX element. Please consider the following example:

<script>
// This will work
var element = (
    <div>
        <a href="http://www.onlywebpro.com">Visit onlyWebPro official site</a>
        <a href="http://www.onlymobilepro.com">Visit onlyMobilePro official site</a>
    </div>
);

// But this will NOT work
var element = (
    <a href="http://www.onlywebpro.com">Visit onlyWebPro official site</a>
    <a href="http://www.onlymobilepro.com">Visit onlyMobilePro official site</a>
);
</script>

Congratulation! You’ve learned to understand the basic of JSX & how to write it!

You’ll learn how to render JSX expression on screen in the next chapter ^^


Android, iOS Development Tutorials