Typically we use a package called Create Reat App, to start a React project with node.js and npm. We can also use the React CDN to quickly get up and running. This is a good way to learn the React ecosystem and test out React features. The React CDN can be used to create production widgets or smaller section of a website.
To get started we won't need any node.js just a blank HTML document.
HTML blank document
Create an index.html file and start with a blank HTML document then drag or open the document in your browser.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Include CDN's in head of document
Include the CDN script links for React, ReactDOM, React-Router-DOM and Babel.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>The first script is the core React library and the react-dom script is like the glue layer that is between React and the DOM. This is what lets us inject components into the DOM. We need both of these two libraries loaded into our HTML document to get started.
We are also adding Babel to transform JSX to JavaScript.
Create a React component
Inside the body of the HTML document creat a div tag with an id of app-one. This is the div that will be controlled by the React component.
<div id="app-one"></div>React is a component-based framework and every React app has a root component. This helps you structure your code much cleaner by nesting one or more components together. For example if you have a form, the input field and the submit button could each be reusable components that make up the app.
There are a few different ways to create a React component. For this example we are going to create a JavaScript class based component. Classes are a way to blue print objects in JavaScript.
React lets you define components as classes or functions, and components defined as classes provide more features. We are going to give the class keyword a name of AppOne (for the first example) as a reference to the div id.
class AppOne extends React.ComponentReact.Component
The class is using extends React.Component so we have access to the React object throught the React base CDN library. Also through .Component we inherit all the base functionalities of the component into this class.
render()
class based components must use the render() method that is responsible for rendering our template to the div id app-one element.
JSX
Inside the render method we are going to return a value that will be our JSX templet. JSX is a way for us to write html code inside JavaScript, that looks very much like HTML. Because out of the box JSX is not supported by browsers, we are going to use Babel. This tool will compile JSX to JavaScrpt, making it browser compatible.
To use JSX we should always have one root element div at the top and nest all of our elements inside that root div.
Putting this together we get:
<script type="text/babel">
class AppOne extends React.Component {
render() {
return (
<div className="app-content">
<h1>Component</h1>
<p>Random number: { Math.random() * 10 }</p>
</div>
);
}
}
ReactDOM.render(<AppOne />, document.getElementById('app-one'));
</script>Then to output some dynamic content, as that is what React does, we can add some basic JavaScript. Put the JavaScript inside of { } curly braces to output using JSX. Using the Math object, and the random() method, to generate a random number. Then for some extra measure, multipling that by 10.
Example
On page refresh, get a random number.
Nested Components
Now that we have a basic react app up and running, we can start structuring it using nested components.
This type of assembling is called componsition, and helps create a more modular interface that can be divide up into multiple peices. Now anything inside InnerComponentPart will be passed into the AppOneA component as a child element.
<script type="text/babel">
class AppOneA extends React.Component {
render(){
return (
<div>
<h1>The App</h1>
<InnerComponentPart />
</div>
);
}
}
class InnerComponentPart extends React.Component {
render(){
return (
<div className="inner-component">
<p>This is the inner nested component random number: { Math.random() * 10 }</p>
</div>
);
}
}
ReactDOM.render(<AppOneA />, document.getElementById('app-one-a'));
</script>Example
Component state
React uses component state to keep the UI and component data / content in sync with each other. So if we have a JavaScript object where our content is being stored and updated, we can use component state to update these changes in the browser.
There are a couple of different ways we can create the state, and the first way, which is the easiest, is to define the state property in the component.
For this example we'll use a name and age property with some values.
State and props
First we define the state property or prop for short, and set that equal to a JavaScript object. This will be the initial data we want to show in the component and can be dynamically update through things like a login forms.
Output the state
In our component JSX template we are going to output our dynamic content in { } curly braces. To reference the component self we use the this keyword, then we get access to the state property by say .state, then we want the name property so we can just say .name.
<script type="text/babel">
class App extends React.Component {
state = {
name: 'Mario',
age: 20
}
render(){
return(
<div className="app-content">
<h1>Component</h1>
<p>My name is: { this.state.name } and I am { this.state.age }</p>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app2'));
</script>Example
Getting dynamic data through state.
setState() method
State can be updated in response to event handlers, server responses or prop changes. This is done using the setState() method.
Create a button with an onClick that will trigger an arrow function with the name of Buttonchange.
<script type="text/babel">
class App extends React.Component {
state = {
name: 'Mario',
age: 20
}
Buttonchange = () => {
this.setState ({
name: 'Luigi'
})
}
render(){
return(
<div className="app-content">
<h1>Component state</h1>
<p>My name is: { this.state.name } and I am { this.state.age }</p>
<button onClick={ this.Buttonchange }>Change name to Luigi</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app3'));
</script>Example
Change the name by clicking the button.