React.js Basics — Part 2 (for starters and Angular Developers)

Photo by Ferenc Almasi on Unsplash

Introduction

In previous post on this topic, we started with the basics of React.js .

We learned that, React is a JavaScript library to create and compose components. Writing a react app is creating components and putting them together.

Each component has a name and three distinct characteristics:

• Props: Component can accept input from other components by using props. In JSX, these are written like HTML attributes.
• State: Components can maintain an internal state.
• Render: Component knows how to render itself.

We also learned that we can use create-react-app tool to setup a bootstrapper application. However, for our demo purposes, I am going to setup a basic environment without that tool.

Setting up Application Shell

I’ve setup a git repository with some packages installed like bootstrap, parceljs, react, react-dom etc.

Here is the initial structure looks like:

index.js file is the entry point for our application and here how it looks:

and here is how it currently looks in the browser:

Now, we saw a basic todo application example in previous post, I’ve moved that code in this repo:

and here is the updated index.js file, which renders TodoApp: