To quickly try something with React or get an initial feel for the library, you don't necessarily need to install anything on your system.
Numerous platforms exist that provide you with a basic version of React in the browser. For example, you can create small applications and test them directly in the same window. This approach is only suitable for a very small scale and for smaller experiments.
Warning! As soon as you start working on a larger application, you should write the source code locally on your system and stop using such a playground.
Ahead, we’ll introduce one of these platforms: CodePen.
CodePen: A Playground for Web Development
You can use the CodePen platform both after a free registration and anonymously without registration. The address of CodePen is https://codepen.io. As with other similar platforms, you have three editors, one each for HTML, CSS, and JavaScript. Also, the platform will show you the result of executing your code in another section of the window. You can vary the size of the individual sections using drag and drop, and you can also customize the layout of the entire platform.
Users that are logged in can save their experiments and have an overview of the saved projects through a dashboard. The registration can be done either directly via a CodePen account or via a Twitter, GitHub, or Facebook login.
The figure below shows the default view of CodePen. In the next section, you'll learn the steps to get to a React playground where you can run your experiments.
A React Project on CodePen
In the default configuration, CodePen doesn’t include any libraries and just provides you with a combination of HTML, CSS, and JavaScript. You can activate React in this environment by first clicking the Settings icon in the JavaScript editor. There, under the JS item, select Babel as the JavaScript preprocessor and then add the two libraries, react and react-dom, under Add External Scripts/Pens. This configuration allows you to start developing your React application.
Babel: Babel is a JavaScript compiler that accepts JavaScript source code and in turn also produces JavaScript source code. The purpose of Babel is to simulate features that aren’t yet implemented in certain browsers. Babel itself only provides the compiler infrastructure and can be extended by plugins. Each of these plugins is responsible for a specific aspect, such as supporting arrow functions. Several plugins can be combined into presets. This is a convenient feature that should save you from having to include many plugins. For example, the React preset groups some JSX plugins for you.
A React application requires an HTML element in which to insert the application. For this purpose, you need to insert a div element in the HTML editor with an id attribute and the value, root (see listing below). The value of this attribute is freely selectable and may differ. In this case, you must adjust the reference when you bootstrap the application.
<div id="root"></div>
Below you can see the JavaScript source code of the sample application. It consists of defining a component and rendering the React application.
const Greet = ({ name }) => <h1>Hello {name}!</h1>;
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<Greet name="Reader" />);
In the JavaScript editor, you first create a simple component called Greet. Make sure that the name of the component starts with an uppercase letter. The component is an arrow function that returns a JSX element. The function receives a props object as an argument, which you can use to access passed values. You can access the name value, which you extract via a destructuring statement, in the JSX structure with curly brackets.
After defining the component, you get down to the actual setup of the application. First, you need a reference to the container element where you are inserting the application—that is, a div element you defined earlier. Then you use the createRoot method to create a root object from the ReactDOM object and the reference to the div element. In the final step, you call the render method of the root object and pass it another JSX structure, which contains the Greet component as an HTML tag with the name attribute. This way you can make sure that React renders the component and produces output like that shown in this figure.
The CodePen platform has a pretty simple structure. As a consequence, in the default setup, you have no way to divide your application into multiple JavaScript files. Other platforms, such as CodeSandbox, for example, offer this feature, but local development of applications is still much more convenient and flexible. In the following section, you’ll learn how to start developing your React application on your own system.
Editor’s note: This post has been adapted from a section of the book React: The Comprehensive Guide by Sebastian Springer.
Comments