React Intermediate Tutorial https://github.com/bluninja1234/todo_list_instruc...

View finished product here.

What will you learn?

You will create an simple to-do list with React.js, and learn about the more complicated parts of react. Prerequisites (highly reccomended) complete the react.js getting started guide.An knowledge of HTMLAn knowledge of CSSBasic shell commandsDecent knowledge in JavaScript

Supplies

All software will be covered in the tutorial.

You will need an computer with the following software installed:

npm/yarn
An IDE that supports js
A web browser

Step 1: React Intermediate Tutorial

Getting Started

Why React.js?

With React.js, the point is to reuse code. For example, say you have an navigation bar that you have in 100 pages.
If you need to add an new page, then you need to change the navigation bar on every page, meaning that you have to do the same thing for 100 pages. Even with macros, this becomes very tedious.

Installing Required Software/Packages

You will need:

npm/yarn

How to install:

Go and install the latest LTS of Node.js
OPTIONAL: if you prefer yarn as your package manager, install yarn by typing into powershell npm install -g yarn
Open powershell/cmd.exe
Navigate to the directory that you would like to create your project in
Type npx create-react-app .

You have completed setup phase. to test it, open powershell, navigate to your project directory, and type npm start.
you should get a webpage loaded on your default browser.

Step 2: Step 1: Getting Started

To start off, delete the following files from your /src directory:

App.test.js
index.css
logo.svg
serviceWorker.js
setupTests.js

We don't need these files.

Let's also organize our filesystem. Create these directories in /src/:

put App.js into the js dir and App.css into the css dir.

Next, let's reorganize the dependencies.

in index.js, remove the imports for serviceWorker and index.css. Delete serviceWorker.register().Reroute the paths for App.

in App.js, remove the import for logo.svg, as we don't need it anymore. Reroute App.css. delete the App() function and the export for App.

In React, we have 2 ways of defining elements. We have functions and classes. functions are for less complicated items, and classes are generally for more complicated components. Because a todo list is more complicated than a bunch of HTML, we will use the class syntax.

Add this to your code:

https://pastebin.com/nGXeCpaH

the html will go within the 2 divs.

let's define the Element.

https://pastebin.com/amjd0jnb

notice how we defined value in the state. We will need this later.

in the render function, replace hi with {this.state.value}

we are rendering the value passed through from the state that we defined.

so let's test it!

in the render function of App, replace it with this:

https://pastebin.com/aGLX4jVE

it should display an value: "test".

let's see if we can render multiple Tasks!

instead of getting React to render just one element, we can create an array of and tell react to render the array instead.

change the render function of to this:

https://pastebin.com/05nqsw71

this should render 10 different tasks. Notice how we added keys. These keys are used as identifiers for react and us, should we need them.

Now that our task list is working, we find a way to load the tasks. This is where our state comes in.

let's add an constructor to our .

https://pastebin.com/9jHAz2AS

In this constructor, we moved the taskArray away from the render function into the state. delete the taskArray and for loop in the render function. change the taskArray in the div into this.state.taskArray.

By now, your App.js code should look like this:

https://pastebin.com/1iNtUnE6

Step 3: Adding a Way to Add and Remove Objects

Let's add a way to add and remove objects. Let's plan it out.

What do we need?

A way for the user to add objects
A place to store objects
A way to retrieve the objects

What are we going to use?

An <input> element
The localstorage API w/ JSON

Let's start with the input element.

below {this.state.taskArray}, add an input and button to your code

<input type="text">Add

There should be a text input and Add button now.

It does nothing right now, so let's add 6 methods to our App method.

We need a method for when the button is clicked, and also when somebody types in the input. We also need a way to generate the task array, as well as save, load, and remove tasks.

let's add these 6 methods:

buttonClick()

inputTyped(evt)

generateTaskArray()

saveTasks(tasks)

getTasks()

removeTask(id)

let's also add this variable to our state:

input

We also need to bind our functions to this.

https://pastebin.com/syx465hD

Let's start adding functionality.

add 2 attributes to the <input type="text"> like so:

this makes it so that when the user types anything in the input, it executes the function.

add an onClick attribute to the <button>Add</button> like so:

Add

when the user clicks the button, the function executes.

now that the html part is done, let's get on with the functionality.

I have already pre-written the localStorage API interface, so replace the saveTasks, getTasks, and removeTask functions with this:

https://pastebin.com/G02cMPbi

let's start on the inputTyped function.

when the user types, we need to change the internal value of the input.

let's do that by using the setState function provided with react.

this.setState({input: evt.target.value});

this way, we can get the value of the input.

once that's done, we can work on the buttonClick function.

we need to add a task to the task list. we first pull the task list from localStorage, edit it, and then save it. We then call a rerender of the taskList to update it.

var taskList = this.getTasks();

taskList.tasks.push(this.state.input);

this.saveTasks(taskList);

this.generateTaskArray();

we get the tasks, push the input value into the tasks, and then save it. We then generate the task array.

now, let's work on the generateTaskArray() function.

we need to: