Getting Start with React.js (part 1)

From create-react-app to creating your first component

React is a front end Javascript framework. It is well documented making it a great framework for those new to coding. It was created by Facebook in 2011 and used for facebook’s newsfeed features. In 2013 it was released to the public. React enables developers to organize code in components. Components are divided by functionality and user interface presentation and can be used more than once. When combined, components can create a fully functioning app. React also has a tool create-react-app that makes it easy to create a React project.

Create your First App

(note that you will need node installed before doing these steps)r

1. run, npx create-react-app cat-castle npx is a package runner and allows you to run create-react-app using the latest version. cat-castle Is the title of our app. Note that the title can not be capitalized.
2. While this runs, take a quick break, go outside, grab a snack, or find a cat to pet.
3. Now that you are back, cd into the app you just created cd first-react-app then open it in your code editor.
4. Next, run npm start to get the development server up. Take a look at the development server to see what create-react-app looks like before you start to edit it. It should look just like the image at the top of this story.

Quick Challenge!

Before reading any further see if you can change the spinning react logo to an image of your choice. Take a look at the folder and files that were created if you have worked with vanilla JS some of these files may look familiar. To the left is my very first react creation.

What create-react-app has created for you

Back in your text editor, you will see that create-react-app has created quite a lot for you. There is a folder named “node modules”, this includes all of the dependencies of the current version of React app. This folder is automatically added to your .gitignore file(so it will not be pushed up to git hub) and in general, you do not need to worry about it at this stage. The public folder contains the logos for your app and the “index.html”. The src folder has the files for your main App javascript component it's associated styling and test suite. This is where the bulk of your editing and work will be.

Now that you have seen what comes in create-react-app let's get rid of some of the things we do not want before we start our first component.

1. In App.css remove all of the CSS stylings.
2. In “App.js” delete import logo from ‘./logo.svg’; as well as everything in the header tag. This should leave you with a blank white page on the development server. The code remaining in App.js should look like this:

import './App.css';
    function App() {
      return (
        <div className="App">
        </div>
      );
}
export default App;

Create your First Component

1. In the src folder, create another folder called “components”.
2. Now in that folder create a file called “CatsContainer.js”, make sure to have it the first letter capitalized. This component is where we will be storing cards for all of the cats in our castle. The CatsContainer component will be a function (more on this in part 2).
3. If you are using VScode and have the Es7 React extension you can type rfc followed by tab to get the basic structure of a React functional component. Otherwise copy the below code block.

import React from 'react'
export default function CatsContainer() {
    return (
      <div className="cat-container">
        <h2>Here are all of my cats</h2>
      </div>
    )
}

4. Now back in App.js we are going to include this component by importing it. at the top of the file and calling the component within the div found in the return. See below:

import './App.css';
import CatsContainer from './components/CatsContainer';

function App() {
    return (
      <div className="App">
        <CatsContainer />
      </div>
  );
}
export default App;

You should now see “Here are all of my cats” on the development server. Congratulations! you have now created your first component and made it appear on screen! Stay tuned for part 2 to continue working on this project.

More on starting on with React:

React Docs: Getting Started

Create React App: Getting Started

Code Academy Create a React App