The best way to start with React is by modifying and extending a Hello World example. There is a basic template available in the Facebook documentation.
For simplicity, you don't need a server to get started with React; you can load it and explore it as an HTML document by opening it in your browser.
Create a basic HTML page and place the scripts into the head tag:
<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/[email protected]/
babel.min.js"></script>
</head>
With the preceding scripts, we loaded react and react-dom and the third script--babel--will make (transpile) our ES6 and JSX scripts compatible with the browsers.
Also, we can render our first component in the body tag:
<body>
<div id="root"></div>
<script
type="text/babel"> //this will make ES6 code and React Jsx compatible with the browser.
ReactDOM.render(<h1>Hello, world!</h1>,
document.getElementById('root'))
</script>
</body>
There are two ways to define components in React: as plain JavaScript functions or as an ES6 class that extends from React.Component.
Let's look at a basic ES6 class component:
class Greeting extends React.Component
{
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
In the preceding code, we have an ES6 class Greeting that extends from React Component class; then we defined a render method that returns HTML tags. HTML tags in JavaScript is the special thing that comes with React. In essence, it is JavaScript XML (JSX) that Facebook added to React to make it more descriptive, and it also saves typing.
You can use plain JavaScript but many developers, including myself, find it actually easier to write HTML into the JavaScript.
Next, paste the Greeting component just above the ReactDOM.render line:
class Greeting extends React.Component {
render() {
return <h1>Hello,
{this.props.name}</h1>;
}
}
ReactDOM.render(
<h1>Hello, world!
</h1>,document.getElementById('root')
)
If you save your file and refresh your browser, you'll see that nothing changed. To render a component, you need to attach it to an actual DOM element or add it to a parent component that can render it.
The idea of React is that we can build components or blocks and put them together to assemble complex user interfaces. Another thing you may find different is that the data flow between components is not that well prescribed like other frameworks. React itself has no actual strict pattern on how that should be done.
However, the intention is to have the data always flowing from top to bottom in one direction, or unidirectionally as many refer to it, like a waterfall. Top-level components can pass data to their child components in one direction; if you want to update the data of a child component, you'll need to update it in the parent and pass it down again. Let's see how this works.
Here's how we can render the Greeting component that we created:
ReactDOM.render(
<Greeting name="Joe"/>,document.getElementById('root')
);
We added the Greeting component as a <Greeting/> element, and we also passed a parameter, called name, with the value Joe.
Save the document, refresh the browser, and see what it does.
The properties or the props in the components are the way we pass data to components and the parameter name is accessible from the Greeting component as this.props.name.
If we want to render many instances of the Greeting component, for example, we need a parent component that can render multiple child Greeting components:
class App extends React.Component {
constructor(props) {
super
(props);
console.log(props); // array of three children components
}
render() {
return (
<div>
{this.props.children} // render the children components
</div>)
}
}
const Greeting = ({ name}) => (
<div>{name}
</div>
)
Here the parent App component wraps and renders many children Greeting components:
ReactDOM.render(
<App>
<Greeting
name="Joe"/>
<Greeting name="Tony"/>
<Greeting name="Harry"/>
</App>,document.getElementById('root'))
