Import statements are for importing other components and files (images, css, etc).

Every react component extendsReact.Componentclass, since it is imported in first line we writeclass App extends ComponentwhereAppis component name in this case.

renderfunction will return html which will be rendered.

export default App, it allows other files to import this file, App is our component name, if you useclass TodoListItem extends Componentthen you have to writeexport default TodoListItem

App.test.js- I don’t know/care.

index.css- Another CSS file.

index.js- This is our main JavaScript file, we will explore it later.

logo.svg- A logo in SVG format.

serviceWorker- A service worker works in the background and allows you web app to behave like native app, this is advanced level thing so don’t touch it if you don’t understand what is happening.

ExploreApp.js

importReactfrom'react';// Import react from node_modules folderimportReactDOMfrom'react-dom';import'./index.css';// Import index.css from current folderimportAppfrom'./App';// Import App.js from current folder, Importing js files doesn't require extensionimport*asserviceWorkerfrom'./serviceWorker';// Import everything from serviceWorker in current folder, It will import everything which is being exported for SW.ReactDOM.render(<App/>,document.getElementById('root'));// Render App component, on #root element, in our index.html #root is a div.// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();

Our initial app architecture

index.html: It is importing index.js.

index.js: It is importing App component.

App.js: It is our only component for now.

Let’s create a todo app to understand more

A todo app is perfect example for learning any JavaScript frameworks, it helps us learning the following concepts.

How to handle form input

How to handle button clicks

How to add elements dynamically

How to remove elements dynamically

How to handle events on dynamically created elements

May be one or two nice concepts about framework.

Steps

We are going to create two new elements,TodoListandTodoListItem, it’s likeulandli.