Basic React Setup
Before continuing with my full-stack series, I wanted to take a pause to discuss/demonstrate a more intuitive way of building a basic react app that makes sense to new devs. I wish I had this when I was learning React, so hopefully it helps someone out there…
For part 1, I’m going to forego setting up a backend, and rather, work on progressively breaking down a hard-coded list into components, and, in the process, giving a rundown for a very basic React app setup.
Step one is to create the React app in the CLI:
npx create-react-app basic-rails-setup-demoOnce this is done running, open the app in a code editor (I use VScode). Before going any further, it’s good practice to dispose of some built-in stuff which won’t be used. Within the src folder, I delete the logo.svg and index.css files, then delete all code within the app.css file (without removing the file).
Since the two files above were removed, we need to get rid of references to them. In index.js, delete the lines:
import ‘./index.css’;
import reportWebVitals from './reportWebVitals';
reportWebVitals();Then in app.js, delete the following lines:
import logo from './logo.svg';I also get rid of the boiler plate html within the return, except for the app div. So, once all the modifications are made, the ‘clean’ app.js should look like this:
import React from 'react';
import './App.css';function App() {
return (
<div className="App">
</div>
);
}export default App;
Now, to make sure things are working, I add <h1>Hello World</h1> within the div, and running npm-start in the CLI. If everything was done right, a browser window should pop up displaying ‘Hello World.’
Now that I’m ready to begin, I’m going to start by hard coding within the return for App.js, and then progressively — and hopefully, logically — breaking them out into component files and using React’s magic to make things happen. To demonstrate, I’m going to use the example of candy and their (approximate) price:
<div className="App">
<h1>Hello World</h1>
<ul>
<li>
<div>
<p>Skittles: $1.00</p>
</div>
</li>
<li>
<div>
<p>Maltesers: $1.50</p>
</div>
</li>
</ul>
</div>Now, the latent artistic side of me demands that I make this look slightly less awful. I find the easiest way to do this is to change the font. First, I wrap the h1 in a <header> tag, the rest in a <main> tag, add a <section> within the <main>, and an <h2> label at the top of the <section>.
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<main>
<section>
<h2>Candies</h2>
<ul>
<li>
<div>
<p>Skittles: $1.00</p>
</div>
</li>
<li>
<div>
<p>Maltesers: $1.50</p>
</div>
</li>
</ul>
</section>
</main>
</div>In the app.css file, I import roboto code from google’s fonts. This is an optional step, but it’s impressive how much of a difference this makes. In my opinion.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');body {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}header {
padding: 3rem;
}main {
padding: 0 3rem;
}
Much better.
Now, I’m going to begin “componentifying” this hard code. This process is the part which I think is most useful for new React devs.
First, change App.js into a Class component, importing {Component} and wrapping the method in a render:
import React, { Component } from 'react';
import './App.css';class App extends Component {
render() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<main>
<section>
<h2>Candies</h2>
<ul>
<li>
<div>
<p>Skittles: $1.00</p>
</div>
</li>
<li>
<div>
<p>Maltesers: $1.50</p>
</div>
</li>
</ul>
</section>
</main>
</div>
);
}
}export default App;
Next, create a file within the src folder for CandyListing.js, and make it a functional component (rather than a class component). I take one of the candy listings for syntax and add it to the return:
import React from 'react';
import "./Candylisting.css"export default function CandyListing(props){
return (
<div>
<p>Skittles: $1.00</p>
</div>
)
}
(I also added and imported associated .css files which I can use later. They can be blank for now)
Now, since I want to move away from hard coding the candy items, I modify the return thusly:
import React from 'react';
import "./Candylisting.css"export default function CandyListing(props){
return (
<div>
<p>{props.name}: ${props.price}</p>
</div>
)
}
I can then begin to clean up my App.js file by including the new component (still hard coding part):
import React, { Component } from 'react';
import './App.css';
import CandyListing from './CandyListing.js';class App extends Component {
render() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<main>
<section>
<h2>Candies</h2>
<ul>
<li>
<CandyListing name="Skittles" price="$1.00" />
</li>
<li>
<CandyListing name="Maltesers" price="$1.50" /
</li>
</ul>
</section>
</main>
</div>
);
}
}export default App;
Continuing to ‘componentify’ things, I’m going to create two more files: CandyList.js and CandyList.css, again in the src folder. In the CandyList.js file, I add the <ul> from app:
import React from 'react';
import "./CandyList.css";
import CandyListing from './CandyListing';export default function CandyList(props){
return (
<ul>
<li>
<CandyListing name="Skittles" price="$1.00" />
</li>
<li>
<CandyListing name="Maltesers" price="$1.50" />
</li>
</ul>
)
}
…updating App.js again:
import React, { Component } from 'react';
import './App.css';
import CandyListing from './CandyListing.js';class App extends Component {
render() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<main>
<section>
<h2>Candies</h2>
<CandyList />
</section>
</main>
</div>
);
}
}export default App;
…as well as CandyList.js:
import React from 'react';
import "./CandyListing.css";export default function CandyListing(props){
return (
<div>
<p>{props.name} : ${props.price}</p>
</div>
)
}
If everything was done correctly, the web page should still show the same list, but now with App calling the CandyList component, which calls the CandyListing component! Exciting. Much more to come, but that’s enough for one blog.