Build A To-Do App with React Part 2

— — — — — — — — — — — -

I was basically supposed to have finished this tutorial by Last month, like WTF? it’s over 1 month already. My bad, i know. School and some other stuffs have taken over. But trust me,i am back.

So Where did we stop? Em. We just installed React using Facebook’s Create-react-App. Now what? Lets try to put up our components.

A To-do App, what should we be expecting/Componentially? (Wa e mean?)

To-do Header (Title and tagline blah blah)
To-do form (For creating the To-dos)
To-do List (To List all the to-dos and also insert the delete and edit button to our To-do App)

Basically, these should be the only three components we would be needing. At least for now. As we proceed, we might want to still break them into smaller components.

So How Do We start ?

Having installed React using Create-react App? You should have the following directory structure.

node_modules
public
src

For now, we would be working with the /src folder.

Inside your src folder, delete App.css, and then App.test.js

I/We would be making use of App.js as our start page (Basically like a hook that connects all our components together which would now be passed down to index.js)

Now Lets add the following to our src directory

inside /src, create the following files.
Todo.js
Todo-list.js
Todo-header.js

This three files should basically help us get started.
Inside of Todo.js Lets add some basic stuffs.

import React from 'react';
import TodoHeader from './Todo-header';
impoer TodoList from './Todo-list';
class Todo extends React.Component
{
render()
{
return (
      <div>
<TodoHeader>
<TodoList>
</div>
    );
}
}
export default Todo;

And then inside of the Todo-header.js, Lets add

import React from 'react';
class TodoHeader extends React.Component
{
render()
{
return ('Hello To-Do, I am the Header.');
}
}
export default TodoHeader;

And finally, inside of the Todo-List.js, add.

import React from 'react';
class TodoList extends React.Component
{
render()
{
return ('Hello To-Do, I am the List.');
}
}
export default TodoList;

If everything went as planned, Great, else, em, scroll up once more.

Now Inside of our App.js which is the root/main page that couples even the coupler. We would be adding the below.

In the import sections, import the Todo.js file via:

import Todo from './todo';

And then, Since we are not using the ReactDOM.render, we would have to manually insert the JSX tag into App.js

Now

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Todo from './todo';
class App extends Component {
render() {
return (
<div className="card-content">
<Todo />
</div>
);
}
}
export default App;

All good now i guess. If everything worked as plan, visiting localhost:3000 should present you with

Final image

Explanation ( So What Just happened ?)

Inside of our Todo.js, we are importing React from the react folder. That basically looks obvious i guess. Then we created a class called Todo which is extending the React.Component class. This is es6 in play. I advice you take a walk with es6 if this looks kind of confusing. Check Jeffrey Ways Laracast video to know more.

Moving further, we did render() which helps us render our code, and then return, so it is accessible from the file where it is being imported from.

Then what else? Em, export. Export basically makes it possible so we can import from another file, like words and opposite, export ===> to import.

Feel to know more, or got a question, you can always drop a comment.

And that’s it for this tutorial. The plan is to make it short, simple and yea simple again. Tanku for ya time!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.