Create the React app.
$ create-react-app my-react-todo
$ cd my-react-todo
$ git init
$ git add .
$ git commit -m "initial commit"
$ npm start
Navigate to localhost:3000
to see the boilerplate create-react-app
React application.
- Our app won't require all of the files that
create-react-app
builds, so we'll start by removing files you won't need for this demo app. Remove the following files from thesrc
folder:
$ rm src/App.css
$ rm src/App.test.js
$ rm src/logo.svg
or just run
$ rm src/App.css src/App.test.js src/logo.svg
You could also remove the favicon; just make sure you remove the reference to it from
index.html
as well.
At this point, there are probably errors in the browser letting you know some of those files are still used. The next step will help resolve those errors.
- Modify the code inside the
return
block fromsrc/App.js
so that it returns JSX for a header with the text Hello World.
Also, remove the lines that reference for './App.css'
and 'src/logo.svg'
. The whole file should look like this:
// src/App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
}
export default App;
- Switch over to your browser to automatically see the updates.
The
create-react-app
command installs and sets up a lot of useful tools. A tool calledwebpack
manages automatic re-rendering when files change! Take 5 minutes to research whatwebpack
is for and when it's useful.