With create-react-app installed globall , e'll be able to use the create- react-app command an he e in ou te minal.
Let's c eate a ne app e'll call 0da s using the create-react-app
command e just installed. Open a Te minal indo in a di ecto he e ou ant to c eate ou app.
In te minal, e can c eate a ne React application using the command and adding a name to the app e ant to c eate.
Inside ou ne p oject, e can un npm start to see ou ne p oject!
Let's sta t ou app in the b o se . The create-react-app package comes
ith a fe built-in sc ipts it c eated fo us in the package.json file . We can
start editing ou app using the built-in ebse e using the npm start
npm start
This command ill open a indo in Ch ome to the default app it c eated fo us unning at the u l: http://localhost: 000/ http://localhost: 000/ .
Let's edit the ne l c eated app. Looking at the di ecto st uctu e it c eated, e'll see e ha e a basic node app unning ith a
public/index.html and a fe files in the src/ di ecto that comp ise ou
unning app.
Let's open up the src/App.js file and e'll see e ha e a e basic
component that should all look familia . It has a simple ende function hich etu ns the esult e see in the Ch ome indo .
The index.html file has a single <div /> node ith the id of #root, he e
the app itself ill be mounted fo us automaticall this is handled in the
src/index.js file . An time e ant to add ebfonts, st le tags, etc. e can
We' e used multiple components in the past. Let's pull in the e ample e alked th ough on da - ith a heade and content slightl simplified -- changing the className f om notificationsFrame to App and emo ing the
inne component :
import React from 'react'
class App extends React.Component { render() {
return (
<div className="App"> <Header /> <Content /> </div> ) } }
We could define the Header and the Content component in the same file, but
as e discussed, that becomes p ett cumbe some. Instead, let's c eate a di ecto called components/ in the src/ di ecto src/components/ and
c eate t o files called Header.js and Content.js in the e:
# in my-app/
mkdir src/components
touch src/components/{Header,Content}.js
No , let's ite the t o components in thei especti e file. Fi st, the Header
import React, {Component} from 'react';
class Header extends Component { render() {
return (
<div id="header"> <h1>Header</h1> </div>
); } }
And no let's ite the Content component in the src/components/Content.js file:
import React, {Component} from 'react';
class Content extends Component { render() {
return <p className="App-intro">Content goes here</p>; }
}
B making a small update to these t o component definitions, e can then
import them into ou App component in src/App.js .
We'll use the export ke o d befo e the class definition:
Let's update the Header component slightl :
export class Header extends React.Component { // ...
export class Content extends React.Component { // ...
}
No e can import these t o component f om ou src/App.js file. Let's
update ou App.js b adding these t o import statements:
import React from 'react'
import {Header} from './components/Header'
import {Content} from './components/Content'
class App extends React.Component { render() {
return (
<div className="App"> <Header /> <Content /> </div> ) } }
He e, e' e using named e po ts to pull in the t o components f om thei especti e files in src/components/.
B con ention, if e onl ha e a single e po t f om these files, e can use the
export default s nta so e can emo e the {} su ounding the named
e po t. Let's update each of these especti e files to include an e t a line at the end to enable the default impo t:
export class Header extends React.Component { // ...
}
and the Content component:
export class Content extends React.Component { // ...
}
export default Content
No e can update ou impo t of the t o components like so:
import React from 'react'
import Header from './components/Header'
import Content from './components/Content'
class App extends React.Component { render() {
return (
<div className="App"> <Header /> <Content /> </div> ) } }
Using this kno ledge, e can no also update ou components b impo ting the named Component class and simplif ou definition of the class file again.
import React, {Component} from 'react'; // This is the change
export class Content extends Component { // and this allows us // to not call
React.Component
// but instead use just // the Component class render() {
return <p className="App-intro">Content goes here</p>; }
}
export default Content;
We'll get to deplo ment in a fe eeks, but fo the time being kno that the gene ato c eated a build command so e can c eate minified, optimize
e sions of ou app that e can upload to a se e .
We can build ou app using the npm run build command in the oot of ou
p oject:
npm run build
Shipping
With that, e no ha e a li e- eloading single-page app SPA ead fo de elopment. Tomo o , e'll use this ne app e built di ing into
Edit this page on Github (https://github.com/fullstackreact/30-days-of-react/blob/day-13/post.md)