The goal of this series is to learn React, by building a minimum tooling React application. The focus is to use minimum external libraries and to build it as barebones as possible.
We are going to take a step by step approach from an initial repository setup to a fairly advanced final application. There will also be information available on the development environment that was used and the corresponding learning links.
We are not going to go deeper into how
React works in this page. We will touch more on that in subsequent tutorials.
A github repository was setup with an initial readme. The repository can be accessed here
index.html file was added with basic
We now will add
React to our website. This is done by adding 2 libraries:
ReactDOM. The libraries are added directly to the
index.html file via script tags as below:
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
Up until now, we have only given our page access to the
ReactDOM libraries. We have not yet used these libraries to render anything on our page.
Hello World to React text to
somewhere in our
index.html. For deciding what to render, we use that is known as Components in React. We add the
const helloWorldComponent = () => "Hello World from React"
We now need to tell React where to render it. For this, we add an
id to a container element in our
index.html file. We then ask React , more specifically ReactDOM, to insert our component into this place as below:
const domContainer = document.querySelector('#app')
This was just a basic setup. The next tutorial is going to add further CSS to our project. Slowly, we are going to improve our understanding of the React libraries and ecosystems.
Claim your page on DEV before someone else does
Level up every day