Day 1

📅 11-06-2019
🕐 1h
🏁 Initial setup and getting ready

Initial setup

I’m going to use create-react-app tool to scaffold the project folder. It’s a tool provided by Facebook that allow to easy scaffold a pre-configured starter project.

npx create-react-app todo-app 

The initial project consists of

• node_modules: contains all necessary dependencies. It’s generated scaffolding the app with create-react-app tool (there’s a npm install into it)
• public: contains few files like the index.html, the application favicon and a manifest that contains few basic application settings
• src: contains the code
• .gitignore
• package.json: there are all the project information like the version, the author and mainly the dependencies the application needs to work properly
• yarn.lock: contains all the dependencies Yarn needs with relative versions

To run the starter basic application it’s enough to do

cd todo-app npm start 

npm start is one of several pre-configured commands I’m going to use to develop this application. Other commands are:

• npm test
• npm build
• npm eject (stay away from it for now)

Get ready for components

In order to work with a sustainable and scalable structure, I like to keep things separated. I’m going to create two folders for components.

These two folders will contains (surprise) components!
The only difference between them is that a container is a component that manages the application state so it’s a stateful component. Other components are stateless components.

The main component <App />

Let’s create the first component.
I’m going go to move the App.js, App.test.js and App.css into their own folder ./containers/App/:

// App.js import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="App"> Placeholder </div>  ); } } export default App; 

/* App.css */ .App { text-align: center; } 

No changes to the App.test.js at the moment.

Update index.js - importing App component - because files location is changed and delete useless files like logo.svg.

The <Todo /> component

Let’s create the <Todo /> component into the ./components folder. Create Todo.js, Todo.test.js and Todo.css.

// Todo.js import React from 'react'; import './Todo.css'; const todo = () => ( <div className="Todo"> <p>Placeholder</p>  </div> ) export default todo; 

/* Todo.css */ .Todo {} /* Empty for now */ 

Todo.test.js is similar to App.test.js:

import React from 'react'; import ReactDOM from 'react-dom'; import Todo from './Todo'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<Todo />, div); ReactDOM.unmountComponentAtNode(div); }); 

Now I can use the <Todo /> component into the <App /> component, doing:

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

Check out the code here

git clone https://github.com/RossanoDan/todo-app.git cd todo-app npm install npm start