React For Absolute Beginners – Part 1

Prior JavaScript knowledge is expected.

The Full Series

Part 1: Getting Started with JSX
Part 2: Rendering JSX Expression
Part 3: Advanced React Knowledge
Part 4: Writing Your First React Component
Part 5: More to come…

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 ^^