How can I program a Gutenberg block without all this npm and node and whatever files, on Windows with Notepad++, which I use since 5 years to develop all kind of plugins and themes? source
If you feel the same way but still want to learn React this post is for you. You can start learning it without installing anything, just with a simple index.html file. I will show you how.
Important to note! Use this method just for learning not for production.
The Super Simple Setup
First, let’s create an index.html file with the basic markup and add React.js and ReactDom (which will help us to render our code to the browser) to the head tag like this:
You can get these links from reactjs.org. Let’s use the latest React version 16. One more thing we need to do is to create a div with the ID of “app” (the name of the ID can be anything you like). We will need this div to render our React code. And that’s it. Now we are ready to write a simple “Hello React!” app.
Writing “Hello React!” App
We will render a simple h1 tag with the “Hello React!” text inside, like this:
Let’s explore the code we just have written. First, we are giving our function name “title”. Inside of the createElement function, we are writing three different arguments. The first is whatever we want to create, our h1 tag. Next, on line three we wrote
null (or you can write empty object). You can use it to pass various attributes and properties. In the later posts I will show you how, but now we don’t need it. And the last argument is our “Hello React!” text.
Now we need to tell ReactDOM where to render it. To do it, we will need to target our div with the ID of “app” with the document method
getElementById() like this:
The final “Hello React!” app should look like this:
Now open your index.html file in the browser and if everything is OK you should see h1 with the “Hello React!” text.
Congratulations, you have made the first step to learn React.